lazy initializer

React) useState에서 놓치기 쉬운 사실들 (3)

2022.12.26

오늘은 일회성 초기화에 관해서 글을 써보려합니다. 예제 // ✅ 정적 인스턴스가 한번만 생성됩니다. const resource = new Resource() const Component = () => ( ) Redux나 React Query를 사용하시는 분들은 앱 수명당 한번만 초기화 되는 변수가 필요합니다. 보통 컴포넌트 외부에서 인스턴스를 초기화합니다. 위 코드의 const resource는 자바스크립트 번들이 evaluated(평가)될 때 한번만 생성되고 ResourceProvider를 통해서 App컴포넌트에서 사용가능합니다. 하지만 컴포넌트를 여러번 렌더링해서 렌더링마다 자체 resource가 필요한 경우에는 어떡할까요? resource를 컴포넌트 안에 입력하는 방법을 사용할 수도 있습니다. co..

Development/React

React) useState에서 놓치기 쉬운 사실들 (2)

2022.12.26

오늘은 useState를 다룰때 미세한 차이지만 좋은 코드 작성에 도움이 되는 것들을 알아보겠습니다. 1. The Functional Updater import { useState } from "react"; const [count, setCount] = useState(0) // 🚨 다음 값을 계산할 때 현재 값에 의존하게 됩니다. setCount(count + 1)}>Increment // ✅ previousCount를 사용해서 다음 값을 계산합니다. setCount(previousCount => previousCount + 1)}>Increment 새로운 값을 setter(setCount)에 전달하지 않고 대신 함수를 전달하는 방법이 있습니다. 리액트는 우리가 함수를 호출한다면 이전 값(previo..

React) useState에서 놓치기 쉬운 사실들 (3)

React) useState에서 놓치기 쉬운 사실들 (2)

티스토리툴바