[React] 당신은 상태를 필요로 하지 않을 것입니다. #0

이 포스트는 React 버전 18.3.1을 기준으로 합니다.

function <S>(factory: () => S, deps: React.DependencyList): S {
    const [ state, setState ] = useState<S>();
    useEffect(() => setState(factory()), deps);

    return state;
}

React에서 흔히 볼 수 있는 잘못된 습관 중 하나는 모든 상태에 반응성을 부여(useState를 사용하는 등의 행위)하는 것입니다. 이는 일반적으로 최신 상태를 유지하기 위해 항시 동기화가 필요하다는 잘못된 믿음에서 비롯됩니다. 우리는 종종 상위 상태에 따라 값이 결정되는 상태를 사용합니다. 이를 파생 상태라 부르는데 대부분 아래 한 줄로 해결할 수 있습니다.

const state = factory();

이렇듯 모든 상태에 반응성이 필요한 것은 아닙니다. 이는 고정관념에서 벗어나면 꽤 자명한 논리입니다. 뿌리가 반응성을 가지면 변화가 생겼을 때 그 영향은 줄기를 타고 내려와 결국 뿌리까지 미칠 것이기 때문입니다. 이 시리즈에서는 상태를 취급할 때 불필요한 반응성을 제거하는 방법에 대해 살펴봅니다.

시리즈는 다음 편에서 계속됩니다. 읽어주셔서 감사합니다!

묻고 답하기

개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.