무엇에 쓰는 물건인고? 전역상태관리 Library 전역상태관리란 ? 리액트는 여러 component들을 조합하여 하나의 HTML을 구성하는데, 하나의 state를 다른 component와 공유하려면 props 과정을 거쳐야한다. 이 때 props는 상위 component에서 하위 component로 단방향성으로만 이동할 수 있고, 한 번에 하나의 component만 이동할 수 있다. state는 component에 할당 된 메모리; 즉 데이터라고 볼 수 있다. 최상위 component의 State를 3중중첩된 하위 component에 전달하려면 3번의 Props를 거쳐야 하고 이것이 더욱 복잡해지면 매우 비효율적인 문제가 발생하는데 이를 propsdrilling 이라고 한다. 전역상태관리는 이러한 현상을..

기술면접 문제 1번 참가자 상태관리하는 이유와 하는 방법 성능개선(props drilling, 불필요한 리랜더링 방지)을 위해 상태관리 함 상태(state): 컴포넌트에 대한 데이터를 가진 객체 지역적인 상태관리: useState 훅을 사용 ==> props drilling의 한계 전역적인 상태관리: redux, recoil등의 여러 상태관리 라이브러리 활용 ==> props drilling 극복, 협업 및 유지/보수에 용이 Redux란? 사용하는 이유? 전역 상태관리 라이브러리 성능개선 (불필요한 리랜더링 방지, 상태관리 복잡성 해결) Redux 외의 라이브러리 Recoil 페이스북에서 개발한 react 전용 라이브러리로 호환성이 우수하다 비동기 처리, 코드 스플리팅 등의 기능 제공 atom에 stat..

전역상태관리 : 전체 애플리케이션의 상태를 중앙 집중화된 곳에서 관리하는 패턴/기술로, 여러 컴포넌트 혹은 모듈 간에 데이터 공유 및 업데이트를 편리하게 해준다. 전역상태관리 주요 목적 데이터공유 상태의 일관성 상태 업데이트 관리 애플리케이션 확장성: 새로운 컴포넌트 추가시 전역 상태관리를 통한 데이터관리 로컬 상태와의 구분: 모듈내부의 데이터와 전역에서 공유하는 데이터를 구분하여 관리 전역상태관리 종류 Redux 중앙 상태 스토어, action - reducer pattern으로 데이터 관리 상태의 불변성을 유지하며 업데이트함 비동기 데이터를 다룰 때에 redux-thunk 등의 미들웨어를 사용함 Boilerplate 코드가 있음 Recoil Facebook에서 개발한 React app을 위한 상태관리..

Redux : JS application의 상태관리 library. Store: apllication의 모든 상태가 저장되는 중앙 상태 저장소 Action: 상태변경을 위한 이벤트를 나타내는 객체 Reducer: 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수한 함수 Dispatch: 액션을 스토어에 보내 상태를 변경하는 메서드 작동방식 action을 dispatch 하여 상태변경 요청 reducer는 현재 상태와 action을 이용하여 새로운 상태 계산 store는 새로운 상태를 저장하고, React component에 이를 전달하여 UI를 업데이트함. 장점 전역 상태관리를 통한 데이터 공유 및 업데이트 용이성 예측 가능한 상태관리로 디버깅과 태스팅이 수월함 애플리케이션의 복잡성을 관리하고, 컴포..