[React] Hooks - useEffect

React.js > Hooks > useEffect

• useEffect는 2개의 인자를 받는다. 1번째 인자는 함수, 2번째 인자는 배열 형태로 받아 대괄호로 표시한다. useEffect는 컴포넌트가 렌더링 될 때 특정 작업을 수행할 수 있게 도와준다. 그리고 그 작업이 동작할 시기를 지정할 수 있다. 다음과 같이 3가지로 지정할 수 있다.
  - componentDidMount(컴포넌트가 마운트 됐을 때): 컴포넌트가 나타남(렌더링됨)
  - componentDidUpdate(컴포넌트가 업데이트 됐을 때): 컴포넌트에 변동이 생김
  - componentWillUnmount(컴포넌트가 언마운트 됐을 때): 컴포넌트가 사라졌을 때

useEffect(()=> {});

// 2번째 인자가 없기 때문에 화면이 처음 렌더링 될 때 즉, Component가 Mount(컴포넌트가 나타날 때)될 때와 Unmount(컴포넌트가 사라질 때)될 때, 그리고 state가 업데이트 될 때 마다 useEffect가 실행됨 ==> componentDidMount & componentDidUpdate
// cf. componentWillUnmount: 컴포넌트가 사라질 때도 동작하지만, 해당 코드에선 unmount될 것이 없기에 제외한 것. 

useEffect(() => {},[]);

// 2번째 인자로 빈 배열 []을 넣은 경우에는 useEffect를 화면에 렌더링될 때 한 번만 실행된다. Component가 Mount(컴포넌트가 나타날 때)될 때 실행 => componentDidMount


const [count, setCount] = useState(0);
useEffect(() => {}, [count]);

// 2번째 인자로 받는 이 배열은 종속성(dependency) 배열로 useEfect가 어느 시점에 실행되게 할 것인지 지정할 수 있다. 이 배열 안에 Dependency를 입력하게되면 입력한 변수, 즉 입력한 state에 변화가 있을때 마다 useEffect가 실행된다.
// useEffect를 렌더링 후 한번, 그리고 배열 안 변수의 값이 변할 때마다 실행하는 코드 ==> componentDidMount & componentDidUpdate

• useState와 useEffect를 이용해 브라우저 title 업데이트하기

const useTitle = (initialTitle) => {
  const [myTitle, setMyTitle] = useState(initialTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = myTitle;
  };
  useEffect(updateTitle, [myTitle]);
  return setMyTitle;
};

const App = () => {
  const titleUpdater = useTitle("Loading...");
  // title에는 기본값으로 "Loading..." 텍스트 지정
  setTimeout(() => titleUpdater("Home"), 5000);
  // setTimeout함수를 이용하여 5초 후 Loading -> Home으로 title 업데이트
  return (
    <div></div>
  );
};

• 위 코드 적용모습 Loading.. 표출하고 5초 후에 Home으로 변동