02 - 13 일지

오전, 오후 - 리덕스 공부 나머지

특이사항

 

memo

컴포넌트를 메모리에 저장해두고 필요할 때 갖다 쓰게 된다. 이 방법을 쓰면 부모 컴포넌트의 state가 변경되지 않는 한 props의 변경이 일어나질 않는다. 이렇게 하면 전혀 상관없는 state가 변경되어도 영향을 받지 않는다. 이것을 컴포넌트 메모이제이션이라고 한다. 사용법은

export default React.memo(해당 JSX파일명);

usecallback

유스콜백은 인자로 들어오는 함수 자체를 기억한다. 이렇게 하는 이유는 자바스크립트에서는 함수도 객체의 하나로 따지기 때문에, 다시 만들어지면 주소값이 변경되고, 이로 인해 하위 컴포넌트들은 props가 변경되었다고 인식하기 때문이다.

사용법은

const 로직명 = useCallback(() => {내용물;}, []

usememo

메모는 컴포넌트, 유스콜백은 함수를, 유스메모는 리턴하는 값(벨류)에 대한 메모리 저장을 의미한다.

사용법은

const 로직명 = useMemo(() => 뭔가무거운컴포넌트(), []);

리덕스

프롭스 드릴링을 피하고 관리를 쉽게 하기 위한 도구이다. 중앙 state를 관리하는 부분을 Store라고 한다.

우선 src 밑에 redux폴더, 그 안에 config 폴더, 그 안에 config.js 파일 생성. 그리고 modules 폴서 생성

 

관련된 설정 코드를 일일이 분석할 필요는 없다고 한다. 그것은 개발진들이 할 일이지 내가 할 일이 아니다.

 

모듈

모듈은 state들이 모여있는 파일이다. modules 폴더에 js 파일로 작성한다. 익스포트는 항상 리듀서를 익스포트 시킨다.

 

리듀서

리듀서는 state를 관리하는 함수이다. 현재 state와 action의 인자를 받아 새로운 state로 반환한다. 그래서 state의 변경에 따라 특정 액션을 취하는데 쓰인다. 순수함수로 구성되어야 하며 이는 기존 state나 action에 영향을 줘서는 안된다.

 

useSelecter

유스 셀렉터는 Store에 조회하는 방식이다. 내가 만든 모듈이 스토어에 잘 연동되었는지를 확인하는 방법인데 C#의 enum과 비슷한 방식이다.

 

useDispatch

디스패치란, 액션 객체를 리듀서로 보내는 전달용 함수이다. store의 내장함수이며, action을 파라미터로 전달한다. 사용법은

const dispatch = useDispatch();

로 선언 후

dispatch({ type: 액션 });

을 한다. 그러면 이제 리듀서에서 해당 타입의 액션을 받아다 작동을 하는 것이다.

 

action creator

직접 액션객체의 value를 바꿔야하는 일이 생긴다면 어떡할까? 한두 번도 아니고 매번 그러면 굉장히 곤란해질 것이다. 이때 쓰는 것이 액션 크리에이터이다. 액션을 일일이 문자열로 쓰는 것이 아니라 변수로 제공하는 것이다.

사용법은

 

const 액션_변수 = “액션타입명”
export const 액션변수= () => {return {type: 액션타입명,};};

으로 리듀서에서 선언한 뒤

import { 액션변수 } from "./redux/modules/counter";
dispatch(액션변수())

형식으로 사용한다.