10.08.22{코딩일기}벨로퍼트와 함께하는 모던리액트 1-19~20챕터리뷰

[ 새롭게 알게된 것 ]

---

 

1. React.memo는 컴포넌트 props가 바뀌지 않았는데도 리렌더링 되는 걸 방지함

---

사용법 아주 쉬움.

export default React.memo(CreateUser);

 

---

 

2. React.memo로 감싸줘도 일부 주변 컴포넌트들이 리렌더링 된다면 상태값배열 deps참조 삭제하셈.

---

그럼 최신 상태값 참조는 누가하나? 해당 상태값 배열 콜백함수가 해주도록 하면 됨.

예를들면 users state가 존재하는데 하나 바뀔때마다 매번 리렌더링 되는 문제가 있음

이를 해결해주기 위해 setUser라는 콜백함수 파라미터에 아래처럼 참조하게 하면 끝!

    setUsers(users => users.concat(user));

   setUsers(users =>
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );

원래는 아래와 같았음. 파라미터 존재에 따른 최신 상태값 참조방법은 어메이징 그잡채..

 setUsers(users.filter(user => user.id !== id));

    setUsers(
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  }

---

 

3. useReducer를 사용하면 useState대신 상태관리 가능함.

---

특히 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리 시킬 수 있음.

컴포넌트 바깥에 작성할 수 도 있고, 다른 파일에 작성 후 불러와서 사용도 가능.

 

---

 

4. useReducer는 두개의 파라미터를 반드시 받아야 함

---

첫째는 reducer라는 함수임. 

reducer는 현재상태와 액션 객체를 파라미터로 받아와 새로운 상태를 반환해주는 함수임.

function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState;
}

둘째는 type 값을 지닌 action 객체임.

// 카운터에 1을 더하는 액션
{
  type: 'INCREMENT'
}

---

5. useReducer 사용법

---

Counter라는 컴포넌트 안에 아래와 같이 useReducer를 활용한 로직을 선언하고 action함수를 활용함.

function Counter() {
  const [number, dispatch] = useReducer(reducer, 0);

  const onIncrease = () => {
    dispatch({ type: 'INCREMENT' });
  };

이제 Counter 객체를 App.js에 할당하면 됨.

import Counter from './Counter';

ReactDOM.render(<Counter />, document.getElementById('root'));

---

6. 관리하는 상태값이 복수개일땐 useReducer를, 하나일땐 useState로 관리하는 것이 좋음을 알게됨.

---

특히  setter함수를 여러번 사용해야 하는 일이 발생한다면 useReducer를 사용하는걸 고민하는걸 추천함.

setUsers(users => users.concat(user));
setInputs({
  username: '',
  email: ''
});

행복한 고민의 시작임.

---