서론 회원가입 시 약관 동의, 사용자 유저 정보 등에 관한 state 값을 관리해야 하는 상황이 있다. [ 관리해야 할 상태 값들 ] 더보기 약관 동의 전체 동의 여부 이용 약관 동의 여부 개인정보 수집 및 이용 동의 여부 마케팅 수신 정보 동의 여부 사용자 유저 정보 휴대폰 본인인증 여부 사용자 정보 값 사용자 이름 값 사용자 생년 값 사용자 생월 값 사용자 생일 값 사용자 휴대폰 번호 값 사용자 아이디 값 사용자 닉네임 값 사용자 비밀번호 값 사용자 비밀번호 확인 값 사용자 사업자 여부 값 사용자 휴대폰 번호(거래용) 값 사용자 전화번호 값 사용자 이메일 값 사용자 도·시 값 사용자 시·군·구 값 사용자 상세주소 값 사용자 회사명 값 사용자 직급/직책 값 사용자 주요 사업 분야 값 사용자 정보 값 유..

전역 상태 관리는 왜 해야 할까? 일반적으로 React에서는 데이터는 부모로부터 props를 통해 전달된다. 그러나 컴포넌트를 나누다보면 하나의 어플리케이션 안에 여러 컴포넌트에 전달해줘야 하는 경우가 발생한다. 이러한 현상을 Props drilling 현상이라고 한다. Props Driling : props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정 Props Drilling 현상을 막기 위해서는 전역 상태 관리 라이브러리를 사용해야 한다. 전역 상태 관리 도구에는 어떤 것들이 있을까? Redux 현재 리액트를 사용하는 사람들에게 가장 익숙한 상태관리 라이브러리라고 생각한다. 나 또한 Re..

Recoil 선택 배경 상태관리 라이브러리에 대한 고민 너도 나도 쓰는 Redux "귀찮고 번거로워요... Recoil의 핵심 컨셉 오직 React만을 위해 React처럼 React 내부 상태만 이용 작은 Atom 단위로 관리 순수함수 Selector Re-Render 최소화 데이터 흐름을 따라서 곧 새로운 React 기능과 호환성 기본 활용법 예시로 상품 리스트 화면을 살펴보자. 데이터 흐름은 아래와 같다. Modal 팝업은 간단한 기능이지만 실제 열고 닫는 이벤트가 각각 다른 컴포넌트에서 이루어져야 하기 때문에 상태관리를 해야 하는 대표적인 예이다. List 역시 여러 곳에서 사용될 수 있기 때문에 상태 관리를 해보도록 하겠다. 해당 atom을 호출하는 방법은 React Hook와 유사하다. Reco..