React - useEffect

목록

• Introduction
• onMount, onUnMount
• Conclusion

📌 Introduction

안녕하세요 오늘은 react의 useEffect hooks에 대해서 알아보겠습니다.

📌 onMount, onUnMount

간단하게 onMount와 onUnMount를 useEffect에서 한번 구현해보겠습니다. onMount는 vue에서 created() 보다 mounted에 가깝습니다. 그래서 dom에 접근도 가능합니다.

  // onMount
  useEffect(() => {
    console.log("컴포넌트가 화면에 나타남");

    // onUnMount
    return () => {
      console.log("컴포넌트가 화면에서 사라짐");
    };
    // deps -> dependecies에 약자
  }, []);

useEffect는 생애주기를 가리키는 함수 입니다. return에서의 함수는 해당 컴포넌트가 없어질때 실행이 됩니다.

만약에 그럼 두번째 인자인 배열이 차있다면 어떻게 될까요?

  useEffect(() => {
    console.log("유저 값이 설정됨");
    console.log(user);

    return () => {
      console.log("유저 값이 바뀌기 전");
      console.log(user);
    };
  }, [user]);

이렇게 ⭐️⭐️user에 값이 설정되거나 바뀔때 useEffect 내부의 함수가 실행되게 됩니다. useEffect 내부에서 상태 값이나 props를 건드리게 된다면 꼭 배열안에 명시를 해주세요. 그렇지 않다면 최신의 값을 참고하지 않는 문제가 발생할 수 도 있습니다.

📌 Conclusion

오늘은 useEffect에 대해서 알아보았습니다. useEffect는 참 다루기 쉽지 않은 hooks인거 같아요. 얼핏보면 vue에서의 생애주기 함수와 watch를 섞어놓은 듯한 느낌을 많이 받는 함수인거 같습니다. 그럼 다음 포스팅에서 만나요 ! 안녕!