왜 useState를 조건문 안에서 사용하면 안 되나요?
분야: 프론트엔드
useState()를 조건문 안에서 사용하면 안 되는 이유는 리액트가 state를 관리하는 방식이 useState를 호출하는 순서과 연관되어 있기 때문입니다.
리액트는 컴포넌트 내부에서 useState()가 호출된 순서를 기준으로 state를 저장하고 업데이트합니다. 그런데 useState()를 조건문 안에서 호출하면 특정 렌더링 시에는 호출되고, 다른 렌더링에서는 호출되지 않을 가능성이 생깁니다. 이렇게 되면 리액트가 호출 순서를 기반으로 state를 추적하는 과정에서 혼동이 발생하게 됩니다.
예를 들어, 다음과 같은 코드가 있다고 가정해 보겠습니다.
function Example({ shouldUseState }) {
if (shouldUseState) {
const [count, setCount] = useState(0);
}
return <div>Example Component</div>;
}
위 코드에서 shouldUseState 값이 true일 때만 useState()가 호출됩니다. 문제는, shouldUseState가 false로 바뀌는 경우입니다. 이때 useState()의 호출 개수가 변경되면서 리액트의 내부 상태 저장 방식과 불일치가 발생합니다. 리액트는 상태를 순서 기반으로 관리하기 때문에, 이후 렌더링에서 이전에 있던 useState() 호출이 사라지면 다른 useState() 호출들이 엇갈려 버그가 발생할 수 있습니다.
이러한 문제를 방지하기 위해서는 useState()가 항상 컴포넌트의 최상위에서 호출되어야 합니다. 즉, 조건문이나 반복문, 함수 내부에서 호출하지 않아야 합니다.