[ React ] Hook

🔴  useState

 

const [ state, setState ] = useState(0);  // 변수 선언

// setState 함수의 첫 번째 argument는 현재 state 값이다.
setState((current) => current + 1);  // 값 변경(비동기) + 렌더링
state = state + 1;                   // 값 변경(비동기)

 

// 🔍 state 값을 변경하는 방법
const [fruit, setFruit] = useState({ color: "red", name: "apple" });

// 1️⃣ 새로운 객체 만들기
setFruit({ color: "red", name: "strawberry" });
// 2️⃣ prevState 값을 이용하여 이전 state를 사용하기
setFruit(prev => ({ ...prev, name: "strawberry" }));

⚪  state에 배열 계열을 지정할 때는 setState에 새로운 배열(spread, new Set)을 지정해줘야 렌더링이 일어난다. 그렇지 않으면 state가 배열의 값이 아닌 배열의 주솟값을 가리키기 때문에 값이 변하지 않았다고 판단하여 렌더링이 일어나지 않는다.

 

🟠  useEffect

⚪  렌더링 후 특정한 시기에만 코드를 실행하기 위한 Hook

  ⚪  컴포넌트가 시작될 때 실행할 지, 컴포넌트가 끝날 때 실행할 지 아니면 무언가 변할 때 실행할 지 정할 수 있다.

 

import { useEffect } from "react";

useEffect(effect, [deps]);

⚪  effect

  ⚪  컴포넌트 렌더링 이후 실행할 함수

  ⚪  리액트는 이 함수를 기억했다가 DOM 업데이트 이후 불러낸다.

⚪  deps

 

useEffect(() => {
    console.log("useEffect");
});

  ⚪  deps 배열 인자가 없을 경우, 컴포넌트가 렌더링 될 때마다 useEffect가 실행된다.

 

useEffect(() => {
    console.log("useEffect");
}, []);

  ⚪  빈 배열을 인자로 넣을 경우, 컴포넌트가 처음 생성될 때에만 실행된다.

 

useEffect(() => {
    console.log("useEffect");
}, [count]);

  ⚪  특정 변수를 배열 요소로 넣을 경우, 초기 렌더링 직후와 해당 변수의 값이 변경될 때만 실행된다.

 

useEffect(() => {
    console.log("useEffect");
    return () => console.log("goodbye");
}, [count]);

  ⚪  함수를 return 할 경우, 컴포넌트가 사라질 때(언마운트 될 때) return 되는 함수가 마지막으로 한 번 실행된다.

 

🟡  useRef

📌  useRef는 컴포넌트의 DOM 노드에 직접 접근할 때 주로 사용한다.

⚪  useRef는 current라는 값을 담고 있는 상자이며, 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다.

⚪  Reference는 노드에 대한 주소 정보를 담고 있다. 리액트에서는 current에 이러한 ref 주소를 담고 있다.

⚪  예를 들면, <div ref={myRef} /> 와 같이 선언하면, myRef.current에 div의 DOM 노드에 대한 주소값을 저장한다.

 

// input 노드에 접근해서 focus() 부여
const focusBtn = () => {
  const inputEl = useRef(null);
  const handleClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onClick}>Focus input</button>
    </>
  );
}

 

// 해당 노드에서 터치 시 일어나는 이벤트 버블링 중단하기
import { useEffect, useRef } from "react";

const Component = () => {
  const targetRef = useRef(null);
  useEffect(() => {
    const handleTouch = (event) => {
      console.log(event.target);
      event.stopPropagation();  // 이벤트 버블링 중단
    }
    const element = targetRef.current;
    // ref에 이벤트 부여
    element.addEventListener("touchstart", handleClick);
    element.addEventListener("touchend", handleClick);
    return () => {
      element.removeEventListener("touchstart", handleClick);
      element.removeEventListener("touchend", handleClick);
    }
  }, []);
  
  return (
    <div ref={targetRef}></div>
  );
}

 

📌  useRef의 또 다른 특징은 setter가 없어서 값이 변경되어도 리렌더링 하지 않는다는 것이다.

 

🟢  useLayoutEffect

⚪  useLayoutEffect 호출 순서

  🔉  렌더링

  🔉  useLayoutEffect  호출

  🔉  브라우저 화면 그리기 : 이 시점에 컴포넌트에 해당하는 엘리먼트가 실제로 DOM에 추가됨

  🔉  useEffect 호출

 

// 🔍 예시 : 창의 크기가 바뀐 경우 엘리먼트 너비와 높이 받기
function useWindowSize {
    const [ width, setWidth ] = useState(0);
    const [ height, setHeight ] = useState(0);
    
    const resize = () => {
        setWidth(window.innerWidth);
        setHeight(window.innerHeight);
    };
    
    useLayoutEffect(() => {
        window.addEventListener("resize", resize);
        resize();
        return () => window.removeEventListener("resize", resize);
    }, []);
    
    return [width, height];
};