벨로퍼트 리액트 - 19. React.memo를 사용한 컴포넌트 리렌더링 방지
React.memo : 컴포넌트의 props가 바뀌지 않았다면 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 함수. 컴포넌트에서 리렌더링이 필요한 상황에서만 하도록 설정할 수 있다.
사용법
export default React.memo(CreateUser);적용후, input을 수정할때는 하단의 UserList는 리렌더링이 되지 않는다. 그러나 User 중 하나라도 수정하면 모든 User들이 리렌더링이 되고 CreateUser도 리렌더링이 된다.
⇒ users 배열이 바뀔때마다 onCreate도 새로 만들어지고 onToggle, onRemove도 새로 만들어지기 때문.
⇒ onCreate, onToggle, onRemove의 deps에서 users를 지우고 함수들에서 현재 useState로 관리하는 users를 참조하지 않게 함. ⇒ 함수형 업데이트 하기.
함수형 업데이트를 하게 되면 setUsers에 등록하는 콜백함수의 파라미터에서 최신 users를 참조할 수 있기 때문에 넣지 않아도 된다.
리액트 개발시 useCallback, useMemo, React.memo는 컴포넌트의 성능을 실제로 개선할 수 있는 상황에서만 해야 한다. 또 렌더링 최적화를 하지 않을 컴포넌트에 React.memo를 사용하는 것은 불필요한 props 비교만 하는 것이기 때문에 실제로 렌더링을 방지할 수 있는 상황이 있는 경우에만 사용해야 한다.
Recat.memo에서 두번째 파라미터의 propsAreEqual이라는 함수를 사용해 특정값들만 비교를 하는 것도 가능하나, 잘못 사용한다면 의도치 않은 버그들이 발생하기 쉽다.
벨로퍼트 리액트 - 20. useReducer를 사용하여 상태 업데이트 로직 분리하기
useReducer 이해하기
상태를 관리하는 방법 - useState 또는 useReducer 사용.
useReducer라는 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 잇고, 다른 파일에 작성 후 불러와서 사용할 수도 있다.
예시) Counter.js 컴포넌트에서 useReducer 사용하기
reducer의 이해
Reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다.
function reducer(state, action) {
// 새로운 상태를 만드는 로직
// const nextState = ...
return nextState; // <- 컴포넌트가 지닐 새로운 상태
}action - 업데이트를 위한 정보를 가지고 있다. 주로 type 값을 지닌 객체 형태로 사용하나 꼭 따라야 할 규칙은 없다. type값을 대문자와 언더바(_)로 구성하는 관습이 존재하긴 하지만 꼭 따라야 할 필요는 없다.
ex) action 예시
// 카운터에 1 더하기 액션
{
type : 'INCREMENT'
}
// 카운터에 1 빼기 액션
{
type : 'DECREMENT'
}
// input 값 바꾸기 액션
{
type : 'CHANGE_INPUT',
key : 'email',
value : 'Hailey01@abc.com'
}
// 새 할일 등록하기 액션
{
type : 'ADD_TODO',
todo : {
id : 1,
text : 'useReducer 배우기',
done : false,
}
}useReducer의 사용법
const [state, dispatch] = useReducer(reducer, initialState);- state : 컴포넌트에서 사용할 수 있는 상태
- dispatch : 액션을 발생시키는 함수. 아래처럼 사용한다.
dispatch({type : 'INCREMENT'})- reducer : reducer 함수
- initialState : 초기상태
useReducer vs useState
useState - 컴포넌트에서 관리하는 값이 하나이고, 그 값이 단순한 숫자, 문자열 또는 boolean 값이라면 사용하기 편할것
useReducer - 컴포넌트에서 관리하는 값이 여러개라서 상태의 구조가 복잡해질 경우.
⇒ 정답은 없음. 자주 사용해보고 편하다고 생각되는 방식으로 사용할 것.
