[TIL # 56] React Basic

import React from 'react'

function First(props) {
	const {name, number} = props

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

export default First

props를 계속 하위로 내려주는것을 사용하는건 안티패턴이다. 가장 가까운 하위컴포넌트까지 내려주는게 좋다.

useState

표시되는 값이 상호작용에 따라 변경될 수 있도록 하기 위해서는 useState 가 꼭 필요하다!
사용자에게 변하는 값을 보여주고자하면 let이아니라 useState를 사용한다.

📌 꼭 기억할 것

JSX의 주의사항

태그 전체를 감싸는 부모 태그가 꼭 존재해야한다.

  return (
    <div>Timer</div>
    <div>Timer</div>
  )

JSX 내부에서, 외부 자바스크립트 부분에서 선언한 변수나 함수를 쓸 때는 {} 기호를 쓴다.

function Timer() {
	let name = "태민"

  return (
    <div>{name} Timer</div>
  )
}

JSX 내부에서, html 태그 요소에 class 를 주고 싶을 때는, className 을 쓴다.

import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

주석은 {/* 주석내용 */} 형태로 사용한다.

  return (
		{/* 주석내용 */}
    <>Timer</>
  )

이름 짓기 규칙

변수 및 함수 명: 카멜 케이스로 작성한다. ex) helloWorld
컴포넌트 명: 파스칼 케이스로 작성한다. ex) HelloWorld

props

props는 상위 컴포넌트에서 하위 컴포넌트로 값/변수를 전달하기 위해서 사용된다.
이때, 상위 컴포넌트에서 하위컴포넌트 태그에다가 값을 입력할 때
문자의 경우 변수명 = 문자열로 쓰고,
숫자의 경우 변수명 = {숫자}라고 쓴다.

📚 실습 풀어보기

사용자가 특정 timezone 을 제거할 수 있는 세계 시계 만들기 (map 활용)

[세부사항]

timezone 이름이 들어있는 배열을 만들어주세요. (useState 활용)
해당 배열에 있는 각각의 timezone 마다 시각을 표시해주세요. (map 활용)
(심화) 각각의 timezone 마다 제거하기 버튼이 있고, 해당 버튼을 누르면 해당하는 timezone 의 시각만 제거되도록 해주세요. (filter 활용)

[풀어보기]

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

function Practice() {
  const [times, setTiems] = useState
  ([
    {id: 1, tz: 'Asia/Seoul' }, 
    {id: 2, tz: 'Asia/Taipei' }, 
    {id: 3, tz: 'US/Pacific' } 
  ]);

  const deleteTime = (id) => {
    const newTZ = times.filter(time => time.id !== id)
    setTiems(newTZ)
    console.log(newTZ)
  } 
  
  return (
    <div>
      {times.map((time) => {
        return (
          <>
            <h2>{time.tz}의 현재 시각</h2>
            <h3>{moment().tz(time.tz).format('YYYY-MM-DD HH:mm:ss')}</h3>
            <button onClick={() => deleteTime(time.id)}>제거하기</button>
          </>
        )      
      })}
    </div>
  )
}

export default Practice

[풀이]

  return (
    <div>
      {times.map((time) => {
        return (
          <>
            <h2>{time.tz}의 현재 시각</h2>
            <h3>{moment().tz(time.tz).format('YYYY-MM-DD HH:mm:ss')}</h3>
            <button 
              onClick={() => {setTiems(times.filter(timeElement => timeElement.id !== timeElement.id))}}>
                제거하기
            </button>
          </>
        )      
      })}
    </div>