useEffect()

 

useEffect

 

• 컴포넌트 생명 주기 이벤트를 등록하기 위한 훅
• Mount, Update, Unmount 되었을 때 특정 작업을 처리할 코드를 실행시키고 싶다면 useEffect()를 사용할 수 있다. 인자로는 콜백함수 또는 콜백함수와 배열을 받는다.

API

useEffect(()⇒{

// 작업…

}); ⇒ 컴포넌트가 렌더링 될 때 마다 실행

useEffect(()⇒{

//작업…

}, []);

⇒ 컴포넌트가 처음 화면에 렌더링 될 때 실행

useEffect(()⇒{

//작업…

}, [value]);

⇒ 컴포넌트가 처음 화면에 렌더링 될 때 실행, value 값이 바뀔 때 실행

API: Clean Up - 정리

useEffect(() ⇒ {

    // 구독…

    return () ⇒ {

    //구독 해지…

    }

},[]);

return값에 함수를 넣어, 함수 안에서 정리하는 작업을 처리해주면 된다. 해당 컴포넌트가 언마운트될 때, 다음 렌더링 시 useEffect가 실행되기 이전에 그 함수가 실행이 된다.

 

function App() {
  const [count, setCount] = useState(1);
  const [name, setName] = useState("");

  const handleCountUpdate = () => {
    setCount(count + 1);
  };

  const handleInputChange = (e) => {
    setName(e.target.value);
  };

  // 랜더링 될 때마다 매번 실행됨
  useEffect(() => {
    //...
    console.log("count 변화 🫶");
  }, [count]);
  //-> 이 배열은 dependency array라고 불린다.
  //-> useEffect가 count가 바뀔때만 실행하고 싶다는 뜻

 

 

useEffect와 class

• class를 알아야 한다. 그런데 이제는 legacy하다는 말을 듣는다.
• 클래스 기반 컴포넌트일 경우 다음 메소드를 오버라이드 해서 구현 (componentDidMount(): 컴포넌트 마운트가 완료되고 브라우저 DOM 트리에 반영된 후 호출)

함수 기반

function App() {
  return (
    <>
      <h1>오별</h1>
    </>
  );
}

export default App;

 

class 기반

class HighSchool {
  constructor(kor, eng) {
    this.kor = kor;
    this.eng = eng;
  }

  sum() {
    return this.kor + this.eng;
  }
  avg() {
    return this.sum() / 2;
  }
}
const s1 = new HighSchool(100, 90);
console.log(s1.sum());

• 클래스는 객체를 생성하기 위한 설계도
• 클래스는 객체의 틀 역할을 한다.