[ React ] State 이해하기

📌 State란 ?

컴포넌트 내부에서 바뀔 수 있는 값을 의미하며 state의 변화를 감지하여 리렌더링을 수행합니다.

state는 어떤 타입이든 상관 없으며 여러개일 수도 있습니다. 

클래스형 컴포넌트와 함수형 컴포넌트에서 사용하는 방법은 다릅니다. 함수형 컴포넌트에서는 훅 Hook개념을 이용해서 더욱 쉽게 사용 가능합니다.

 

useState는 함수형 컴포넌트에서만 사용할 수 있는 hook으로 배열을 반환하는 함수입니다.[0]번째에는 현재 데이터, [1]번째에는 값을 변경하는 setter함수가 위치하는데 아래의 코드를 확인합니다.

let result = useState('초기값'); //--- 구조분해할당 전
let data = result[0]; //--- data
let setData = result[1]; //--- function

이 코드는 구조분해할당 전 useState를 활용한 코드입니다.

 

 

우리는 아래와 같이 구조분해할당을 하여 코드를 작성할 것입니다. 

const [data, setData] = useState('초기값');

첫번째 배열 요소에는 현재값, 두번째 배열 요소에는 상태를 변경하는 setter를 반환합니다.

 

 

✔︎ 값은 직접 수정할 수 없고 setter를 사용해야합니다.

❌ 오류코드

let enter = () => {
    data = "이렇게 값을 바꾸면 안됩니다!";
  }
  
⭕️ 옳은 코드
 let enter = () => {
    setData("이렇게 값을 바꾸는 것이다!");
  }

 값을 변경하는 setter함수는 비동기적으로 데이터를 change하고 리렌더링 수행합니다.

 

const [color, setColor] = useState('red');

return (
	<div>
    	<button onClick={ () => setColor('blue') }>파란색</button>
        <button onClick={ () => setColor('green') }>초록색</button>
        <button onClick={ () => setColor('yellow') }>노란색</button>
    </div>
)

useState는 이런식으로 활용 가능합니다 🙆🏻‍♀️

 

 

📌 useState를 활용한 실습 예제

Q. 증가/감소 버튼을 누르면 1씩 증감하고 초기화하면 카운트값이 0으로 변환되도록 코드를 작성해보세요.

A.
import { useState } from "react";

function Quiz() {

  let [cnt, setCnt] = useState('0');
  let increase = () => {
    setCnt ( prev => prev + 1);
  }


  return (
    <div>
      실습 <br/><br/>
      카운트: {cnt} <br/><br/>
      <button onClick={ () => {setCnt(++cnt)} }>증가</button>
      <button onClick={ () => {setCnt(--cnt)} }>감소</button> 
      <button onClick={ () => {setCnt(0)} }>초기화</button> 
    </div>
  )

}

export default Quiz;