[React] 동적 상태값을 관리하기 위한 useState

최근 회사 내부 프로젝트로 리액트를 다시 써보면서 공식 문서를 보면서 다시 정리해보려 한다.

 

 

1. useState

---

리액트에서 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔때 이러한 값을 관리하는 것이 필요하다.

이럴때 사용할 수 있는 훅이 useState() 이다.

const [state, setState] = useState(initialState)

- state : 현재 상태 값 저장 변수

- setState : 상태 값 갱신 함수

- initialState : 초기값

 

 

2. 예제

---

값을 카운트하는 함수형 컴포넌트로 예를 들어보자.

function Counter() {
    const [count, setCount] = useState(0)
    
    const increase = () => {
    	setCount((prev) => prev + 1)
    }
    
    const decrease = () => {
    	setCount((prev) => prev - 1)
    }
    
    return (
    	<div>
            <p>{count}</p>
            <button>+</button>
            <button>-</button>
        </div>
    )
}

1. 초기값 0을 가지는 useState 함수를 호출 

2. 배열안에 현재 상태값 변수와 상태값을 갱신해주는 Setter 함수인 count / setCount를 선언

3. increase, decrease 함수에서 setCount를 사용해 상태값을 갱신

4. {count} 에서는 갱신된 현재 상태값을 렌더링