리덕스

액션 : 상태에 어떤 변화가 필요하면 액션이라는 것이 발생하며, 이는 하나의 객체로 표현된다. 액션 객체는 반드시 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를 컨테이너 컴포넌트에 사용해 주어야 한다.