react

✨ 들어가기 우선, 뒤죽박죽 섞여있는 회사 코드 안에서 비즈니스 로직을 분리하기 전에 프론트엔드 개발자로써 view와 business logic이 어떻게 다른지 명확하게 알고 있어야 한다. 📍 View 우선, view는 기본적으로 HTML을 보여주는 UI이며 사용자 이벤트를 통해 HTML을 업데이트 하는 것이다. 즉, view는 단순히 주입받은 정보를 보여줄 뿐이다. 여기서 주의할 점은 해당 과정안에 business logic과 관련된 부분이 있다면 view가 아닌 비즈니스 로직으로 작동하게 된다는 것이다. 다른 말로 비즈니스 로직이 개입되지 않아야 컴포넌트를 재사용할 수 있다는 것이다. 📍 View Logic isValid, errorText와 같은 UI/UX를 개선하는 코드 예를 들면, 비밀번호를 6..

🌼 들어가기 모던 리액트 : Deep Dive 책을 정독하던 도중, useState의 lazy initialization에 대한 원리를 이해하고 싶었다. 콜백 함수로 넘기면 처음 초기화일때만 실행되는것일까...? 내부 구조가 어떻게 되어있길래, 값과 함수, 콜백함수의 양상이 다르게 발생되는 것일까...? 그냥 그렇구나..하기에는 너무 이해하고 싶었다. 이를 위해서 React 패키지의 구조를 살펴보며 useState를 불러오는 react 코어를 알아야 했다. 따라서 이번 글에서는 리액트의 패키지 구조를 살펴보고자 한다. ✨ React 패키지 구조 리액트 패키지는 총 5가지로 나눌 수 있다. 1️⃣ react 코어 컴포넌트 정의와 관련된 패키지이며, createElement( ) 와 다른 패키지의 모듈을 제..

💡 들어가기 어떤 경우에 useQuery와 useMutation 사용하는지, 또 타입 지정의 방식은 어떻게 이루어지는지 살펴보면서 기능개선을 한 작업을 바탕으로 해당 내용을 공유하려 한다. ✅ useQuery react 개발자라면 모두가 알고 있는 fetching, caching, 서버 데이터와의 동기화를 지원하는 라이브러리일 것이다. useQuery의 데이터 타입은 아래와 같다. export declare function useQuery (queryKey: TQueryKey, queryFn: QueryFunction, ..

✨ 들어가기 Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환한다. ✨ Atoms Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다. atoms는 런타임에서 생성될 수도 있다. Atoms는 React의 로컬 컴포넌트의 상태 대신 사용할 수 있다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다. const fontSizeState ..