section6 7-3.action만들어 dispatch하기

액션 처리 순서

이벤트 발생 ▶ 액션생성 ▶ dispatch 호출 ▶ reducer에서 액션 처리

 

액션 타입들은 export 해주는 게 좋다.

export const SET_WINNER = 'SET_WINNER';
export const CLICK_CELL = 'CLICK_CELL';

자식이나 다른 js에서도 dispatch를 호출할 때 액션 타입을 가져다 쓰기위해서 export를 붙인다.

하지만 내가 직접 코딩한 경우 자식에서 dispatch를 호출하는 경우가 없었기 때문에 사실 붙이지 않아도 무방했다.

 

useReducer / redux 에서는 불변성을 꼭 지켜야한다. (사실 react 전체적으로 중요함)

setState함수를 설명할 때도 불변성에 대해서 계속 설명을 했었다.

reducer함수도 결국에는 state를 변경하는 함수이기 때문에 state를 변경할 때 객체상태(object state)는 무조건 불변성을 지켜주어야한다.

...
case CLICK_CELL:
	const tableData = [...state.tableData];
    tableData[row] = [...tableData[row]];
    tableData[row][cell] = state.turn;
	return {
    	...state,
        tableData,
    }

...

나중에는 immer.js라는 라이브러리로 가독성과 편리함을 지킬 수 있다고한다. (무료강좌에서는 immer의 존재만 알고있으라고하심)

 

불변성을 지킨다라는 것은?

메모리영역에서 값을 변경할 수 없게 한다. (값을 바꿀 때 값이 아닌 콜스택의 주소값이 바뀌게 한다.)

그렇다면 왜 react에서 불변성을 지켜야하는가?

state변화 감지 기준이 콜스택의 주소값이기 때문에 콜스택의 주소값을 변경해야 state가 변경되었구나! 하고 리렌더링을 시켜주기 때문이다.

원시값은 그냥 변경해도 불변성이 지켜지지만 (콜스택의 주소값이 변경되지만) 참조타입의 경우 콜스택의 주소값이 변경되지 않기 때문에 spread연산자나 immer 라이브러리를 사용해야 한다.

 

const a = {b:1, c:2};
const b = a;
console.log(b===a); //true : 불변성이 지켜지지 않는다! (객체가 같다는 것은 참조주소가 같다는 것)

const c = {...a};
console.log(c === a); //false : 불변성이 지켜짐.

위의 내용은 spread연션자로 불변성을 지킨 예시이다. 그냥 대입해버리면 주소값이 대입되어버려서 불변성이 지켜지지 않지만 spread 연산자로 얉은 복사를 하면 불변성이 지켜지는 것을 볼 수 있다.

 

ContextAPI를 쓰는 경우

아직 배우지 않았지만 강좌에서 dispatch 함수를 tictactoe ▶ table ▶ tr ▶td 까지 넘겨줘야하는 경우가 있었다. 만약에 부모~넘겨줘야하는 자식 컴포넌트 사이에 10개의 컴포넌트가 있으면 얼마나 힘들까?

이럴 때 쓰는 API가 ContextAPI 라고 한다. tictactoe에서 바로 td로 props를 넘길 수 있게 해준다고 한다.

강좌에서는 ContextAPI의 필요성을 느끼기 위해서 없이 넘기셨다고 함.

 

참고

https://narup.tistory.com/268

[React] 불변성이란? 불변성을 지켜야 하는 이유