React #14 (훅, 상태관리 - useState, useEffect)

※사전 작업

프로젝트 생성

mkdir ch04
cd ch04
npx create-react-app9 ch04_1 --template typescript
code ch04_1

 

패키지 설치 ( 버전 주의 ! )

npm i chance luxon @fonsource/material-icons
npm i -D @types/chance @types/luxon
npm i -D postcss autoprefixer tailwindcss@3.4.17 @tailwindcss/line-clamp daisyui@4.12.14

 

이전 프로젝트에서 쓰던 파일 복사 및 정리

cp -r ../../ch03_5/src* ./src
cp -r ../../ch03_5/*.js .
rm -r -force src/pages/*

 

시계 앱을 만들면서 이해하기

(템플릿 tsx 파일을 가져와 이름만 바꿔서 복사해오기)

cd src
cp copy/CopyMe.tsx pages/Clock.tsx
cd ..

 

 

값은 불변성, 겉에 보이는 상태가 바뀌는 걸 관리한다고 해서 "상태 관리" 라고 하는 것 같다.

 

 

원래에는 useState를 받지 않으면 화면에서 실시간으로 갱신되는 상태들을 적용할 수 없는 문제에 있지만,

 

useState를 받음으로써, 실시간으로 화면에 적용시킬 수 있다.

 

 

 

 

기능 구현

import { useState, useEffect } from "react";
import Clock from "./pages/Clock";


export default function App() {
  
  const [today, setToday] = useState(new Date());

  useEffect(() => {
    console.log('useEffect called.');
    const duration = 1000;
    const id = setInterval(() => {

      setToday(new Date())
    }, duration)
    return () => clearInterval(id)
  }, []);


  return (
    <main>
      <Clock today={today} />
    </main>
  )
}

 

실시간으로 바뀌는 시각의 상태를 확인해보자

 

 

 

 

 

실습 - 덧셈기

import { useState } from "react";

// useState의 초기값을 0으로 지정
export default function App() {
  const [number1, setNumber1] = useState(0);
  const [number2, setNumber2] = useState(0);
  
  
  // 무슨 기능을 할 건지 아래에서 구현
  return (
    <div>
      <h2 className="">{"덧셈기"}</h2>
      <div className="flex flex-row items-center">
        
        <input 
          type="number" 
          value={number1} 
          onChange={(e) => setNumber1(parseInt(e.target.value))} />
        
        <span>{"+"}</span>
        
        <input 
          type="number" 
          value={number2} 
          onChange={(e) => setNumber2(parseInt(e.target.value))} />
      
      </div>
    
      <p>{`덧셈 결과는 : ${number1} + ${number2} = ${number1 + number2}`}</p>

    </div>
    

  )
}

 

 

입력란에 넣는 값에 따라 실시간으로 계산