[React] useEffect에 대해

컴포넌트의 인생 ..

컴포넌트도 인생이 있다.. Life Cycle..

1. 페이지에 장착되기도 하고(mount)
2. 가끔 업데이트도 되고(update)
3. 필요없으면 제거되고(unmount)

근데 이 컴포넌트의 인생에 간섭할 수가 있다 ?

컴포넌트의 인생(Life Cycle)에 간섭하는 방법

간섭은 갈고리를 달아서 하면된다.
Detail 컴포넌트 등장 전에 이것좀 해줘~ 이런 식으로 말이다
이 갈고리는 영어로 hook이라고 한다.
그래서 저걸 Lifecycle hook이라고 부른다, 컴포넌트의 생명주기에 거는 갈고기란 뜻

요즘 React에서 Lifecycle hook 쓰는법

옛날엔 뭐 componentdidMount ~ 뭐 이런거 했엇는데 요즘은 useEffect를 쓴다.

  useEffect(() => {
    //mount, update 시 실행 코드
  });

  useEffect(() => {
    //mount 시 실행 코드
  }, []); // [] ==> 디펜던시

  useEffect(() => {
    return () => {
      //useEffect 코드 실행 전에 실행될 코드
    };
  });

  useEffect(() => {
    return () => {
      //useEffect 코드 실행 전에 실행될 코드 + 디펜던시 추가 => unmount 시 1회만 동작
    };
  }, []);

  useEffect(() => {
    // state1이 변경될때만 실행
  }, [count]);

근데 ..

저건 useEffect 밖에 적어도 똑같이 실행되는거다.

그럼 useEffect 안에 적는게 무슨 차이가 있는지를 알아야 결국 쓸 타이밍을 잡을 줄 알 것이다.

useEffect 안에 적은 코드는 html 렌더링 이후에 동작한다.

그래서 예를 들어 useEffect안에 적어야할 코드가 동작에 시간이 좀 필요한 코드다 ? 그럼 useEffect 밖에 적는 코드는 그 동작이 완료되어야 html 렌더링이 되고, useEffect 안에적은 코드는 html 렌더링 이후에 동작하기 때문에 유저가 미리 렌더링된 컴포넌트UI를 확인할 수 있는 것이다.

별주 : useEffect의 이름 유래

함수안에 코드를 짤때, 핵심기능 외에 쓸데없는 기능들을 프로그래밍 용어로 side effect라고 부른다.
그래서 useEffect도 거기서 따온 말인데, 컴포넌트의 핵심 기능은 html 렌더링이라 그것과 관련없을 쓸데없는 기능, 즉 side effect스러운 코드들을 useEffect안에 적으란 의도이다.
오래걸리는 반복연산, 서버에서 데이터 갖고오는 작업, 타이머 다는거 등등 이런건 useEffect안에 많이 단다.

---

사실 이것도 vue에서 이미 다뤄봤던거라 아무래도 이해하기 더 수월했던거 같다. 리액트를 배우며 느끼는 것중 하나가, vue를 사용해본 경험이 react를 배우는데에 많은 익숙함?을 준다는 것이다. 아주 좋구만~