Hook

Hook ( 갈고리 ) : 뾰족하고 구부러진 날로 다른 물체에 걸어 연결하는 도구

갈고리는 물건을 잡거나 걸기 위해 사용하는 도구입니다. hook은 리액트 컴포넌트에서 상태나 라이프사이클을 잡거나 걸어서 사용할 수 있는 도구라는 의미에서 유래되었습니다.

컴포넌트에서 상태와 라이프사이클 관리를 위한 함수형 프로그래밍 방식을 제공하는 API

리액트 16.8 버전부터 도입

hook 종류

•

상태 관리용 hook

•

라이프사이클 관리용 hook

•

기타 hook

상태관리 hook

이름	설명
useState()	상태를 관리하기 위한 기본 hook입니다.
useReducer()	상태를 복잡하게 관리하기 위한 hook입니다.
useContext()	부모 컴포넌트의 상태를 자식 컴포넌트에서 공유하기 위한 hook입니다.

라이프사이클 hook

이름	설명
useEffect()	컴포넌트의 라이프사이클 이벤트를 처리하기 위한 hook입니다.
useLayoutEffect()	컴포넌트의 레이아웃 이벤트를 처리하기 위한 hook입니다.
useRef()	컴포넌트의 DOM 요소나 리액트 훅의 상태를 참조하기 위한 hook입니다.

기타 hook

이름	설명
useMemo()	컴포넌트가 렌더링될 때마다 값을 계산하지 않고, 이전에 계산한 값을 재사용하기 위한 hook입니다.
useCallback()	컴포넌트가 렌더링될 때마다 함수를 재실행하지 않고, 이전에 실행한 함수를 재사용하기 위한 hook입니다.
useImperativeHandle()	컴포넌트의 상태나 라이프사이클을 imperative하게 관리하기 위한 hook입니다.

주요 hook

hook 이 도입된 이유

리액트 16.8 이전 버전에서는 클래스형 컴포넌트에서만 상태관리 및 라이프사이클 메소드를 사용할 수 있었습니다.

즉, 함수형 컴포넌트에서는 상태관리 및 라이프사이클 메소드를 사용할 방법이 없었습니다.

함수형 컴포넌트에서 상태 및 라이프사이클 관련 로직을 더 간편하게 작성하고 재사용 가능한 코드를 쉽게 만들기 위함입니다. 이전에는 클래스형 컴포넌트에서만 상태(state) 및 라이프사이클 관련 로직을 다룰 수 있었지만, Hooks가 도입되면서 함수형 컴포넌트에서도 이러한 기능들을 사용할 수 있게 되었습니다.

hook 장점

hook을 사용하면 다음과 같은 장점이 있습니다.

•

리액트 컴포넌트의 코드를 더 간결하고 가독성 있게 작성할 수 있습니다.

•

상태 관리와 라이프사이클 관리를 더 쉽게 구현할 수 있습니다.

•

리액트 컴포넌트를 더 유연하게 사용할 수 있습니다.

hook은 리액트 컴포넌트 개발을 보다 편리하고 효율적으로 할 수 있도록 해주는 유용한 기능입니다.

클래스 컴포넌트의 라이프사이클 메소드 vs hooks

Class Component Lifecycle Method	Hooks
componentDidMount	useEffect(() => {}, [])
componentDidUpdate	useEffect(() => {}, [/* dependency array */])
componentWillUnmount	useEffect(() => { return () => {} }, [])
getDerivedStateFromProps	useState를 사용하여 상태 업데이트`
shouldComponentUpdate	최적화 기술 사용 (예: React.memo)
getSnapshotBeforeUpdate	useEffect 또는 useLayoutEffect 등을 사용하여 DOM 상태 처리`

componentDidMount

•

Class Component

componentDidMount() {
  // 컴포넌트가 마운트될 때 실행되는 코드
}
JavaScript
복사

•

Functional Component (hook)

useEffect(() => {
  // 컴포넌트가 마운트될 때 실행되는 코드
}, []);
JavaScript
복사

componentDidUpdate

•

Class Component

componentDidUpdate(prevProps, prevState) {
  // 컴포넌트가 업데이트될 때 실행되는 코드
}
JavaScript
복사

•

Functional Component (hook)

useEffect(() => {
  // 컴포넌트가 업데이트될 때 실행되는 코드
}, [/* dependency array */]);
JavaScript
복사

componentWillUnmount

•

Class Component

componentWillUnmount() {
  // 컴포넌트가 언마운트될 때 실행되는 코드
}
JavaScript
복사

•

Functional Component (hook)

useEffect(() => {
  return () => {
    // 컴포넌트가 언마운트될 때 실행되는 코드
  };
}, []);
JavaScript
복사

getDerivedStateFromProps

•

Class Component

