useState를 잘 이해하고 있는가?
허접하긴 해도 react로 개인 프로젝트도 하나 해보고 팀 프로젝트도 해봤기 때문에 어느정도의 useState 훅에 대한 이해가 있다고 생각하였다. 하지만 어느 유튜브 영상에서 console.log를 예측하는 문제를 냈지만 몇개 맞추지 못하였고 나는 아직 이해가 한참 부족하구나 생각하여 글로 적게 되었다.
useState란?
React에서 useState는 상태 관리를 위한 Hook이다.
이는 함수형 컴포넌트에서 상태를 가지고 있을 수 있게 해준다.
useState는 하나의 인자를 받는데, 이것은 초기 상태이다.
이 초기 상태는 어떤 타입도 될 수 있다 - 숫자, 문자열, 배열, 객체 등.
useState는 배열을 반환하며, 이 배열에는 두 개의 값이 있다. 첫 번째 값은 현재 상태이고, 두 번째 값은 상태를 업데이트하는 함수이다. 이 함수를 사용하여 상태를 업데이트하면 컴포넌트는 리렌더링된다.
// count는 현재의 상태, setCount는 상태를 업데이트하는 함수
const [count, setCount] = useState(0);여기서 잠깐!
상태가 업데이트 될 때마다 리렌더링된다면 너무 불필요한 리렌더링이 많은게 아닐까?
state상태에 변화를 주게되면 React가 컴포넌트의 반환 값을 다시 계산하여 DOM을 업데이트한다.
여기서 오해할 수 있는것이 전체 컴포넌트가 처음부터 다시 실행되는 것이 아니다. React는 효율적인 렌더링을 위해 변경된 부분만 업데이트한다. 즉, count 상태값이 변경되었을 때, 그에 따라 변경되는 UI 부분만 실제 DOM에서 업데이트하는 것이다.
useState Hook의 예제
useState Hook를 설명할 때 가장 많이 나오는 count를 하나씩 증가시키는 버튼의 예제를 가져왔다.
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);초기값 0인 count라는 상태가 있고, 그 상태를 변화시켜줄 수 있는 setCount 함수가 있다.
'Click me'라는 버튼을 누르면 setCount를 통해 count가 1 증가된 값으로 상태가 변경된다.
또다른 예제를 보자.
const [count, setCount] = useState(0);
setCount(count + 1);
console.log(count); 여기서 과연 콘솔의 count에는 몇으로 출력되게 될까?
아마 이런식으로 코드를 짠 사람은 count가 1이 되기를 바랬겠지만 실제로는 0이 출력되게 된다.
이유는 뭘까?
이유는 setCount가 즉시 상태를 업데이트하지 않고, 다음 렌더링 사이클에서 그 변경사항을 반영하기 때문이다.
만약에 상태 업데이트 후 즉시 그 변경사항을 반영해야 하는 로직이 필요하다면, useEffect 훅을 사용해야 한다.
useEffect는 상태가 업데이트된 후에 실행되기 때문에, 상태 변경 후의 로직을 처리하는 데 적합하다.
useEffect는 다음 글에 자세하게 작성하도록 하겠습니다.
