[React] useEffect 를 이용한 API 호출, 이벤트 처리 함수 등록 및 해제

함수 실행 시 함수 외부의 상태를 변경하는 연산을 부수 효과라고 부른다.

 

useEffect를 주로 사용함.

 

ex) 

API호출, 이벤트 처리 함수를 등록, 해제 

 

 

[API 호출 예제]

import React, { useState, useEffect } from "react";

export default function MyComponent(userId) {
  const [user, setuser] = useState(null);
  useEffect(() => {
    getUserApi(userId).then((data) => setuser(data));
  }, [userId]);
  return (
    <div>
      {!user && <p>사용자 정보를 가져오는 중...</p>}
      {user && (
        <>
          <p>{`name is $(user.name)`}</p>
          <p>{`age is $(user.age)`}</p>
        </>
      )}
    </div>
  );
}

userId가 변경될 때 마다 호출함. 불필요한 렌더링을 막음

 

 

[이벤트 처리 함수를 등록 및 해제]

 

창 크기 조절에 따른 이벤트 

import React, { useState, useEffect } from "react";

export default function MyComponent(userId) {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, []);
  return <div>{`width is ${width}`}</div>;
}

 

   

창 크기가 달라질 때 마다 이벤트를 호출함. 이거 그 OUT 보여주는 부분 창 크기에 따라 table Size조절 이슈 해결할 때 쓸 수 있을듯. 

 

 

 

[커스텀 use함수 만들기 예제]

창 크기 조절

import React, { useState, useEffect } from "react";

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("resize", onResize);
    };
  }, []);
  return width;
}

function WidthPrinter() {
  const width = useWindowWidth();
  return <div>{`width is ${width}`}</div>;
}

export default function MyComponent(userId) {
  return WidthPrinter();
}

 

 

Hook 사용 시 지켜야 할 규칙

1. 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야 한다.

2. 훅은 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출되어야 한다.

 

 

리액트가 내부적으로 훅(Hook)을 처리하는 방식

let hooks = null;

export funtion useHook() {
// ...
hooks.push(hookData);
}

function process_a_component_rendering(component){
hooks = [];
component();
let hooksForThisComponent = hooks;
hooks = null;
// ...
}

리액트는 훅이 사용된 순서를 저장하고 배열에 저장된 순서를 기반으로 훅을 관리함