Hooks

클래스형 컴포넌트에서 제공하는 기능을 함수형 컴포넌트에서 사용할 수 있도록 도입된 함수

• use로 시작하는 이름을 붙인다.
• 함수형 컴포넌트 최상위에서만 Hooks를 호출한다. (반복문/중첩문/조건문 사용 불가)
• 여러개의 Hooks가 사용되는 경우 위에서부터 아래로 순서대로 호출

내장 Hooks

useState : 동적 상태 관리
useEffect : mount,update,unmount effect 감지
useRef : DOM의 특정 요소 선택
useCallback : 함수 재사용
useMemo : 연산한 값 재사용

useState 예시

import { useState } from "react";

//사용자 이름과 별명을 관리
const Info = () => {
  const [name, setName] = useState("");
  const [nickname, setNickname] = useState("");

  const changeName = (e) => setName(e.target.value);
  const changeNickname = (e) => setNickname(e.target.value);
  return (
    <>
      <div>
        <p>이름:{name}</p>
        <p>별명:{nickname}</p>
      </div>
      <div>
        <p> 이름:<input type="text" name="name" value={name} onChange={changeName} /></p>
        <p> 별명: <input type="text" name="nickname" value={nickname} onChange={changeNickname}/></p>
      </div>
    </>
  );
};
export default Info;

useEffect

클래스형 컴포넌트의 componentDidMount, componentDidUpdate, comdponentWillUnmount를 합친 형태

useEffect(이펙트 함수, 의존성 배열);
의존성 배열

• 이펙트 함수가 의존하고 있는 배열
• 배열 안에 있는 변수 중 하나라도 값이 변경되었을 때 이펙트 함수를 실행
• 이펙트 함수의 실행 여부를 결정함

Info 컴포넌트에 useEffect 훅을 추가

   // 의존성 배열을 생략 => 마운트, 업데이트 모두 이펙트 함수를 실행
    useEffect(() => {
        console.log("렌더링이 완료되었습니다.");
        console.log({ name, nickname });
    });

마운트될 때만 이펙트 함수를 실행하도록 수정 ➡️ 의존성 배열의 값으로 빈 배열[ ]을 설정

useEffect(() => {
    console.log("렌더링이 완료되었습니다.");
    console.log({ name, nickname });
  }, []);

마운트될 때와 특정 상태변수가 변경될 때 이펙트 함수가 실행되도록 수정 ➡️ 의존성 배열에 변경을 검사할 상태변수 추가

useEffect(() => {
        console.log("렌더링이 완료되었습니다.");
        console.log({ name, nickname });
    }, [name]);

후처리(cleanup) 함수 추가

 useEffect(() => {
        console.log("렌더링이 완료되었습니다.");
        console.log({ name, nickname });
    //componentWillUnmount 메소드와 동일한 역할
        return () => console.log("cleanup", name);
    }, [name]);

return () => console.log("cleanup", name);
name 상태변수가 변경되거나 컴포넌트가 언마운트될 때 실행

cleanup 함수 동작을 테스트하기 위해 App 컴포넌트에 Info 컴포넌트 보이기/숨기기 기능을 추가

컴포넌트가 언마운트될 때만 cleanup 함수가 실행되도록 ➡️ 의존성 배열에 빈 배열 설정

  useEffect(() => {
    console.log("렌더링이 완료되었습니다.");
    console.log({ name, nickname });
    return ()=>console.log("clean up", name);
  }, []); //의존성 배열 설정