React Lifecycle과 useEffect

리액트 컴포넌트의 라이프 사이클

사람의 인생처럼 리액트 컴포넌트도 태어나고 사라지는 생애주기가 존재한다

이를 다른 말로는 라이프 사이클이라고 부르며 리액트 컴포넌트의 라이프 사이클은 크게 3단계로 구분할 수 있다

graph TD; Mount:탄생-->Update:업데이트; Update:업데이트-->Unmount:죽음;

• Mount : 컴포넌트를 페이지에 처음 렌더링할 때
• Update : State나 Props의 값이 바뀌거나 부모 컴포넌트의 리렌더해 자신도 리렌더링될 때
• Unmount : 더 이상 페이지에 컴포넌트를 렌더링하지 않을 때

라이플 사이클을 이용하면 컴포넌트가 처음 렌더링될 때 특정 동작을 하도록 만들거나, 업데이트할 때 적절한지 검사하거나, 페이지에서 사라질 때 메모리를 정리하는 등 여러 유용한 작업을 단계에 맞게 할 수 있다.

---

useEffect

함수 useEffect는 어떤 값이 변경될 때마다 특정 코드를 실행하는 리액트 훅이다 useEffect를 이용하면 컴포넌트의 State값이 바뀔 때마다 변경된 값을 콘솔에 출력하게 할 수 있다 useEffect의 용법 : useEffect(callback, [deps]) 첫번째 callback에는 실행시키고자 하는 함수, 두번째 deps에는 의존성 배열로 감시하고자하는 변수가 된다

useEffect를 사용하여 하나의 값 검사하기

...
export default function App() {
  const [count, setCount] = useState(1);
  const handleSetCount = (value) => {
    setCount(count + value);
  };
  useEffect(() => {
    console.log("count 업데이트: ", count);
  }, [count]);

...

위 소스와 결과물을 보면 useEffect를 선언하면서 첫번째 콜백 실행 함수로 console을 찍도록 하고 두번째 인수로 count라는 맨위에 useState로 선언한 변수를 의존성 배열로 넣어서 감시한다 즉, count가 업데이트되면 console을 찍게된다

useEffect를 사용하여 어러개의 값 검사하기

...
export default function App() {
  const [count, setCount] = useState(1);
  const [text, setText] = useState("");
  const handleSetCount = (value) => {
    setCount(count + value);
  };
  useEffect(() => {
    console.log("count 업데이트: ", count, text);
  }, [count]);


...

위 소스를 보면 useEffect를 선언하면서 의존성 배열을 count와 text 두개를 주었다 이렇게 하면 count나 text의 값이 업데이트 즉 변동이 있으면 console을 찍게된다

useEffect를 사용하여 컴포넌트 렌더링만 감시하고싶을때

...
export default function App() {
  const [count, setCount] = useState(1);
  const [text, setText] = useState("");
  const handleSetCount = (value) => {
    setCount(count + value);
  };
  useEffect(() => {
    console.log("count 업데이트");
  }, [count]);

...

컴포넌트가 업데이트 즉 재렌더링이 되는경우 감시하고싶으면 두번째 인수인 의존성 배열에 아무값도 주지 않으면 컴포넌트 자체를 감시하게된다

useEffect를 사용해서 마운트 시점은 제외하고 업데이트 시점만 콜백 함수 실행

위에 컴포넌트 렌더링 감시를 하게되면 처음 실행되는 마운트 시점에도 콜백 함수가 실행되는데 처음 실행되는 마운트 시점을 제외하고 재렌더링 되는 시점만 콜백 함수를 실행하고 싶으면 아래와 같이 useRef 훅을 사용할 수 있다.

function App(){
    ...

    const didMountRef = useRef(false);

    useEffect(()=> {
        if (!didMountRef.curret){
            didMountRef.current = true;
            return;
        }
        else {
            console.log("컴포넌트 업데이트");
        }
    });
}

위와 같이 컴포넌트를 페이지에 마운트했는지 판단하는 변수 didMountRef를 Ref 객체로 생성하고 초깃값을 false로 설정한다 Ref 객체는 돔 요소를 참조하는 것뿐만 아니라 컴포넌트의 변수로도 자주 활용된다. didMountRef.current 값에 따라 해당 컴포넌트가 마운트가 되었는지 안되었는지 활용할 수 있다. 따라서 처음 마운트가 되면 didMountRef값이 true가 되고 콘솔이 안찍히게 된다

useEffect를 사용해서 마운트 시점에만 콜백 함수 실행

이번에는 해당 컴포넌트가 맨 처음 마운트 되는 시점에만 콜백 함수를 실행하고 싶다면 어떻게 할까?

    useEffect(()=> {
        console.log("컴포넌트 마운트");
        }, []);
}

두번째 인수인 의존성 배열에 빈배열인 []를 주게되면 해당 컴포넌트가 맨 처음 마운트 되는 시점에만 콘솔을 찍게된다.