06. hook

hook은 클래스 컴포넌트가 아닌 곳에서 state와 리액트 기능을 사용할 수 있게 도와준다.
state와 생명주기 메서드를 함수형 컴포넌트에서 지속해서 사용 가능하도록 만들어주고 리액트에서 제공해주고 있다.

useState

컴포넌트 내에서 동적인 데이터(state)를 관리해주는 hook이다.

import React, { useState } from 'react';
function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState는 배열 비구조분해 할당을 통해 현재 state값과 state값을 변경할 수 있는 함수로 구성되어 있다.
useState 파라미터에 넣는 값은 state의 초기 값에 해당되고, 값을 바뀌기 위해 setter함수를 사용한다.
클래스 컴포넌트에서 사용하던 state와 달리 초기 값은 객체가 아닌 primitive type 값을 넣어줄 수 있고 컴포넌트 내에 여러개를 사용 할 수도 있다.

useEffect

useEffect는 react class 문법에서 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 기능이다.
공식 문서에서는 컴포넌트가 랜더링 된 이후에 어떤 일을 수행 할 수 있도록 도와주는 hook이라고 한다.
react는 effect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장해준다.

function Example() {
  const [count, setCount] = useState(0);

  // componentDidMount, componentDidUpdate와 비슷합니다
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect 사용법

• 첫번째 파라미터에는 함수가 실행된다.
• 두번째 파라미터는 dependency 배열이 옵셔널로 주어지는데 deps 배열 안 데이터가 update가 되면 useEffect의 함수가 실행된다.
  : 옵셔널이기 때문에 deps 배열을 넣지 않으면 컴포넌트가 리랜더링 될 때 마다 호출되고,
  빈 배열일 경우 컴포넌트가 mount 됐을 때만 실행된다.
• 마지막으로 cleanup 함수는 useEffect에서 함수를 반환하는 형식으로 사용된다.
  • cleanup 함수는 deps가 빈 배열일 경우 unmount될 때 실행된다.
  • deps 배열에 특정 값을 넣게 된다면 컴포넌트가 처음 mount 될 때도 실행되고, deps의 데이터가 바뀌기 직전에도 호출이 되고 unmount될 때도 호출된다.
• useEffect 안에서 사용되는 state나 props가 있다면 deps 안에 넣어주는 것이 규칙이다
• 그렇게 하지 않으면 state나 props를 지정해주지 않게 된다.

📌 react는 부모 컴포넌트가 리랜더링되면 자식 컴포넌트도 같이 리랜더링을 실행하지만 실제 데이터가 바뀐 부분만 DOM에 적용된다.
하지만 virtual DOM에는 모든 리랜더링에 대응하고 있게 된다.

📌 react의 함수 컴포넌트는 데이터가 변경되면 함수 컴포넌트를 전체 다시 실행시킨다.
react hook을 사용하게 되면 hook에 사용된 데이터를 react에서 메모리에 저장해둬서 다시 함수를 실행시켜도 초기 데이터가 아닌 변경된 데이터를 유지시켜주게 되는 것이다.

useRef

먼저 ref는 render에서 생성된 DOM 노드나 리액트 엘리먼트에 접근할 때 사용한다.

공식문서 ref를 사용해야 할 때는 다음과 같다.

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

useRef는 .current 프로퍼티로 전달된 인자로 초기화 된 객체를 가진다.
즉 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자를 만드는 것이다.
useRef는 순수 자바스크립트 객체를 생성하고, 그렇기 때문에 useRef 내용이 변경되면 그것을 알려주지 않는다.
리액트에서 DOM 노드를 변경하고 싶을 때 콜백 ref를 사용할 수 있다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useMemo

useMemo는 성능 최적화에 사용되는 hook이다.
메모이제이션을 해준다는 뜻으로 useMemo로 사용되는데, 특정 결과 값을 재사용 해준다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo의 사용법

• 생성함수와 의존성 데이터를 배열에 전달해준다.
  • 배열에 담긴 의존성 데이터가 변경될 때만 랜더링을 해주고, 배열이 없는 경우 매 랜더링에 새 값을 계산해준다.

useCallback

함수 컴포넌트가 계속 호출되어도 동일한 데이터를 가지고 해당 컴포넌트의 지역함수를 호출하고 싶을때 사용한다.
useCallback는 해당 컴포넌트의 state나 props가 변경되어도 캐시에 저장된 캡쳐된 데이터를 가지고 함수를 실행시킨다.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallbak의 사용법

• 두번째 파라미터 deps 배열에 변경해줘야하는 state나 props를 넣어줘야한다.
• 또한 함수안에서 사용하는 state나 props가 있다면 deps 배열에 넣어줘야한다.

useReducer

useReducer는 상태를 관리할 때 사용가능한 hook 함수이고, 외부 컴포넌트에서 작성해 사용할 수 있다는 점이 useState와 다른점이다.

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

useReducer의 사용법

• reducer 함수
  • state와 action을 인자로 받는다.
    • state: 현재 상태
    • action: 업데이트를 위한 정보
  • dispatch 함수
    • action을 실행시키는 함수이고, dispatch안에 action을 넣으면 reducer함수에서 action에 해당하는 정보로 state값을 업데이트 시킨다.
  • useReducer 함수
    • 첫번째 인자에는 reducer 함수를 넣고, 두번째 인자에는 초기 state값을 넣는다.
    • 결과값으로 state와 dispatch 함수를 받아온다.
      • state는 초기에는 두번째 인자에서 지정한 초기 state값으로 세팅되고, dispatch 함수 실행으로 reducer를 실행시켜 업데이트 된 값을 받아온다.

📌 state 값이 변경될 때 새로운 state 값으로 대체(replace)되는 것이지 기존 state 값을 변경(modify)하거나 덮어쓰지(overwrite) 않는다. (데이터 불변성 유지)