study_record

오늘은 다양한 React 상태 관리 라이브러리 중 Recoil에 대해 알아보겠습니다. [React] 상태 관리 라이브러리, 어떤 것을 선택해야 할까?React로 애플리케이션을 개발하다 보면 상태 관리는 필수적인 과제입니다. 현재 사용되고 있는 React 상태 관리 라이브러리는 제일 많이 사용하는 Redux를 시작으로, Zustand, Jotai, Recoil, Context API, Reami-dairy.tistory.com  1. Recoil이란?Recoil은 페이스북에서 개발한 React 상태 관리 라이브러리로,기존의 전역 상태 관리 라이브러리에 비해 간단하고 직관적인 API를 제공하면서도,React Suspense와의 호환성, 동시성 모드 지원 등의 특징을 갖추고 있습니다. 여러 컴포넌트가 공유해야..

오늘은 다양한 React 상태 관리 라이브러리 중 Context API에 대해 알아보겠습니다. [React] 상태 관리 라이브러리, 어떤 것을 선택해야 할까?React로 애플리케이션을 개발하다 보면 상태 관리는 필수적인 과제입니다. 현재 사용되고 있는 React 상태 관리 라이브러리는 제일 많이 사용하는 Redux를 시작으로, Zustand, Jotai, Recoil, Context API, Reami-dairy.tistory.com  React에서 부모 → 자식 → 자식의 자식... 순으로 데이터를 전달할 때 보통 props를 사용합니다.하지만 이 방식은 트리 구조가 깊어질수록 문제가 발생할 수 있습니다.데이터를 실제로 사용하지 않는 중간 컴포넌트들까지도 props를 계속 물려주어야 하는, Props ..

React로 애플리케이션을 개발하다 보면 상태 관리는 필수적인 과제입니다. 현재 사용되고 있는 React 상태 관리 라이브러리는 제일 많이 사용하는 Redux를 시작으로, Zustand, Jotai, Recoil, Context API, React Query 등 다양합니다. 상태 관리 라이브러리를 선택하기에 앞서, 이런 생각이 들 수도 있습니다. “어차피 Redux가 제일 많이 쓰이니까 그냥 Redux를 사용하면 되지 않을까?”  물론 Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나입니다. 그러나 Redux에도 단점이 존재하며, 모든 상황에서 적합한 것은 아닙니다.따라서 본인의 프로젝트와 요구 사항에 적합한 상태 관리 라이브러리를 선택하는 것이 더 중요합니다. 그래서 오늘은 React의 다..

Recoil, Redux, Zustand와 같은 상태 관리 라이브러리를 두고 왜 React Query를 사용하는 것일까?React Query를 사용하는 이유는, 서버 상태를 효율적이고 일관되게 관리하기 위해서이다. React 자체는 클라이언트 상태를 다루는 데는 강력하지만,서버에서 데이터를 가져오고 이를 유지, 갱신, 캐싱하는 등의 기능은 기본적으로 제공하지 않기 때문에 별도의 도구가 필요하다. React Query는 이러한 서버 상태를 자동으로 관리해 주는 훌륭한 라이브러리이며,React Query를 사용하면 데이터를 요청할 때마다 수동으로 로딩 상태, 에러 처리, 데이터 갱신 등을 구현하지 않아도 된다. 내부적으로 자동 캐싱, 요청 중복 제거, 실패 시 재시도, 포커스 복귀 시 자동 리페치 등의 기능..

React는 여러 개의 컴포넌트로 구성되어 웹 페이지를 만든다.이렇게 컴포넌트를 나누다 보면, 컴포넌트 간에 상태(변수)를 공유해야 하는 상황이 자주 발생하는데,이때 보통 props, Context API, 혹은 Redux와 같은 상태 관리 도구를 사용한다. 그중 Redux는 가장 널리 알려진 상태 관리 라이브러리로, 전역 상태를 정의하고 이를 여러 컴포넌트에서 공유할 수 있게 해준다.하지만 Redux는 초기 설정이 복잡하고, 문법이 다소 어렵다는 단점이 있다. 그래서 최근에는 Redux와 비슷한 기능을 제공하면서도, 더 간단하고 직관적인 API를 가진 상태 관리 도구들이 많이 사용된다.그 중 하나가 바로 Zustand이다. 이번 글에서는 Redux와 비슷한 기능을 제공하면서도 훨씬 사용하기 쉬운 Zus..

