react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 Redux 사용하기

• 리덕스를 사용할 때 컴포넌트를 Presentational Component와 Container Component로 구분하여 작성한다.
  • Presentational Component: 주로 상태 관리가 이루어지지 않고, 그저 props로 상태를 받아와 온전히 뷰만 담당하는 컴포넌트
  • Container Component: 리덕스와 연동되어 있는 컴포넌트로, 상태 업데이트 로직이 존재한다.

이제는 Presentational Component와 Container Component를 분리하는 것을 더 이상 권장하지 않는다.Hook을 통해서 상태 관련 로직을 컴포넌트에서 분리시킬 수 있기 때문에 더 이상 컴포넌트의 구분이 불필요해졌다.

✨ 액션 타입 정의하기

• 액션 객체는 반드시 type 프로퍼티를 가져야 하기 때문에 액션 타입을 정해야 한다.
• 모듈이름/액션이름과 같은 형태로 정의해야 중복되는 일이 발생하지 않도록 한다.

const INCREASE = "counter/INCREASE";

✨ 액션 생성 함수 만들기

export const increase = () => ({type: "INCREASE"});

• 만약 액션 객체 내에 type외의 추가 정보가 필요로 할 때는 액션 생성 함수의 인자로 전달하여 해당 정보를 담은 액션 객체를 반환하도록 한다.

❗ redux-actions

• createAction
  • 필수 인자로 액션 타입을 전달한다.
  • 액션 객체 내에 추가 데이터는 payload라는 프로퍼티로 정의된다.
  • 액션 생성 함수에서 받아 온 인자를 그대로 payload에 넣는 것이 아니라 변형을 주어서 넣고 싶다면, 두 번째 인자로 payload를 정의하는 함수를 전달하면 된다.
  • 매번 객체를 직접 만들어 줄 필요 없이 간단하고 짧은 코드로 액션 생성 함수를 만들 수 있다.
• handleActions
  • 첫 번째 인자로 각 액선에 대한 업데이트 함수를 담은 객체를 전달하고, 두 번째 인자로 초기 상태를 전달한다.
  • 이때 업데이트 함수는 현재 상태와 액션 객체를 인자로 받는다.

❗ immer

• 리듀서 함수에서 상태를 업데이트를 할 때 기존 상태의 불변성을 지켜야 한다.
• 하지만 많은 객체가 중첩되고 구조가 복잡한 객체일수록 불변성을 지키기 어렵기 때문에 immer 라이브러리를 사용하면 편리하게 불변성을 유지하며 상태를 업데이트할 수 있다.
• produce
  • 첫번째 인자로 수정하고 싶은 상태를 받고, 두번째 인자로 어떻게 업데이트할지 정의한 함수를 받는다.
  • 두 번째 인자로 받은 함수 내에서 상태를 업데이트하는데 불변성을 지키지 않아도 된다.
  • 대신 produce함수가 불변성을 지켜주고 새로운 상태를 반환한다.

✨ 루트 리듀서

• createStore 함수를 사용하여 스토어를 만들 때는 하나의 리듀서만 사용해야 하고, 한 프로젝트 내에선 하나의 스토어만 존재해야 하므로 여러 리듀서가 존재할 때는 루트 리듀서를 만든다.
• 리덕스에서 제공하는 combineReducers함수를 이용한다.

// modules/index.js
const rootReducer = combineReducers({
    counter,
    todos
});

export default rootReducer;

✨ 스토어 만들기 및 리덕스 적용

• 스토어를 만들 때 createStore 함수의 인자로 rootReducer를 전달한다.
• 컴포넌트에서 스토어를 사용할 수 있도록 최상위 컴포넌트인 App을 react-redux에서 제공하는 Provider 컴포넌트로 감싼다.
• 이때 Provider 컴포넌트의 store props로 앞서 만든 store를 전달한다.

// src/index.js
import { createStore } from "redux";
import rootReducer from "./modules";
import {Provider} from "react-redux";

const store = createStore(rootReducer);

ReactDOM.render(
    <Provider store={store}>
    	<App/>
    </Provider>
    ...
);

📌 컴포넌트에서 Redux 사용

이제 컴포넌트에서 리덕스 스토어에 접근하여 원하는 상태를 받아오고 액션도 dispatch하도록 한다.

✨ connect 함수

connect(mapStateToProps, mapDispatchToPros)(연동할 컴포넌트)

• mapStateToProps
  • 리덕스 스토어 안의 상태를 조회해 어떤 것을 컴포넌트의 props로 전달할지 정의하는 함수
  • 리덕스 스토어에 있는 상태를 인자로 받는다.
• mapDispatchToProps
  • 액션을 dispatch하는 함수를 만들어서 컴포넌트의props로 전달하는 함수
  • 스토어의 내장 함수인 dispatch 함수를 인자로 받는다.
• mapStateToProps와 mapDispatchToProps가 반환하는 객체 내부의 값들은 전부 컴포넌트의 props로 전달된다.
• mapDispatchToProps에 해당하는 인자로 함수 형태가 아닌 액션 생성 함수로 이루어진 객체 형태를 전달해도 된다.
• connect함수를 호출하면 또 다른 함수가 반환되고 이 함수의 인자로 컴포넌트를 전달하면 리덕스와 연동된 컴포넌트가 반환된다.

✨ useSelector

const result : any = useSelector(selector : Function, deps : any[])

• useSelector는 리덕스 스토어에 있는 상태를 조회할 때 사용된다.
• useSelectror는 인자로 selector 함수와 deps 배열을 받는다.
  • selector 함수는 인자로 리덕스 스토어에 있는 상태를 받고 어떤 상태값을 반환할지 정의한다.
  • deps 배열은 어떤 값이 바뀌었을 때 selector 함수를 재정의할지 설정한다.
  • 생략하면 렌더링될 때마다 selector 함수를 재정의한다.

const number = useSelector(state => state.counter.number, []);

✨ useDispatch

• useDispatch를 호출하면 스토어의 내장함수 dispatch를 반환한다.

const dispatch = useDispatch();

✨ useStore

• useStore를 이용하여 컴포넌트 내에서 직접 store에 접근할 수 있다.

const store = useStore();
store.dispatch({type: "ACTION"}):
store.getState();

❗ connect vs redux hooks

• connect함수를 사용하여 컴포넌트와 리덕스를 연동했을 경우 부모 컴포넌트가 리렌더링될 때 해당 컴포넌트의 props가 바뀌지 않았다면 리렌더링되지 않는다.
• 반면, Hook을 사용했을 때는 이러한 최적화 작업이 자동적으로 이루어지지 않는다.
• 만약 부모 컴포넌트가 리렌더링될 경우가 있을 때는 React.memo()를 사용하여 최적화 작업을 해준다.