static getDerivedStateFromProps(nextProps, nextState) {
  // props로부터 파생된 상태를 업데이트
  return null;
}
JavaScript
복사

•

Functional Component (hook)

JavaScript
복사

shouldComponentUpdate

•

Class Component

shouldComponentUpdate(nextProps, nextState) {
  // 컴포넌트 업데이트 여부를 결정
  return true; // 또는 false
}
JavaScript
복사

•

Functional Component (hook)

React.memo 를 통한 최적화
JavaScript
복사

getSnapshotBeforeUpdate

•

Class Component

getSnapshotBeforeUpdate(prevProps, prevState) {
  // 컴포넌트 업데이트 전에 DOM 상태를 캡처
  return null;
}
JavaScript
복사

•

Functional Component (hook)

useEffect와 useLayoutEffect 등을 활용하여 DOM 상태를 처리합니다.
JavaScript
복사

왜 useEffect 가 2번 호출되나요?

StrictMode 인 경우, useEffect() 에 2번 호출되는 현상이 있습니다.

StrictMode에서 useEffect가 두 번 호출되는 것을 막으려면, 클로저를 사용하여 컴포넌트의 state나 props를 참조하지 않도록 해야 합니다.

해결 방법

StrictMode 제거

클로저 사용

•

useEffect 가 2번 호출되는 현상을 해결하려면 아래 2가지 방법 중 1가지를 사용하면 됩니다.
다만, 근본적인 해결 방법은 클로저를 사용하는 것입니다.

이유 StrictMode

StrictMode는 React의 코드 스타일을 보다 엄격하게 검사하는 모드입니다. StrictMode를 사용하면 다음과 같은 이점이 있습니다.

•

코드의 일관성을 높이고 버그를 줄일 수 있습니다.

•

코드의 성능을 향상시킬 수 있습니다.

•

코드의 테스트 가능성을 향상시킬 수 있습니다.

StrictMode는 다음과 같은 검사를 수행합니다.

•

렌더링 단계의 부작용 검사

•

클래스 컴포넌트의 안전하지 않은 생명주기 메서드 검사

•

useState(), useEffect(), useContext() 훅의 부적절한 사용 검사

•

리액트 API의 잘못된 사용 검사

StrictMode를 사용하려면 다음과 같이 코드에 React.StrictMode 컴포넌트를 추가합니다.

import React, { StrictMode } from "react";

function App() {
  return (
    <StrictMode>
      // StrictMode 아래에 있는 컴포넌트가 검사됩니다.
      <MyComponent />
    </StrictMode>
  );
}
JavaScript
복사

현상 확인

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 타이머를 설정합니다.
    setInterval(() => setCount(count + 1), 1000);
  }, [count]);

  return (
    <div>
      <h1>현재 카운트: {count}</h1>
    </div>
  );
};
JavaScript
복사

이 코드에서는 incrementCount 함수를 클로저로 생성하지 않습니다. 대신, setInterval() 함수의 첫 번째 인자로 전달된 콜백 함수에서 count 변수에 직접 접근합니다. 따라서, useEffect()가 두 번 호출될 때마다 count 변수의 값이 변경됩니다.

( 현상 해결 내용 수정중 )

현상 해결

클로저 사용

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 클로저를 컴포넌트의 props로 이동합니다.
    const incrementCount = () => setCount(count + 1);

    // 콜백 함수에서 클로저를 참조합니다.
    return () => {
      clearInterval(incrementCount);
    };
  }, [count]);

  return (
    <div>
      <h1>현재 카운트: {count}</h1>
    </div>
  );
};
JavaScript
복사

클로저 (closure) 란?

클로저는 함수와 그 함수가 선언된 환경을 함께 묶은 것입니다. 클로저는 함수가 선언된 환경의 변수에 접근할 수 있는 기능을 제공합니다.

function outer() {
  const inner = () => {
    // inner 함수는 outer 함수가 선언된 환경의 count 변수에 접근할 수 있습니다.
    const count = 10;
    return count;
  };

  return inner;
}

const closure = outer();
const result = closure();

console.log(result); // 10
JavaScript
복사

위 코드에서는 outer() 함수에서 inner() 함수를 반환합니다. inner() 함수는 outer() 함수가 선언된 환경의 count 변수에 접근할 수 있습니다. closure 변수는 outer() 함수의 반환값인 inner() 함수를 참조합니다. result 변수는 closure() 함수를 호출하여 반환된 값을 저장합니다.

클로저는 다음과 같은 용도로 사용될 수 있습니다.

•

함수의 내부 상태를 유지합니다.

•

고차 함수에서 함수의 인자로 전달된 함수의 환경을 유지합니다.

•

콜백 함수에서 외부 환경의 변수에 접근합니다.

클로저를 사용할 때는 다음과 같은 주의 사항을 고려해야 합니다.

•