React Component의 라이프사이클(Lifecycle)이란?컴포넌트가 생성 - 업데이트 - 제거되는 과정을 의미한다. React에서는 컴포넌트가 이 과정을 통해 초기화되고 데이터가 변경될 때 다시 렌더링되며 필요할 때 제거된다. 라이프사이클은 각각의 단계에서 특정 메서드를 호출하여 필요한 작업을 수행할 수 있게 한다.주로 클래스형 컴포넌트에서 사용했으나 React 16.8 이후로 함수형 컴포넌트에서 Hooks를 통해 라이프사이클을 처리할 수 있게 되었다.React 라이프사이클은 컴포넌트가 언제 생성되고 업데이트되고 제거되는 지를 이해하는 데 매우 중요하다. React Lifecycle 단계React 컴포넌트의 라이프사이클은 크게 세 가지로 나눌 수 있다.마운트 (Mount) : 컴포넌트가 처음 D..

React에서 컴포넌트는 사용자 인터페이스를 구축하는 기본 블록을 말한다.컴포넌트는 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있다. 1. 함수형 컴포넌트 (Functional Component)자바스크립트 함수로 정의된 컴포넌트를 말한다.특징상태(state)와 생명주기 메서드가 없었으나 React 16.8에서 도입된 Hooks를 사용하여 함수형 컴포넌트에서도 상태 관리와 생명주기 관련 기능을 사용할 수 있다.코드가 더 간결하고 이해하기 쉽다.사이드 이펙트 없이 순수 함수처럼 사용될 수 있다.this 키워드를 사용하지 않는다.컴포넌트 로직을 분리하기 쉽고 테스트가 용이하다.메모리 사용이 더 효율적이다.예시import React from 'react';const MyComponent = (prop..

React.memo 어떠한 컴포넌트를 React.memo 처리를 해주면 그 컴포넌트가 렌더링될 때마다 Prop Check를 통해 props의 변화가 있는 경우에만 렌더링을 하도록 해준다. props의 변화가 없을 경우에는 이전에 이미 렌더링된 내용을 재사용하여 불필요한 컴포넌트 렌더링을 줄여준다. const Student = ({ name, age, address }) => { return ( {name} {age} {address} ); }; 다음과 같은 컴포넌트일 경우 name, age, address 중 변화가 있다면 렌더링하고 세 개의 props 전부 변화가 없다면 해당 컴포넌트를 렌더링하지 않고 재사용한다. React.memo에서 memo는 memoization을 뜻하기 때문에 [React] M..

useContext React는 대개 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 data를 전달하는 구조이다. App의 규모가 작으면 props로 충분하지만 규모가 커지면 필요없는 상위 컴포넌트들이 하위 컴포넌트들에게 props를 전달해주기 위해 props를 가지고 있어야 되고 props의 이름을 수정하게 된다면 일일이 다 수정해줘야 하므로 유지보수하기 힘들고 복잡해진다. 또한 테마나 언어와 같은 전역적인 data 같은 경우 모든 컴포넌트가 이 data를 갖고 있어야 하므로 단계별로 전달해야하는 props로만 data를 관리하는 건 어렵다. 이를 해결하기 위해 Context API를 사용하는데 Context는 App 안에서 전역적으로 사용되는 data들을 여러 컴포넌트들이 쉽게 공유할 수 있는 ..

useReducer React Hooks의 하나로서 useState와 같이 state를 생성하고 관리할 수 있는 hook이다. 여러 개의 하위 값을 포함하는 복잡한 state를 관리할 때 useState 대신에 useReducer를 쓰면 관리 및 유지보수 하기 좋다. useReducer는 Reducer, Dispatch, Action 이 세 가지로 이루어져 있다. Reducer는 Dispatch가 보낸 Action의 내용대로 state를 직접 수정하는 주체이고, Dispatch는 Reducer에게 state를 수정할 방식(Action)을 보내는 주체이고, Action은 Dispatch가 보낸 state를 수정할 방식을 담고 있는 메시지이다. 사용법 1. useReducer const [value, dis..