react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 useState

• v16.8 이후부터 useState 함수를 이용하여 함수형 컴포넌트에서도 state를 이용할 수 있다.

  💡 state는 컴포넌트가 자체적으로 지닌 상태값으로, 컴포넌트 내에서 값을 업데이트할 수 있다.

• useState 함수를 호출하면 배열이 반환되는데, 첫번째 원소는 현재 상태값이고, 두번째 원소는 상태를 바꾸어 주는 setter 함수이다.
• useState 함수를 호출할 때 초기 상태값을 인자로 전달한다.
• setState을 호출하면 인자로 전달받은 값으로 상태값이 업데이트되고 컴포넌트가 리렌더링된다.

import React, { useState } from 'react';

function Counter() {
    // 배열 비구조화 할당
    const [number, setNumber] = useState(0);
    
    const onIncrease = () => {
        setNumber(number + 1);
    };
    
    const onDecrease = () => {
        setNumber(number - 1);
    };
    
    return (
        <div>
            <h1>{number}</h1>
            <button onClick = {onIncrease}>+1</button>
            <button onClick = {onDecrease}>-1</button>
        </div>
    );

}
export default Counter;

✨ 함수형 업데이트

• 만약 이전의 상태값을 참조하고 싶다면, setState에 함수 인자를 전달하면 된다.
• 이 함수 인자는 이전의 상태값을 인자로 받고 업데이트된 상태값을 반환한다.

// 함수형 업데이트
const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
}
const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
}

✨ state 사용 시 주의사항

• state 값을 바꾸어야 할 때는 setState 혹은 useState를 통해 전달받은 setter 함수를 사용해야만 한다.

// 잘못된 코드
this.state.number = this.state.number + 1;
this.state.array = this.state.array.push(2);
this.state.object.value = 5;

const [object, setObject] = useState({a: 1, b: 1});
object.b = 2;

• 배열이나 객체를 업데이트해야 할 때는 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트한 후 그 사본의 상태를 setState 혹은 setter 함수통해 업데이트한다.

참고: React 공식 문서