18일차

18일차는 customHook을 공부했다. 컴포넌트를 커스터마이징 한다는 개념으로 이해하니까 어렵지 않았다. 그러나 프로젝트가 커지면 커질수록 이를 활용할 줄 아는 게 필요하니, 작은 것부터 연습해야 한다.

git: https://github.com/leeyulgok/4-Day2

공부한 코드는 git에 올려두었다.

수업내용

Custom Hook

custom Hook이란, 함수 컴포넌트에서 상태 관리 로직을 재사용하기 위해 사용되는 기능이다. "use"로 시작하는 함수명을 가지며, 다른 Hook들을 조합하여 필요한 로직을 추상화하고 컴포넌트 간에 공유할 수 있도록 도와준다.

사용이유

1. 코드 재사용: 중복 코드 제거
2. 코드 구조 개선: 컴포넌트에서 상태 관리, API 호출, 이벤트 핸들링 등과 같은 복잡한 로직을 분리함으로써 컴포넌트의 구조를 단순화하고 가독성을 향상
3. 테스트 용이성: 독립적으로 테스트할 수 있기 때문에 로직에 대한 단위 테스트를 쉽게 작성

사용 예시

1. custom Hook

import { useState } from 'react';

// Custom Hook 정의
const useCounter = (initialValue) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return { count, increment, decrement };
};

위의 코드가 custom Hook이다. 이렇게 만듦으로써 가볍게 컴포넌트를 재사용할 수 있게 했다. 아래가 사용예시다.

2. App.js

import useCounter from 'hooks/countHook';

const Counter = () => {
  const { count, increment, decrement } = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

useCounter 커스텀 함수를 가져와서 사용했다.

결과

정리하기

custom Hook은 앞으로 정말 다양하게 사용될 것 같다. 그래서 나 또한 이를 잘 사용할 줄 아는 개발자가 되어야 한다. 그렇게 하기 위해서는 계속해서 다양한 것들을 만들어 보면서 React를 계속해서 익히고 다룰 줄 알도록 하자.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프