[React] 리엑트 살펴보기4: useState()의 동작 방식

useState는 함수 컴포넌트에서 상태값을 관리하기 위한 훅이다. 여기서는 이 훅의 동작 방식으로 중요한 부분들을 살펴볼 것이다.

 

1. 데이터 바인딩

리엑트가 아닌 바닐라 자바스크립트에서 ui를 업데이트는 상태값 변경 로직 => 실제 DOM 업데이트와 리렌더링의 과정을 따른다. 반면, react는 상태값을 변경하기만 해도 자동으로 render로직과 commit 로직이 일어나며 실제 DOM업데이트가 이뤄진다. (이 부분은 아랫 글 참조)

2024.03.04 - [react] - [React] 리엑트 살펴보기1: 가상 돔과 리엑트의 렌더링 과정

 

여기서 상태값 변경을 위해 사용하는 것이 useState이다. 즉 , 이것은 상태값 변경+리렌더링을 일으키는 훅인 셈이다.

 

 

2. 문법

const [state, setState]=useState()

• useState 훅은 배열로 두 개의 값을 반환한다.
• 첫번째 요소는 상태값
• 두번째 요소는 상태값의 setter 함수
• setter함수에 변경할 값을 할당하면 state가 변경되고 리렌더링이 발생한다.
• 훅은 함수형 컴포넌트의 최상단에서 선언가능하다. 즉, if문이나 for문, 혹은 다른 훅의 내부에서 선언할 수 없다.

 

3. 주의 사항

setState를 통한 상태값 변경은 비동기적 요청이다.  즉, state를 변경하고 나서 즉시 이 값으로 무언가를 하려고 하면 이전 state를 참조하게 된다. 또한, 동시에 여러 state를 변경할 시, 이 요청들을 모아서 일괄적으로 처리한 후 리렌더링이 발생한다. 이는 실제 dom 업데이트 횟수를 줄여 최적화를 위함이다.

 

4. 해결방안1: 업데이터 함수

업데이트 함수란, setter 함수에서 함수를 할당하여 값을 업데이트하는 방식이다.

const [state, setState]=useState(0)

return <button onClick={()=>setState((prev,props)=>prev+1)}>click</button>

업데이트 함수의 리턴 값은 새로운 상태값이 되고, 이 함수의 첫 인자는 기존 스테이트다. 따라서, 짧은 시간 내에 동일한 스테이트가 많이 업데이트 될 때에 기존 스테이트가 갱신된 이후의 업데이트를 보장한다. 두 번째 인자는 컴포넌트의 props다.

업데이터 함수는 주의사항이 있다. 여기서의 리턴 값은 늘 기존의 state와는 다른 값을 반환해야 한다. 특히 객체의 경우, 참조 값이 다른 새로운 객체를 반환해야 한다. 그렇지 않으면 리렌더링이 발생하지 않는다.

 

5. 해결방안2: useEffect

useEffect 훅은 의존성 배열을 통해서 특정한 state가 변한 후 리렌더링이 종료된 시점에서 실행될 코드를 만들 수 있다. 이를 통해서 state 변경의 비동기적 요청이 완료된 시점에서 실행될 코드를 작성할 수 있다.