React | useEffect

들어가기
Mount : 첫 렌더링
Update : re 렌더링
Unmount : 컴포넌트가 DOM상에서 제거될 때

useEffect

---

📍 useEffect란?

• Side-effect 다룰 때 사용
• 인자를 2개 받는다. 콜백함수 , 의존성 배열
  

useEffect(()=>{
document.document.addEventListener("click", ()=> alert(1))
},[])

📍 useEffect 의 사용

Side-effect 다룰 때 사용

위 예제와 같이 onClick 함수를 사용하지 않고, document.addEventListener 를 사용해서 이벤트를 등록하면 중복으로 이벤트가 생성이 된다.

따라서 위처럼 코드를 작성하면, App component가 state 변경에 의해 re-render 될 때마다
document에 대해 click event listener가 중복적으로 생성되는 side effect가 생기는 것이다.

이러한 상황을 제어하기위해 useEffect라는 hooks 를 사용한다.

📍 의존성 배열에 따른 re-rendering

1. 의존성 배열 x : 랜더링 될 때 마다 실행

   useEffect(() => {
   console.log("랜더링이 완료되었습니다!");
   },      );
   *//* 아무것도 안넣으면, 랜더링 될 때마다 실행

2. [] (빈배열) : mount될 때만 실행

   useEffect(() => {
   console.log("랜더링이 완료되었습니다!");
   },**[]**);
   //빈배열만 쓰면, 첫 렌더링때만 실행

1. [ 요소 ] : 요소가 바뀔 때만 실행

   useEffect(() => {
       console.log("name이 바뀔 때만 실행됩니다.");
     }, [name]);
     //  [] 안에 name 넣어주면 name이 바뀔 때만 실행됨.

📍 Clean up 함수

예제를 통해 Clean up 함수가 왜 필요한지 알아보자

이 예제는 버튼을 누르면 User 컴포넌트와 Guest 컴포넌트가 토글 형식으로 바뀌는 코드이다.
분명 useEffect에 의존성배열로 [] 빈배열을 넣어줬지만, 컴포넌트가 바뀌고 다시 랜더링될 때마다 이벤트 리스너가 중복으로 생성된다.

의존성 배열에 value 를 넣어 input의 value 가 바뀌었을 때 실행되도록 useEffect 를 작성하면,
alert 는 value 가 바뀔때마다 이벤트리스너가 중복으로 생성된다.
이럴 때 사용하는 것이 Clean up 함수이다.

Clean up 함수는 아래와 같이 return 문으로 작성을 한다.

useEffect(() => {
    console.log("마운트될 때만 실행됩니다.");

    return () => {
      console.log("언마운드될 때만 실행됩니다.");
      // 컴포넌트가 제거될 때 실행
    };
  }, []);

따라서 state 가 변경되고, re-rendering 되면 return 문 (Clean up 함수)이 먼저 실행된 후에 useEffect 안에 작성된 로직이 실행된다.