이 포스트는 React 버전 18.3.1을 기준으로 합니다. 잠깐! 동시성 렌더링에 대해 아직 잘 모른다면 [React] 변화의 물결, 동시성 렌더링을 먼저 읽어보세요! 부작용(정리가 필요한)을 가진 상태는 어떻게 해야 할까요? 렌더링과 커밋이 반드시 한 쌍을 이루지는 않으므로 상태를 렌더링 중 생성하고 useEffect를 통해 정리 함수를 호출하는 것은 적절치 않습니다. React 개발팀은 의도적으로 부작용을 관련 기능을 통해서 처리하도록 ...
이 포스트는 React 버전 18.3.1을 기준으로 합니다. 이번 편은 이전 편으로부터 이어집니다. useMemo의 대안으로 useRef를 생각해 볼 수 있습니다. 이를 이용하면 결과 보존을 보장할 수 있지만 파생 상태를 운용하기 적합한 형태는 아닙니다. 부족한 점은 크게 두 가지로 생각해 볼 수 있습니다. 생성 함수를 지원하지 않습니다. 조건에 따라 연산 수행 여부를 결정하려면 필수적입니다. 의존성을 지원하지 않습니다. 연산 수행은 의존...
이 포스트는 React 버전 18.3.1을 기준으로 합니다. const state = heavyFactory(); useState와 useEffect 없이 위와 같은 코드로 파생 상태를 운용하고 싶습니다. 그런데 작업이 꽤 오래 걸립니다. 한 번 정도는 괜찮지만, 렌더링마다 반복되는 것은 꽤 부담스럽습니다. 눈물을 머금고 이전 방식으로 돌아가야 하는 걸까요? 걱정하지 마세요. 아래와 같이 간단히 해결할 수 있습니다. const state =...
이 포스트는 React 버전 18.3.1을 기준으로 합니다. function <S>(factory: () => S, deps: React.DependencyList): S { const [ state, setState ] = useState<S>(); useEffect(() => setState(factory()), deps); return state; } React에서 흔히 볼 수 있는 잘못된 습관 중 하나는 모든 ...
![[React] 당신은 상태를 필요로 하지 않을 것입니다. #5 - 부작용 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/UYsBCu9RP3Y/upload/0d70ad07155e2f580dd1cf2c56518795.jpeg)
![[React] 당신은 상태를 필요로 하지 않을 것입니다. #1 - 보존(with. useMemo) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/UYsBCu9RP3Y/upload/3f9c08b8e581915a7f5a491b6b2ff46c.jpeg)