오늘은 일회성 초기화에 관해서 글을 써보려합니다. 예제 // ✅ 정적 인스턴스가 한번만 생성됩니다. const resource = new Resource() const Component = () => ( ) Redux나 React Query를 사용하시는 분들은 앱 수명당 한번만 초기화 되는 변수가 필요합니다. 보통 컴포넌트 외부에서 인스턴스를 초기화합니다. 위 코드의 const resource는 자바스크립트 번들이 evaluated(평가)될 때 한번만 생성되고 ResourceProvider를 통해서 App컴포넌트에서 사용가능합니다. 하지만 컴포넌트를 여러번 렌더링해서 렌더링마다 자체 resource가 필요한 경우에는 어떡할까요? resource를 컴포넌트 안에 입력하는 방법을 사용할 수도 있습니다. co..
오늘은 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 hook을 가장 많이 사용하게 됩니다. 오늘은 컴포넌트가 props를 받아와서 state(상태)를 초기화 할때 쉽게 함정에 빠지는 경우를 소개하려합니다. 먼저 오늘의 핵심 코드를 보고 시작하겠습니다. 핵심 코드 import { useState } from "react"; interface IDetailViewProps { initialColor: string; } const fruits = [ { id: 1, name: "banana", color: "yellow", }, { id: 2, name: "apple", color: "red", }, ]; const Pratice: React.FunctionComponent = () => { const [select..
