React useEffect 와 LifeCycle

useEffect 와 LifeCycle

모든 컴포넌트는 생명주기(LifeCycle)가 있습니다. 생명 주기가 있다는 의미는 모든 컴포넌트는 생명주기를 거치며 자기 역할을 수행합니다. (생성 -> 재사용 -> 종료) 이러한 구체적인 과정을 컨트롤가능하게 하는 것이 useEffect입니다.

useEffect 사용하기

앞서 설명에서처럼 생성, 재생성, 종료를 컨트롤가능하며, 다음과 같이 사용합니다.

  const [count, setCount] = useState(0);

  //배열을 만들고 그안에 컴포넌트를 넣는것이 사용의 기본입니다.
  //
  /*
  useEffect(() => {
    console.log("Mount!");
  }, [aa, bb, cc, dd]); 
  //aa, bb, cc, dd를 트래킹하며 변경사항을 반영해 re-render됩니다. 
  */

  //빈 배열을 입력하면 초기 로딩 당시 한번만 실행이 됩니다.
  useEffect(() => {
    console.log("Mount!");
  }, []);

  //아무런 입력도 안하면 요소가 하나라도 변경되면 계속 렌더링됩니다.
  useEffect(() => {
    console.log("Update!");
  });
  
  // 위에서 설명했듯 count를 바라보며 count가 변경되어야지만 re-render됩니다.
  useEffect(() => {
    console.log(`count is update : ${count}`);
  }, [count]);

  //페이지를 한번 마운트 한 후에 순차적으로 처리해주고 싶을때 didMount 기법을 사용한다.
  const didMount = useRef(false);

  useEffect(() => {
    //didMount때문에 최소 한번은 count가 변경되더라도, 스킵이 가능해진다.
    if(!didMount){
        //이것저것 기능을 실행해주고 didMount를 true로 바꿔준다.
      //ex) setSessionId({id: 'abc', name: 'moth'})
    	didMount.current(true);
    }else{
      //ex) getSessionId()
		console.log(`didMount is update : ${count}`);   
    }
    //또는 count를 입력하지않고 빈배열[]도 가능
  }, [count]);

  // 종료시점은 return으로 구현이 됩니다. 다음과 같이 작성할 수있습니다.
  useEffect(() => {
    console.log("Once! Mount");
    return () => {console.log("Once! Unmount Test");}
  }, []);

다음 코드는 전체 예제입니다 App.js에서 불러와 사용하시면 됩니다.

const UnMountTest = () => {
    useEffect(() => {
        console.log("Sub Component Mount");
        return () => {
            console.log("Sub Component Unmount");
        }
    }, []);
    return (
        <>
            UN MOUNT TEST
        </>
    );
}

const LifeCycle = () => {
    const [count, setCount] = useState(0);
    const [text, setText] = useState("");

    const[isVisible, setIsVisible] = useState(false);
    const toggle = () => setIsVisible(!isVisible);

    useEffect(() => {
        console.log("Mount");
    }, []);

    useEffect(() => {
        console.log("update");
    });

    useEffect(() => {
        console.log("count is update : " +{count});
    }, [count]);

    useEffect(() => {
        console.log("text is update : " + {text});
    }, [text]);

    return (
        <>
        <div>
            {count}
            <button onClick={() => setCount(count + 1)}>count UP</button>
        </div>
        <div>
            <input
                type="text"
                value={text}
                onChange={(e) => setText(e.target.value)} />
            <button onClick={toggle}>ON/OFF TOGGLE</button>
            {isVisible && <UnMountTest />}
        </div>
        </>
    )
}