• 컴포넌트 생명주기 이벤트를 등록하기 위한 훅
• 클래스 기반 컴포넌트에서는 아래 메소드를 오버라이드해서 구현
  • componentDidMount(): 컴포넌트가 마운트 완료되고 브라우저 DOM 트리에 반영된 후 호출
  • componentDidUpdate(): 브라우저 DOM 업데이트 완료 후 호출
  • componentWillUnmount(): 컴포넌트가 삭제되기 직전에 호출
  • ...
• useEffect에서 주로 구현하는 기능
  • 컴포넌트의 렌더링 작업 외의 부가적인 작업
    • 타이머 설정
    • 로깅
  • 컴포넌트의 렌더링 이후에 처리할 작업
    • DOM 수동 조작
  • side effect가 발생하는 작업(컴포넌트를 순수 함수로 유지)
    • 데이터 fetching

useEffect(setup, dependencies?);

• setup: 컴포넌트가 마운트(1-4), 업데이트(2-5), 제거(3-1) 될 때 호출되는 함수

  • setup이 함수를 리턴하면, 리턴한 함수를 cleanup이라고 부르며, 컴포넌트가 업데이트되거나 언마운트 될 때 호출됨 (cleanup이 먼저 실행되고 setup이 뒤에 실행됨)

• dependencies (선택): 의존 객체 배열

  • 컴포넌트가 업데이트될 때 setup 함수를 호출할지 말지 여부를 결정하는데 사용
  • 컴포넌트가 마운트될 때는 dependencies 여부와 상관없이 setup이 호출됨
  • dependencies를 생략하면, 컴포넌트가 업데이트될 때 항상 setup이 호출됨
  • dependencies에 빈 배열을 지정하면 업데이트에서는 호출되지 않음
  • dependencies를 지정하면, 해당 값들이 변경될 때만 setup 함수가 호출됨

📜 02 useEffect - side effect 관리

• 💻 Counter.tsx

• useState와 비슷하지만, 상태 관리가 더 복잡한 경우에 사용
• useState를 사용할 때 컴포넌트 내부에서 상태 변경 로직을 구현해야 하기 때문에 컴포넌트가 복잡해짐
• 컴포넌트 외부에서 상태 관리를 하고 싶을 때 유용
• 여러 컴포넌트가 유사한 상태 관련 로직을 사용할 경우 기능을 공유할 수 있음
• state 값은 불변성이 있어 상태 변경의 내역을 추적할 수 있음
• 리듀서는 순수 함수로 만들어야 함
  • 입력 값이 동일하면 출력 값도 동일
  • 외부 값에 영향을 주거나 받으면 안 됨
• 리듀서를 사용하여 애플리케이션 전역 수준의 상태를 관리하는 라이브러리가 Redux

function reducer(state, action){ ... }
const [state, dispatch] = useReducer(reducer, initialArg, init?);

• reducer: state와 action을 인자로 받아 새로운 state를 반환하는 함수
  • state: 리듀서에 전달되는 상태값
  • action: dispatch에 전달한 인자값으로, 수행할 작업의 종류와 필요한 인자값을 포함한 객체
• initialArg: 초기 상태로 지정할 값
• init(선택): initialArg를 인자로 받고, 리턴한 값이 초기 상태로 지정되는 함수

• state: 상태값이 저장된 getter
• dispatch: 상태값을 변경하는 setter 함수. dispatch에 전달한 인자값이 reducer의 두번째 인자값(action)으로 전달됨

• useReducer를 사용하면 reducer 함수와 dispatch 액션을 작성해야 하기 때문에 기본적으로 코드 크기가 useState를 사용할 때보다 많아짐

  const TodoReducer = function(state, action) {
    // 상태 변경 로직
  };
  itemListDispatch({ type: 'TOGGLE', item: { _id }});

• 여러 이벤트 핸들러가 비슷한 상태 관리 로직을 가지고 있다면 reducer 함수에 공통으로 작성해서 코드를 줄일 수 있음

  const TodoReducer = function(state, action){
    const index = state.findIndex(item => item._id === action.item._id);
    switch(action.type){
      case 'TOGGLE':
        return produce(state, draft => {
          draft[index].done = !draft[index].done;
        });
      default:
      case 'DELETE':
        return produce(state, draft => {
          draft.splice(index, 1);
        });
    }
  };

• 상태 변경 로직이 복잡하고 여러 이벤트 핸들러에서 비슷한 로직을 사용해야 한다면, useState로 상태를 직접 관리하기보다는 useReducer에 상태 변경 로직을 집중시키고 컴포넌트와 분리하면 컴포넌트를 단순화할 수 있음

• useState는 상태 변경 도중 오류가 발생하면 여러 이벤트 핸들러를 확인해야 하지만, useReducer는 상태 변경 로직이 한 곳에 있기 때문에 디버깅이 편함

• reducer 함수는 컴포넌트와 독립적인 순수 함수이기 때문에 따로 테스트가 가능함

• action의 타입을 명확하게 정의

📜 03 useReducer - 상태 관리 로직을 한곳에

• 💻 Counter.tsx
• 💻 CounterReducer.ts

• 컴포넌트가 다시 렌더링되더라도 기존 상태값을 유지하는 변수를 생성
• 함수 내부에 정의하는 지역 변수는 컴포넌트가 다시 렌더링되면(함수 재호출) 값이 초기화 됨
• useState는 값이 변경되면 컴포넌트가 다시 렌더링되지만 useRef는 값이 변경되어도 컴포넌트가 다시 렌더링되지 않음
• JSX 태그에 ref 속성을 추가하면 브라우저 DOM 엘리먼트에 직접 접근 가능
  • 포커스, 미디어 재생, 애니메이션 실행 등과 같은 작업은 useRef를 사용해 브라우저 DOM에 직접 접근하여 제어해야 함

const ref = useRef(initialValue);

• initialValue: 초기값

• current라는 상태값 또는 DOM 요소가 있는 속성 하나가 정의된 객체

• value 속성으로 상태값 지정
• 리액트에서 직접 상태관리를 하는 제어 컴포넌트를 구현
• input 값이 변경되는 즉시 리렌더링 되어야 할때
  • 리렌더링이 자주 되므로 오버헤드 발생

function App(){
  const [msg, setMsg] = useState('');
  return (
    <>
      <h1>01 useState - 상태 관리</h1>
      <div>
        <input type="text" value={ msg } onChange={ e => setMsg(e.target.value) } />
        <br/>
        <span>입력 메세지: { msg }</span>
      </div>
    </>
  );
}

• defaultValue 속성으로 초기값 지정
• 브라우저에서 입력값을 관리하는 비제어 컴포넌트를 구현
• input 값이 변경 되어도 리렌더링 될 필요가 없을때
  • 리렌더링이 되지 않으므로 성능 최적화

function Counter() {
  const step = useRef(1);

  return (
    <div id="counter">
      <input type="number" defaultValue={ step.current } onChange={ e => step.current = Number(e.target.value) } />
      <Button color="red">-</Button>
      <Button>0</Button>
      <Button color="blue">+</Button>
      <span>0</span>
    </div>
  );
}

📜 04 useRef-값이 유지되는 데이터 관리, DOM 엘리먼트 참조

• 💻 Counter.tsx