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
복사

실습코드

React Hooks 실습

To Do List REST API 서버 구현

To Do List 테이블 정의

Spring Boot REST API 구현

API 명세서 자동 생성 - OpenAPI(Swagger)

API 테스트

To Do List 테이블 정의

Todo List

Draw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool.

https://www.erdcloud.com/d/QEzWFtoPiMri6Pg7D

To Do List - BackEnd (SpringBoot)

To Do List - Front (React)

“Todo List - 할 일 목록 UI 만들기”

작업 파일

To Do List - FrontEnd (React)