액션 : 상태에 어떤 변화가 필요하면 액션이라는 것이 발생하며, 이는 하나의 객체로 표현된다. 액션 객체는 반드시 type 필드를 가지고 있어야 하며, 이 값은 액션의 이름.
액션 생성함수 : 액션객체를 만들어 주는 함수
리듀서 : 변화를 일으키는 함수, 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아오며, 두값을 참고하여 새로운 상태를 만들어서 반환
스토어 : 프로젝트에 리덕스를 적요하기 위해 만들며, 한개의 프로젝트는 단 하나의 스토어만 가질 수 있다.
디스패치 : 스토어의 내장함수 중 하나이며, 액션을 발생시키는 것이다.
구독 : 스토어의 내장함수 중 하나이며, subcribe 함수 안에 리스너 함수를 파라미터로 넣어 호출해주면, 리스너 함수가 액션이 디스패치되어 상태가 업데이트 될 때마다 호출된다.
리덕스 규칙 3가지
단일 스토어 : 하나의 어플리케이션에는 하나의 스토어만 있어야 한다. 여러개의 스토어를 사용하는 경우 상태관리가 복잡해지기에 권장하지 않는다.
읽기 전용상태 : 리덕스 상태는 읽기 전용이다. state를 업데이트할 때 도 객체나 배열을 업데이트하는 과정에서 불변성을 지켜주기 위해 spread연산자를 사용하거나 immer같은 불변성 라이브러리를 사용하듯 상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해야 한다. 리덕스에서 불변성을 유지해야하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 shallow equlity 검사를 하기 때문에 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하지 않아 좋은 성능을 유지할 수 있다.
리듀서는 순수한 함수 : 리슈서 함수는 이전상태와 액션 객체를 파라미터로 받으며, 파라미터 외의 값에는 의존하면 안된다. 이전생태는 건드리지 않으며 변화를 준 새로운 상태 객체를 만들어서 반환, 독같은 파라미터로 호출된 리듀서 함수는 언제나 같은 결과값을 반환해야 한다.
useSelector : Hook을 사용하면 connect 함수를 사용하지 않고도 리덕스의 상태를 조회할 수 있다.
const 결과 = useSelector(상태 선택함수);
useDispatch : 컴포넌트 내부에서 스토어의 내장함수 dispath를 사용할 수 있게 해준다.
const dispatch = useDispatch(;
dispatch({type: 'SAMPLE'});컴포넌트 성능을 최적화해야한다면 useCallback으로 액션을 디스패치하는 함수를 감싸주는 것이 좋다.
useStore : 컴포넌트 내부에서 리덕스 스토어 객체를 직접사용할 수 있다. 거의 사용하지 않는다.
const store = useStore();
store.dispatch({type: 'SAMPLE'});
store.getState();
connect 함수를 사용하여 컨테이너 컴포넌트를 만든 경우, 해당 컨테이너 컴포넌트의 부모 컴포넌트가 리렌더링될 때 해당 컨테이너 컴포넌트의 props가 바뀌지 않았다면 리렌더링이 자동으로 방지되어 성능이 최적화 된다. 반면 useSelector를 사용하여 리덕스 상태를 조회했을 경우는 최적화 작업이 자동으로 이루어 지지 않으므로 react.memo를 컨테이너 컴포넌트에 사용해 주어야 한다.
댓글