겨리의 개발일기

React Query란? ✅ 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리. ✅ 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어졌다. server state와 clinet state server state ✅ 서버는 특정 시점에 클라이언트 요청에 대해 데이터데이스에서 유저 정보를 가져와 서버의 상태값을 만들어낸다. ✅ 데이터베이스에 있는 값을 그대로 클라이언트에게 전달할 수도 있고, 요청에 담긴 특정 값을 이용해 정보를 가공하여 메모리에 들고있다. 그리고 이 정보를 클라이언트에게 전달한다. clinet state clined state는 크게 두 가지로 나눌 수 있다. ✅ client에서 자체적으로 만드는 state(최초..

Programming/React 2023. 7. 4. 19:51

Recoil이란? ✅ context API 기반으로 구현된 함수형 컴포넌트에서만 사용가능한 페이스북에서 만든 라이브러리 Recoil의 핵심 컨셉 ✅ 오직 리액트만을 위해 리액트처럼 ✅ react 내부 상태만 이용 ✅ 작은 Atom 단위로 관리 ✅ 순수 함수 Selector ✅ Re-Render 최소화 ✅ 데이터 흐름을 따라서 ✅ 곧 새로운 React 기능과 호환성 설치 방법 # npm npm install recoil # yarn yarn add recil 주요개념 Atoms ✅ 상태(state)의 일부를 나타낸다. ✅ 업데이트와 구독이 가능하다. ✅ Atoms 는 어떤 컴포넌트에서나 읽고 쓸 수 있다. ✅ atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다 → atom에 변화가 생기면, 그..

Programming/React 2023. 7. 4. 19:38

Redux란? ✅ JavaScript 상태관리 라이브러리(리액트에 종속된 라이브러리 X) Redux의 기본 개념 1. Single source of truth ✅ 동일한 데이터는 항상 같은 곳에서 가지고 온다. → 스토어라는 하나 뿐인 데이터 공간이 있다. 2. State is read-only ✅ 액션이라는 객체를 통해서만 상태 변경이 가능하다. 3. Changes are made with pure functions ✅ 변경은 순수함수로만 가능하다. → 리듀서와 연관되는 개념 설치방법 # npm npm install redux react-redux # yarn yarn add react-redux store 생성과 reducer ⭐ store 생성시 reducer를 반드시 주입해야한다. reducer ..

Programming/React 2023. 7. 4. 18:57