🔮 React - 4. 함수 컴포넌트에서 useState 사용하기

들어가기 전에 ...

👉 리액트 16.8 이전 버전에서는 함수 컴포넌트에서 state를 사용할 수 없었습니다. 하지만 16.8 부터는 useState라는 함수를 사용하여 함수 컴포넌트에서도 state를 사용할 수 있게 되었습니다. 사용법은 클래스 컴포넌트와 조금 다른데요.

이 과정에서 Hook을 사용합니다.

⭐️ 배열 비구조화 할당

• 배열 안에 들어있는 값을 쉽게 추출할 수 있도록 도와주는 ES6 문법 중 하나 입니다.

// 예제 1.(객체 리터럴)
const person = {
  name: '홍길동',
  age: 30,
  address: '서울시 강남구',
  email: 'honggildong@naver.com'
}

const { name, age } = person;

// 예제 2. (배열)
const colors = ['red', 'green', 'blue'];
const [firstColor, , thirdColor] = colors;

useState 사용하기

• 리액트 훅(hook) 중 하나로 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다.
• 상태가 바뀜과 동시에 렌더링을 해줍니다.(자동으로 화면 업데이트)
  예) await 상태 변경시 바로 업데이트!!
• useState 함수의 인자에는 상태의 초기값을 넣어줍니다.

1. 버튼 클릭시 글자색 바꾸기

import React, {useState} from "react";

const Say = () => {
  const [messages, setMessage] = useState("default");
  const onClickEnter = () => setMessage("안녕하세요.");
  const onClickLeave = () => setMessage("안녕히 가세요.");
  const [colorTest, setColor] = useState("purple");

  return (
    <>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <button style={{background:"blue" , color:"white", border:"none"}} onClick={()=>setMessage("ㅎㅇㅎㅇ")}>응용해보즈아</button>
      <h1 style={{color : colorTest}}>{messages}</h1>
      <button style={{color:"red"}} onClick={()=>setColor("red")}>빨간색</button>
      <button style={{color:"green"}} onClick={()=>setColor("green")}>초록색</button>
      <button style={{color:"orange"}} onClick={()=>setColor("orange")}>주황색</button>
    </>
  );
}

export default Say;

import './App.css';

import Say from './0411_4_Say';

function App() {
  return (
    <>
      <Say />
    </>
  );
}

export default App;

2. 실시간 시간 보여주기

import React, {useState} from "react";

const Clock = () => {
  const [currentDate, setDate] = useState(new Date());
  const tick = () => {
    setDate(new Date());
  }
  setInterval(tick, 1000);

  return (
    <div>
      <h1>현재 시간을 표시합니다.</h1>
      <h2>현재 시간은 {currentDate.toLocaleTimeString()} 입니다.</h2>
    </div>
  );
}

export default Clock;

import './App.css';

import Clock from './0411_5_Clock';

function App() {
  return (
    <>
      <Clock />
    </>
  );
}

export default App;