클로저는 함수가 선언된 환경의 변수에 접근할 수 있기 때문에, 변수의 범위를 잘 이해해야 합니다.

•

클로저는 메모리 누수의 원인이 될 수 있으므로, 사용이 완료된 후에는 삭제해야 합니다.

useState()

리액트 함수 컴포넌트에서 상태 관리를 할 수 있는 훅

•

상태 값을 저장하고, 상태 값이 변경될 때마다 컴포넌트를 리렌더링합니다.

•

useState는 두 개의 인자를 받습니다.

◦

첫 번째 인자는 상태 값의 초깃값입니다.

◦

두 번째 인자는 상태 값을 변경하는 함수입니다.

문법

const [상태, 상태변경함수] = useState(초기값);
JavaScript
복사

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <p>{count}</p>
    </div>
  );
}
JavaScript
복사

useEffect()

리액트 함수 컴포넌트의 생명주기와 관련된 작업을 수행할 수 있는 훅

•

컴포넌트가 마운트되거나 언마운트될 때, 상태 값이 변경될 때 등 특정 시점에 작업을 수행할 수 있습니다.

•

useEffect는 두 개의 인자를 받습니다.

◦

첫 번째 인자는 작업을 수행하는 함수입니다.

◦

두 번째 인자는 작업을 수행할 때 참조해야 하는 의존성 배열입니다.

문법

useEffect( () => {
	// 컴포넌트가 마운트 된 이후 실행
  // 추가적으로, 의존성 배열에 따라서 실행됨

  return () => {
		// 컴포넌트가 언마운트 되기 전에 실행됨
		
  }

}, 의존성배열 );
JavaScript
복사

의존성 배열을 [  ] 빈 배열로 지정한 경우

의존성 배열에 변수를 지정한 경우

의존성 배열을 생략한 경우

의존성 배열을 [ ] 빈 배열로 지정한 경우

컴포넌트 마운트와 언마운트 시, useEffect() 가 한 번만 실행됩니다.

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

  useEffect(() => {
    // 컴포넌트가 마운트/언마운트 시 한 번만 실행

  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <p>{count}</p>
    </div>
  );
}
JavaScript
복사

의존성 배열에 변수를 지정한 경우

의존성 변수가 변경될 때마다 useEffect() 가 실행됩니다.

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

  const id = 1;

  useEffect(() => {
    // id의 값이 변경될 때마다 실행
  }, [id]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <p>{count}</p>
    </div>
  );
}
JavaScript
복사

의존성 배열을 생략한 경우

컴포넌트가 마운트될 때마다, 상태가 업데이트될 때마다 useEffect() 가 실행됩니다.

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

  useEffect(() => {
    // 컴포넌트가 마운트될 때마다, 그리고 상태가 업데이트 될 때마다 실행
  });

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <p>{count}</p>
    </div>
  );
}
JavaScript
복사

메모이제이션이란?

계산된 결과를 저장하여 동일한 입력에 대해, 다시 계산하지 않고 저장된 결과를 반환하는 최적화 기법

useMemo()

리액트 함수 컴포넌트에서 계산 비용이 높은 값을 메모이제이션하여 성능을 최적화하는 훅

•

컴포넌트가 리렌더링될 때마다 불필요한 계산을 방지하고, 이전에 계산된 값을 재사용합니다.

•

useMemo는 두 개의 인자를 받습니다.

◦

첫 번째 인자는 메모이제이션할 값을 계산하는 함수입니다.

◦

두 번째 인자는 값을 다시 계산할 때 참조해야 하는 의존성 배열입니다.

문법

const 메모이제이션된값 = useMemo(() => {
  // 계산 비용이 높은 연산
  return 계산된값;
}, 의존성배열);
JavaScript
복사

의존성 배열을 [ ] 빈 배열로 지정한 경우

의존성 배열에 변수를 지정한 경우

의존성 배열을 생략한 경우

의존성 배열을 [ ] 빈 배열로 지정한 경우

컴포넌트 마운트 시 한 번만 값을 계산하고, 이후 리렌더링 시에는 메모이제이션된 값을 재사용합니다.

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

  const expensiveValue = useMemo(() => {
    // 컴포넌트 마운트 시 한 번만 계산
    return heavyCalculation();
  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <p>{count}</p>
      <p>{expensiveValue}</p>
    </div>
  );
}
JavaScript
복사

의존성 배열에 변수를 지정한 경우

의존성 변수가 변경될 때마다 값을 다시 계산합니다.

function ExpensiveComponent() {
  const [count, setCount] = useState(0);
  const [multiplier, setMultiplier] = useState(2);

  const calculatedValue = useMemo(() => {
    // multiplier의 값이 변경될 때마다 다시 계산
    return count * multiplier;
  }, [multiplier]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setMultiplier(multiplier + 1)}>배수 증가</button>
      <p>{count}</p>
      <p>{calculatedValue}</p>
    </div>
  );
}
JavaScript
복사

