🎄 성장일지 3.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 키워드 (1.0)<br/> 최대한 간단하게 정리, 추후에 보면서 스스로 설명<br/> 🍉 경험 위주로 (2.0)<br/> 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성<br/> ❄️ 정해진 템플릿에 맞춰서 (3.0)<br/> 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성

🔑 오늘의 키워드

• 리액트
  • useReducer
    • 리덕스의 reducer를 리액트에서 구현한 훅스
    • 관리할 state, setState가 너무 많아지게 될 때, 이를 편리하게 하나의 state 객체로 관리하게 해준다.(약간 클래스 컴포넌트의 state를 닮았다.)
    • state를 변경할 때 dispatch(setState 느낌)로 변경하고, 이 때 dispatch가 action객체를 넘기면, reducer 함수에서 action객체의 type에 따라 분기처리하여 state를 변경, 조작한다.
    • 좀더 유기적으로 상태를 관리할 수 있는 느낌이다. 단, state가 여러 중첩된 객체가 있을 경우 코드가 조금 드러버진다.(불변성 유지를 위해 계속 얕은 복사함) -> 이걸 해결하기 위해 immer 라이브러리 사용
    • 단순하게 생각하면 useReducer(reducer 기능)와 Context API(props drilling 해결)이면 굳이 redux를 쓸 이유가 없지 않나? 싶을 수 있지만, 실제 비동기 상태까지 관리하는 더욱 큰 프로젝트에서는 리덕스를 쓰게 된다.(근데 사실 요즘엔 또 서버 상태는 react-query로 관리하는 추세)
  • 최적화 팁
    • 각 컴포넌트에 console.log를 찍어서 렌더링 확인
    • useEffect, useRef를 사용하여 어떤 props가 렌더링 시 변하는지 체크하는 방법
    • 기본적으로 React.memo를 통해 최적화(쓸데없이 부모 컴포넌트 렌더링 시 자식 컴포넌트가 렌더링되는 것 막기)
    • 최후 수단으로 useMemo 훅스를 return하는 JSX 형태의 컴포넌트에도 씌울 수 있다.(결국 JSX 컴포넌트도 값이니까)

📝 요약 및 하루 간단 회고

처음엔 진짜 낯설고 헷갈렸다. reducer라는 개념이 뭔지도 모르겠고, dispatch/action은 또 뭔지... 그리고 잘 사용하지도 않았던 switch도 나오고..! 헌데 계속 공부하고 사용해보니, 금방 익숙해졌다. useReducer를 사용하면서 느낀 건, 뭔가 그 state들을 유기적으로 엮어서 편리하게 사용하려는 건 알겠는데 뭔가 아주 속시원하게 해결되지는 않는 기분..?이었다. 결국엔 dispatch도 자식컴포넌트에서 사용하려면 props로 계속 전달해줘야하고 여러 state들에 대해서 지저분하게 setState를 안하는 것도 좋았지만, 그만큼 useReducer 사용방법이 복잡하기에 퉁쳐지는 느낌. 그래도 손에 익으니까 훨씬 코드가 간결해보이고 깔끔해보이는 건 사실이다.

예제

import React, { useReducer } from 'react';

const initialState = {
  name: '',
  count: 0,
  favorites: [],
};

const SET_NAME = 'SET_NAME';
const reducer = (state, action) => {
  switch (action.type) {
    case SET_NAME:
      return {
        ...state,
        name: action.name,
      };
    default:
      return state;
  }
};

const Practice = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const onClick = () => {
    dispatch({ type: SET_NAME, name: 'jay' });
  };

  return (
    <>
      <h1>{state.name}</h1>
      <button onClick={onClick}>클릭!</button>
    </>
  );
};

export default Practice;

undefined