React Hooks 요약 정리하기

개요

React로 개발한다면 자주 사용하는 React Hooks,
정확히 요약하여 설명하고 싶어서 정리하게 되었습니다.

useState

const [상태유지 값, 상태유지값을 갱신하는 함수] = useState(초기값);

• 상태유지 값과 그 값을 갱신하는 함수를 반환합니다.
• useState 괄호안의 값은 상태 초기값입니다.
• 상태값은 변경될 때 리렌더링이 이루어집니다.

useEffect

useEffect(effect, 의존성)

• React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 한다.
• 클래스형 컴포넌트의 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 해줍니다.
• 의존성 배열을 생략한다면 컴포넌트가 리렌더링 될 때마다 호출합니다.
• 의존성 배열이 빈배열이라면 최초 렌더링에만 호출합니다.
• 의존성 배열에 값을 추가해서 해당 값이 변경되었을 때만 실행되게 할수도 있다. 이를 조건부 Effect 라고 합니다.

useContext

const UserContext = createContext(null);

const user = {name: "SongNoin"};

<UserContext.Provider value={user}>
	<Child />
</UserContext.Provider>

function Child() {
	const user = useContext(UserContext);
	
	return <h1>{user.name}</h1>
}

• 함수 컴포넌트에서는 useContext라는 내장 Hook을 이용해 Context Value에 접근할 수 있습니다.
• useContext 를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 됩니다.
• 컴포넌트에서 가장 가까운 <MyContext.Provider>가 갱신되면 이 Hook은 그 MyContextprovider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거 합니다.

useMemo

// useMemo(callbackFunction, deps]

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

• useMemo는 두가지 인자를 받습니다. 첫번째 인자는 콜백함수이며 이 함수에서 리턴하는 값이 메모됩니다.두번째 인자는 의존성 배열입니다.
• 의존성 배열을 인자로 받아, 의존성 배열에 있는 값 중 하나라도 이전 렌더링과 비교했을 때 변경되었다면 메모된 값을 활용하는 것이 아니라 새로운 값을 다시 계산합니다.

useCallback

const memorizedFunction = useMemo(() => () => console.log("Hello World"), []);

const memorizedFunction = useCallback(() => console.log("Hello World"), []);

• useCallback은 useMemo를 조금 더 편리하게 사용할 수 있도록 만든 버전입니다.
• 일반적인 값들은 useMemo를 통해서 메모하기 편리합니다. 하지만 함수의 경우에는 useMemo를 사용해서 메모하게 되면 콜백함수에서 또다른 함수를 리턴하는 형태가 되게 됩니다. 이는 동작상에는 아무런 이상이 없지만 코드 스타일에 따라 문법적으로 다소 보기가 불편해지는 단점이 있습니다. 따라서 이러한 동작을 간소화한 useCallback이란 함수를 만들어서 제공해주고 있습니다.

useMemo vs useCallback

• useMemo
  • 함수의 결과를 cache하기 위해 사용합니다.
    • “Expensive” computation
    • React는 1ms 이상 걸리면 expensive라고 칭합니다.
    • “Expensive”하지 않다면 굳이 필요 없습니다.
  • 조건에 따른 컴포넌트를 리턴할 때 사용하거나 특정 변수를 계산할 때 사용합니다.
  • 초기렌더링보다는 cache되는 것을 고려할 때 re-rendering에 유리합니다.
    • 시간복잡도를 n으로 칭할 때, n > 100일때만 유리합니다
• useCallback
  • 함수 자체를 cache하기 위해 사용합니다
  • dependency를 확인해야 하는 함수일 때 사용합니다
  • ChildComponent에 prop으로 넘겨주는 함수일 때 사용합니다.

useRef

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });
  const nameInput = useRef();

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = e => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

• useRef()를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 합니다. 그러면, Ref 객체의 .current 값은 우리가 원하는 DOM 을 가르키게 됩니다.