의존성 배열을 생략한 경우

컴포넌트가 리렌더링될 때마다 값을 다시 계산합니다. (메모이제이션 효과가 없습니다.)

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

  const calculatedValue = useMemo(() => {
    // 매 리렌더링마다 다시 계산 (useMemo 사용 의미가 없음)
    return heavyCalculation(count);
  });

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <p>{count}</p>
      <p>{calculatedValue}</p>
    </div>
  );
}
JavaScript
복사

useCallback()

리액트 함수 컴포넌트에서 함수를 메모이제이션하여 불필요한 재생성을 방지하고 성능을 최적화하는 훅

•

컴포넌트가 리렌더링될 때마다 함수가 새로 생성되는 것을 방지하고, 이전에 생성된 함수를 재사용합니다.

•

useCallback은 두 개의 인자를 받습니다.

◦

첫 번째 인자는 메모이제이션할 함수입니다.

◦

두 번째 인자는 함수를 다시 생성할 때 참조해야 하는 의존성 배열입니다.

문법

const 메모이제이션된함수 = useCallback(() => {
  // 실행할 함수 로직
}, 의존성배열);
JavaScript
복사

의존성 배열을 [ ] 빈 배열로 지정한 경우

의존성 배열에 변수를 지정한 경우

의존성 배열을 생략한 경우

의존성 배열을 [ ] 빈 배열로 지정한 경우

컴포넌트 마운트 시 한 번만 함수를 생성하고, 이후 리렌더링 시에는 메모이제이션된 함수를 재사용합니다.

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

  const handleClick = useCallback(() => {
    // 컴포넌트 마운트 시 한 번만 생성
    console.log('Button clicked');
  }, []);

  return (
    <div>
      <button onClick={handleClick}>Click</button>
      <button onClick={() => setCount(count + 1)}>+</button>
      <p>{count}</p>
    </div>
  );
}
JavaScript
복사

의존성 배열에 변수를 지정한 경우

의존성 변수가 변경될 때마다 함수를 다시 생성합니다.

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

  const handleClick = useCallback(() => {
    // count의 값이 변경될 때마다 다시 생성
    console.log('Current count:', count);
  }, [count]);

  return (
    <div>
      <button onClick={handleClick}>Show Count</button>
      <button onClick={() => setCount(count + 1)}>+</button>
      <p>{count}</p>
    </div>
  );
}
JavaScript
복사

의존성 배열을 생략한 경우

컴포넌트가 리렌더링될 때마다 함수를 다시 생성합니다. (메모이제이션 효과가 없습니다.)

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

  const handleClick = useCallback(() => {
    // 매 리렌더링마다 다시 생성 (useCallback 사용 의미가 없음)
    console.log('Button clicked');
  });

  return (
    <div>
      <button onClick={handleClick}>Click</button>
      <button onClick={() => setCount(count + 1)}>+</button>
      <p>{count}</p>
    </div>
  );
}
JavaScript
복사

useRef()

리액트 함수 컴포넌트에서 DOM 요소나 값을 참조하고, 리렌더링 없이 값을 유지할 수 있는 훅

•

useRef는 .current 프로퍼티를 가진 변경 가능한 ref 객체를 반환합니다.

•

ref 객체의 .current 값이 변경되어도 컴포넌트가 리렌더링되지 않습니다.

•

useRef는 한 개의 인자를 받습니다.

◦

초기값: ref 객체의 .current 프로퍼티에 설정될 초기값입니다.

문법

const ref객체 = useRef(초기값);
JavaScript
복사

DOM 요소에 접근하는 경우

값을 유지하는 경우 (리렌더링 방지)

이전 값을 추적하는 경우

DOM 요소에 접근하는 경우

useRef를 사용하여 DOM 요소에 직접 접근하고 조작할 수 있습니다.

function TextInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    // DOM 요소에 접근하여 포커스 설정
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}
JavaScript
복사

값을 유지하는 경우 (리렌더링 방지)

useRef를 사용하여 값을 저장하되, 값이 변경되어도 컴포넌트가 리렌더링되지 않습니다.

function Counter() {
  const [count, setCount] = useState(0);
  const renderCount = useRef(0);

  renderCount.current += 1;

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <p>Count: {count}</p>
      <p>Render Count: {renderCount.current}</p>
    </div>
  );
}
JavaScript
복사

이전 값을 추적하는 경우

useRef를 사용하여 이전 상태 값을 추적하고 비교할 수 있습니다.

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = useRef();

  useEffect(() => {
    // 현재 count를 이전 값으로 저장
    prevCount.current = count;
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <p>Current Count: {count}</p>
      <p>Previous Count: {prevCount.current}</p>
    </div>
  );
}
JavaScript
복사