React Hooks

Hooks

함수형 컴포넌트에 기능을 추가할 때 사용하는 함수.
함수형 컴포넌트에서 상탯값을 사용할 수 있고, 자식 요소에 접근할 수도 있다.

규칙 1. 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야 한다.
규칙 2. 훅은 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출되어야 한다.

useState

useState훅이 반환하는 배열의 두 번째 요소는 상탯값 변경 함수다. 상태값 변경 함수가 호출되면 해당 컴포넌트를 다시 그리며, 그 과정에서 자식 컴포넌트도 같이 렌더링된다.

효율적인 렌더링을 위해 여러 개의 상탯값 변경 요청을 배치로 처리한다.

1. 상태값 변경 함수의 인수로 함수를 입력하면, 호출되기 직전의 상탯값을 매개변수의 인수로 받는다.

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount(prev => prev +1);
    setCount(prev => prev +1);
  }
  onClick();
  console.log(count) // 2
}

2. 상태값 변경 함수는 비동기로 처리되지만 그 순서가 보장된다.

const MyComponent = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const onClick = () => {
    setCount1(count1 => count1 +1);
    setCount2(count2 => count2 +1);
  }
  onClick();
  const result = count1 >= count2; // true
}

useEffect

컴포넌트에서 부수효과를 처리하는 함수이다.
렌더링 결과가 실제 돔에 반영된 후 비동기적으로 호출되고, 컴포넌트가 사라지기 직전에 마지막으로 호출된다.

부수효과란?

함수 실행 시 함수 외부의 상태를 변경하는 연산.
ex) API 호출, 이벤트 처리 함수 등록/해제

부수효과 함수는 렌더링할 때마다 호출된다.

useEffect 훅의 두 번째 매개변수: 의존성 배열

1. 배열의 값이 변경되는 경우에만 함수가 호출된다.
2. 빈 배열을 입력하면 컴포넌트가 생성될 때만 호출되고, 컴포넌트가 사라질 때만 반환된 함수가 호출된다.

이벤트 처리함수의 등록 및 해제

useEffect 내에서 부수효과 함수는 함수를 반환할 수 있다. 반환된 함수는 부수 효과 함수가 호출되기 직전과 컴포넌트가 사라지기 직전에 마지막으로 호출된다.

custom Hooks

리액트가 제공하는 훅을 이용해서 커스텀 훅을 만들고, 커스텀 훅을 이용해서 또 다른 커스텀 훅을 만들 수 있다.

import { useEffect, useState } from 'react';

const useWindowWidth = () => {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('resize', onResize);
    };
  }, []);
  return width;
}

const WidthPrinter = () => {
  const width = useWindowWidth();
  return <div>{`width is ${width}`},</div>

useRef

돔 요소에 접근하기 위해 ref 속성값을 사용할 수 있다.

돔 요소 혹은 컴포넌트가 생성되면 ref 객체로 접근할 수 있다.
ref객체의 current 속성을 이용하면 자식 요소에 접근할 수 있다.

useEffect 훅 내부에서 부수 효과 함수는 컴포넌트 렌더링 결과가 돔에 반영된 후 호출되므로 돔이 생성된 상태이다.

<select ref={optionRef}>
  <option>
  </option>
</select>

Reference

실전 리액트 프로그래밍 / 인사이트 / 이재승