useEffect

지난번 컴포넌트 생명주기를 포스팅했을 때 useEffect를 사용을 했다.
오늘은 그 useEffect를 조금 더 자세하게 볼 것이다.

useEffect

useEffect()란 리액트에서 제공하는 내장 함수이며, 함수형에서 Side Effect를 사용할 수 있게 하는 리액트에 훅스이다.

Side Effect?

• 사이트 이펙트(Side Effect)는 의학언어인 부작용과는 다른 의미이며,
  리액트의 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적이 효과들을 Side Effect라고 한다.

사용방법

먼저 useEffect의 기본형태이다.

useEffect(() => {실행시키고자 하는 함수}, [검사하고자 하는 특정 값 또는 변수])

1. Didmount

 useEffect(() => {
   console.log("마운트됨!!");
 }, []);

위 코드는 처음 렌더링 될때 한 번만 실행이 된다.

2. Didupdate

  // 1
  useEffect(() => {
    console.log("수정되고 다시 그려짐");
  });
  
  // 2
  useEffect(() => {
    console.log("수정되고 다시 그려짐");
  }[any]);

위 코드는 리렌더가 될때 마다 실행이 된다.
2번 같은 경우는 배열안에 어떠한 값이 변경이 될 때마다 리렌더가 되게 할 수 있다.

3. Willunmount

 useEffect(() => {
   return () => {
     console.log("컴포넌트 사라짐!!!!!!!");
   };
 }, []);

위에 코드 처럼 안에 return을 사용하게 되면 컴포넌트가 사라질 때 함수가 동작하게 된다.

4. Didmount & Willunmount

 useEffect(() => {
   console.log("마운트됨!!");
   return () => {
     console.log("컴포넌트 사라짐!!!!!!!");
   };
 }, []);

위와 같이 Didmount와 Willunmount는 같이 작성할 수 있다.