[React] useMemo 훅
2022. 10. 2. 23:04
라이브러리 & 프레임워크/React
들어가며 최근 회사에서 리액트로 개발하는 도중 무분별한 리렌더링이 발생하는 이슈를 겪었다. 대표적으로, 사용자가 문의사항을 남기는 페이지에서 문의 내용을 입력할 때마다 다른 인풋이 깜빡거리는 현상이 발생했다. 이 깜빡거리는 현상의 원인은 문의 내용 입력 시 content state 의 업데이트로 컴포넌트가 리렌더링되었기 때문이었다. 리액트는 상태의 변경에 따라 상태가 변경되는 컴포넌트와 그 이하의 모든 자식 컴포넌트가 렌더링의 대상이 된다. 문제는 자식 컴포넌트의 상태가 변경되지 않아도(갱신될 필요가 없어도) 불필요한 렌더링이 일어난다고 한다. 리액트의 특성상 content state 가 업데이트되었는데 다른 인풋 또한 불필요하게 렌더링이 발생한 것으로 예상된다. 위와 같은 리렌더링 이슈를 막기 위해 해..