리액트 hook

송범·2025년 2월 26일

https://ko.legacy.reactjs.org/docs/hooks-reference.html
리액트 Hook API 참고서

📌 리액트 hook 이란?

리액트 훅(React Hooks)은 React 16.8 버전에서 도입된 기능으로, 클래스 컴포넌트가 아닌 함수형 컴포넌트에서도 상태 관리 및 생명주기 기능을 사용할 수 있게 해주는 API입니다. 이전에는 함수형 컴포넌트에서는 상태(state) 또는 생명주기(lifecycle) 관련 기능을 사용할 수 없었기 때문에, 복잡한 컴포넌트를 만들 때는 클래스 컴포넌트를 사용해야 했습니다. 훅의 도입으로 함수형 컴포넌트의 활용 범위가 대폭 확장되었습니다.

리액트 hook 종류

📌 1. useState

가장 기본적인 훅으로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다.
useState는 상태 값과 그 값을 업데이트하는 함수를 제공합니다

	const [refresh,setRefresh] = useState(초기값{숫자,문자열,{},[],false...)
    refresh는 변수이고 setRefresh는 함수이다.
    상태가 바뀌면 렌더링이 일어난다(데이터와 element가 동기화 된다)
	이전 데이터를 기억한다. (ex setRefresh(prev => prev+1) : 게시판에서 새 글을 작성 후 목록을 새로고침할 때 사용함.)

📌 2. useEffect

useEffect 훅은 리액트 컴포넌트의 생명주기를 관리하는 데 사용되며, 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount와 유사한 기능을 제공합니다. useEffect는 사이드 이펙트를 관리하는 데 특히 유용하며, 데이터 로딩, 이벤트 리스너 등록/해제, 수동 DOM 조작 등 다양한 용도로 사용됩니다.

	초기화에 사용할 수 있다.
    useEffect(()=> {}, []) : 첫번째는 함수, 두번째는 의존성 배열이다.
    빈배열이면 최초 딱 한번만 호출된다. (mount)
    비동기로 처리하는 경우가 일반적이다. async...await
    주로 Back-End에서 처리하는 코드를 쓴다.

📌 3. useNavigate

useNavigate는 React Router 버전 6 이상에서 도입된 훅으로, 프로그래밍 방식으로 네비게이션을 제어할 수 있습니다. useNavigate를 사용하면 컴포넌트 내에서 쉽게 다른 경로로의 이동을 구현할 수 있습니다.

	화면을 전환할 때 사용한다.
    Route에 path에 등록된 값을 쓴다.
    const navigate = useNavigate();
	navigage("/notice)

📌 4. useParams

useParams는 React Router 라이브러리의 훅 중 하나로, 경로 매개변수(route parameters)를 추출할 때 사용됩니다. 이 훅은 동적 경로 일부분으로 지정된 URL 파라미터를 컴포넌트 내에서 쉽게 접근하고 사용할 수 있게 해줍니다. 이를 통해 특정 리소스의 상세 페이지를 보여주는 등의 작업을 수행할 때 유용합니다.

	요청 URL 뒤에 query string 에 있는 값을 읽을 때 사용한다.
    ex ) http://localhost:3000/notice/123
    const {n_no} = useParams() // 가져온 n_no를 바탕으로 상세정보를 db를 통해서 들고올 수 있다.
    n_no에는 123값이 들어간다

📌 5. useRef

useRef는 React에서 제공하는 훅 중 하나로, 주로 두 가지 주요 목적으로 사용됩니다
사용자가 입력한 값을 폼 전송할 때 사용합니다.
DOM요소에 접근하거나 상태와 무관한 변수를 관리할 때 사용한다.
값이 변경되어도 리렌더링을 일으키지 않는다.
사용법은 xxxRef.current.함수이름

DOM 접근

useRef는 React에서 제공하는 훅 중 하나로, 주로 두 가지 주요 목적으로 사용됩니다

값의 유지

useRef는 .current 프로퍼티를 통해 값에 접근하며, 이 값은 컴포넌트의 라이프사이클 동안 유지됩니다. 이 값이 변경되어도 컴포넌트가 리렌더링되지 않는다는 특징이 있습니다.

	import React, { useRef } from 'react';

function ContactForm() {
  const emailRef = useRef();  // 이메일 입력을 위한 ref
  const messageRef = useRef();  // 메시지 입력을 위한 ref

  const handleSubmit = () => {
    console.log('Email:', emailRef.current.value);
    console.log('Message:', messageRef.current.value);
  };

  return (
    <div>
      <input ref={emailRef} name="email" type="email" placeholder="Email을 입력해주세요" />
      <textarea ref={messageRef} name="message" placeholder="메시지를 입력해주세요" />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

export default ContactForm;

📌 6. useLocation

useLocation 사용법 예시

공지제목1 을 클릭 할 때 아래 url이 나오면

	const location = useLocation() //useLocation 사용
    console.log(location);
 	const queryParams = new URLSearchParams(location.search);
	//URLSearchParams(location.search) 를 사용하여  location의 search에 접근한다.
    const n_no = queryParams.get("n_no") // 1
    const n_title = queryParams.get("n_title") //공지제목 1
    const n_writer = queryParams.get("n_writer") // 관리자
    const n_content = queryParams.get("n_content") //제목1 내용