[React] 수업 1

react

1. vscode 꿀팁 

1-1. vscode에서 rfce로 자동완성을 할 수 있다. 

1-2. ES7+ React/Redux/React-Native snippets를 설치하면 코드를 자동 완성할 수 있다. 

 

2. 수업내용 

2-1. props

import First from './components/First';

function App() {
  return (
    <div>
      <First name="양다영" number={7}/>
    </div>
  );
}

export default App;

import React from 'react'

function First({name, number}) {
  return (
    <div>이름은: {name}, 숫자는 {number}</div>
  )
}

export default First

props.name 보다 객체구조분해로 받아오면 프롭스로 주는 것이 몇 개인지!! 

틀을 재활용하기 위해서 props를 사용한다!! Prop Drilling( props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정)은 최대한 지양해야 한다. 가까운 컴포넌트에만 props로 내려줘야 한다!! 

2-1-1. props 실습 

자기소개를 props로 받아서 표시하는 컴포넌트 만들기

import React from 'react'

function Intro(props) {
  const {name, age, email,discription } = props
  return (
    <div>
      {discription}!! 저는 {name}이고, {age}살 입니다.  {email}로 연락주세요!! 
    </div>
  )
}

Intro.defaultProps = {
  name: '기본 이름'
}

export default Intro

 

 

2-2. state 

const [변수명, set변수명] = useState(변수의 초기값) 

import React, {useState} from 'react'

function Intro(props) {
  const {name, age, email,discription } = props

  const [test, setTest] = useState(0)
  const countUp = () => {
    setTest(test + 1)
  }
  const countDown = () => {
    setTest(test - 1)
  }

  return (
    <div>
      <div>
        {test}
        <button onClick={countUp}>카운트업!! </button>
        <button onClick={countDown}>카운트다운!! </button>
      </div>
      {discription}!! 저는 {name}이고, {age}살 입니다.  {email}로 연락주세요!! 
    </div>
  )
}

Intro.defaultProps = {
  name: '기본 이름'
}

export default Intro

setTest은 test을 변경할때 사용한다. 

 

2-2-1. 세계 시간 표시해보기 (props, state 실습)

moment.js 설치: yarn add moment moment-timezone

실습 1 state 사용하기. 

      <Clock timezone="Asia/Seoul"/>
      <Clock timezone="Asia/Taipei"/>

import React, {useState} from 'react'
import moment from 'moment-timezone'


function Clock() {
  const [time, setTime] = useState(moment().tz('US/Pacific').format('YYYY-MM-DD HH:mm:ss'))
  const changeTZ = (TZ) => {
    setTime(moment().tz(TZ).format('YYYY-MM-DD HH:mm:ss'))
  }

  return (
    <>
    <div>{time}</div>
    <button  onClick={() => changeTZ('Asia/Seoul')}>서울로 바꾸기 </button>
    <button  onClick={() => changeTZ('Us/Pacific')}>미국으로 바꾸기 </button>
    </>
  )
}

export default Clock

 

실습 2 props 추가하기

      <Clock timezone="Asia/Seoul" buttonTimezone="Us/Pacific" />
      <Clock timezone="Asia/Taipei" buttonTimezone="Us/Pacific" />

import React, {useState} from 'react'
import moment from 'moment-timezone'


function Clock(props) {
  const {timezone, buttonTimezone} = props
  const [time, setTime] = useState(moment().tz(timezone).format('YYYY-MM-DD HH:mm:ss'))
  const changeTZ = (TZ) => {
    setTime(moment().tz(TZ).format('YYYY-MM-DD HH:mm:ss'))
  }

  return (
    <>
    <div>{time}</div>
    <button  onClick={() => changeTZ(timezone)}>{timezone}로 바꾸기 </button>
    <button  onClick={() => changeTZ(buttonTimezone)}>{buttonTimezone}으로 바꾸기 </button>
    </>
  )
}

export default Clock

 

 

2-3. map과 filter 써보기

import First from './components/First';
import Intro from './components/Intro';
import Clock from './components/Clock';
import Board from './components/Board'

function App() {
  return (
    <div>
      <Board selecCategory="드라마" />
      <Board selecCategory="영화" />
      <Clock timezone="Asia/Seoul" buttonTimezone="Us/Pacific" />
      <Clock timezone="Asia/Taipei" buttonTimezone="Us/Pacific" />
      <First name="양다영" number={7}/>
      <Intro name="양다영" age={26} email="jc1525@hanmail.net" discription="안녕하세요!" />
      <Intro age={26} email="jc1525@hanmail.net" discription="안녕하세요!" />
    </div>
  );
}

export default App;

import React, { useState } from 'react'
import {data} from '../constant/data'

function Board(props) {
  const {selecCategory} = props
    const [articles, setArticles] = useState(data.filter((element)=> (element.category === selecCategory)))

    return (
    <div>
      {articles.map((element) => {
        return (
          <div key={element.id}>
          <h3>{element.title}</h3>
          <p>{element.content}</p>
          </div>
        )
      })}
      
    </div>
    )
}

export default Board

export const data = [{'id': 1, 'title': '제목1', 'content': '내용1', 'category': '영화'}, {'id': 2, 'title': '제목2', 'content': '내용2', 'category': '드라마'}, {'id': 3, 'title': '제목3', 'content': '내용3', 'category': '예능'}]

 

 

2-4. 사용자가 특정 timezone 을 제거할 수 있는 세계 시계 만들기 (map 활용) 스스로 실습! 

import SetTimezone from './components/SetTimezone';


function App() {
  return (
    <div>
      <SetTimezone />
    </div>
  );
}

export default App;

import React, {useState} from 'react'
import moment from 'moment-timezone'

function SetTimezone() {
  const [timezones, setTimezones] = useState([{id: 1, tz: "Asia/Seoul"},{id: 2, tz: "Asia/Taipei"}, {id: 3, tz: "America/New_York"}, {id: 4, tz: "America/Los_Angeles" }])
  const deleteCityHandler = (cityTZ) => {
    setTimezones(timezones.filter((element)=> (element.tz !== cityTZ)))
  }
  return (
    <div>
      {
        timezones.map((timezone)=> {
          return (
            <div key={timezone.id}>
              <div>{timezone.tz}</div>
              <div>{moment().tz(timezone.tz).format('YYYY-MM-DD HH:mm:ss')}</div>
              <button onClick={()=> deleteCityHandler(timezone.tz)}>삭제하기</button>
            </div>
          )
        })
      }
    </div>
  )
}

export default SetTimezone

1. timezones라고  useState 활용해서 timezone 이름이 들어있는 배열을 만들었다. 
2. map을 활용해서 timezones 배열에 있는 각각의 timezone 마다 시각을 표시했다. 
3. 각각의 timezone 마다 제거하기 버튼이 있고,  filter를 활용해서 해당 버튼을 누르면 해당하는 timezone의 시각이 삭제되도록 구현했다.