[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드 24일차

커스텀 훅에 대해 배워봅시다.

그 전에 훅이란 게 뭘까?
이걸 클릭해서 열어보세요!

커스텀 훅이란?

1. 여러 컴포넌트에서 공통된 로직을 재사용하기 위해 만들어진 함수
2. 일반적으로 use 접두사를 사용하여 이름이 지정
3. 커스텀 훅은 로직을 추상화하고, 컴포넌트로부터 분리하여 재사용성과 코드 가독성을 개선

countHook.js

     //이 파일은 useCounter라는 Custom Hook을 정의한다.
import { useState } from "react";
	 //초기값이 모든 곳에 정해져있는 건 아니잖아. 나만의 커스텀 하는거지
function useCounter(initialCount) {
     //useState 훅을 사용하여 count라는 상태 변수와 setCount라는 상태 업데이트 함수를 선언한다.
    const [count, setCount] = useState(initialCount);
     //increment라는 함수를 정의하여count를 1씩 증가시킨다.
  const increment = () => {
    setCount(count + 1);
     //기능만 일단 하나 만들어 놓는거임.
  };
     //count와 increment를 반환하여 다른 컴포넌트에서 사용할 수 있도록 한다.
  return { count, increment };
  //아 count라는 초기값이랑 increment라는 함수 반환한 거구나
}
export default useCounter;

useCount.js

import useCounter from "../hooks/countHook";
function UseCount() {
     //useCounter(100)을 호출하여 초기값 100으로 설정된 count와 increment를 받아온다.
     // 받아온 count와 increment를 컴포넌트 내에서 랜더링한다.
    const { count, increment } = useCounter(100);
  return (
    <div>
      <p>카운트 : {count}</p>
      <button onClick={increment}>증가</button>
    </div>
  );
}
export default UseCount;

App.js

import Counter from "./components/counter";
import UseCount from "./components/useCount";
import LoginForm from "./components/loginForm";
function App() {
  return (
    <div className="App">
      <Counter />
      <UseCount/>
      <LoginForm />
    </div>
  );
}
export default App;

그러니까 간단하게 말해서 useState를 설정할 때 모든 초기값이 정해져 있는 게 아니잖아. 나만의 커스텀을 한다고 생각하면 되겠다.
countHook.js 파일에서 모두 통용 가능한 틀을 만들어 놓고 useCount.js에서 구체적인 기능과 초기값을 정의 해놓는거지. 그걸 공통 틀을 만든 거에 넣어서 사용하고 말이야. 그리고 그 컴포넌트를 App.js에서 보이도록 적어주고.

지피티 왈 "Custom Hook은 React에서 로직을 재사용하기 위한 방법입니다. 이 예시에서 useCounter는 상태 관리와 관련된 로직을 캡슐화하여 재사용할 수 있도록 합니다. UseCount 컴포넌트에서는 useCounter Custom Hook을 호출하여 카운트 값을 관리하고, 증가 버튼을 누를 때마다 카운트가 증가하도록 설정합니다."

useForm 훅

폼 상태를 관리하고 폼 입력 값을 다루는 데 사용됨.

import React from "react";
import useForm from "../hooks/useForm";
export default function LoginForm() {
    //React와 '../hooks/useForm에서 'useForm' 커스텀 훅을 가져온다.
  const { values, handleChange, resetForm } = useForm({
    username: "",
    password: "",
  });
  //useForm 훅을 사용하여 상태 변수 초기화
  //상태변수는 values, handleChange, resetForm이다.
  //values는 입력 필드의 값들을 담고 있고, 
  //handleChange는 입력 값 변경을 처리하며,
  // resetForm은 폼을 초기화하는 역할을 함.
  const handleSubmit = (event) => {
    event.preventDefault(); 
    console.log("밸류올시다", values);
    console.log("핸들체인지올시다", handleChange);
    resetForm();
  };
  //제출 이벤트 핸들러 함수임
  //이 함수는 폼 제출 시 실행되며, 기본 동작인 페이지 새로 고침을 막고, 
  //values 값을 로그에 출력한 후 폼을 초기화함.
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>사용자명 : </label>
        <input
          type="text"
          name="username"
          value={values.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>비밀번호 : </label>
        <input
          type="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">로그인</button>
    </form>
  );
  //폼 컴포넌트를 반환.
  //사용자명과 비밀번호 입력 필드가 있고, 
  //제출 버튼을 클릭하면 handleSubmit 함수 실행.
  //사용자가 값을 입력하면 handleChange 함수가 실행되어 values 객체의 값을 업데이트함.
  //제출 버튼을 클릭하면 폼이 제출되며, handleSubmit 함수 실행됨.
  // *handleChange는 useForm커스텀 훅을 통해 생성된 객체에 포함된 메서드임.
}

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.


#IT개발캠프 #React #개발자부트캠프 #리액트 #리액트캠프 #부트캠프 #스나이퍼팩토리 #웅진씽크빅 #유데미 #인사이드아웃 #프로젝트캠프 #프로젝트캠프후기