개발일기

Redux의 버전이 4.2로 올라가면서 변경사항이 하나 생겼다. 액션 스토어를 생성하기 위해 사용하던 createStore가 deprecated가 되었다. 비록 계속해서 사용할 수는 있지만 redux toolkit의 configureStore로 대체하는 것을 권장하고 있다. createStore는 리듀서와 미들웨어를 추가할 때, 설치해야 하는 요소가 많다는 복잡함을 가지고 있다. 하지만 이를 간단하고 단순하게 만든 @reduxjs/toolkit의 configureStore를 사용하면오류의 확률을 줄이고 편하게 사용할 수 있다. 1. 설치 npm install @reduxjs/toolkit -D yarn add @reduxjs/toolkit -D 2. import 방법 import { configureSt..

useSelector는 리액트의 리덕스 스토어 관련 Hook중 하나이다. 이 Hook은 스토어의 상태값을 반환해주는 역할을 한다. useSelector를 사용한 함수에서 리덕스 스토어의 상태값이 바뀐 경우( 버튼 클릭 등의 이벤트를 통해 액션이 실행되어 상태값이 변경된 경우) 바뀐 스토어의 상태값을 다시 가져와 컴포넌트를 렌더링 시킨다. 1. useSelector 사용을 위한 react-redux 설치 npm install react-redux yarn add react-redux useSelector를 사용하기 위해서는 react-redux를 설치해야 한다. 2. useSelector 형식 import { useSelector } from 'react-redux'; const fruitList = us..

1. 리액트의 상태관리(props) 리액트에서 컴포넌트간의 상태관리를 위해 각 컴포넌트들의 상태값을 props로 넘겨 주고받는 방법으로 상태관리를 하였다. 프로젝트의 규모가 소규모라 나뉘어진 컴포넌트와 기능들이 적은 경우 props로 간단하게 상태관리를 할 수 있다. 하지만, 이와는 반대로 프로젝트의 규모가 커지는 경우 원하는 컴포넌트로 상태값들을 전달하려 할 때, 4~5 개의 컴포넌트들을 지나쳐 값을 전달하는 경우가 종종 발생한다. 불필요한 컴포넌트들을 거쳐 값을 전달하여 관리하려면, 값을 전달할 때 마다, 불필요한 작업을 반복적으로 해야하고, 실수를 통해 에러가 발생할 수도 있다는 단점을 가지고 있다. 각 컴포넌트 간에 value={value} 형식으로 값을 주고받는다. 컴포넌트가 적은 소규모 프로젝..