useEffect

**LEARNING REACT를 읽고 정리한 글입니다.**

<useEffect 예제>

Q. input의 입력값이 변할 때마다 alert창을 띄워주고 싶다면 어떻게 해야할까??

이럴 때 필요한 것이 useEffect이다. useEffect함수 안에 alert를 넣어주면 렌더러가 매 렌더링을 마칠 때마다
side effect로 alert를 실행시켜 준다.

즉, 렌더러가 side effect(부수효과)로 무엇인가 실행 시키고 싶을 때 useEffect를 사용한다.
useEffect를 사용하면 렌더링이 끝나기를 기다렸다가 alert나 console.log등의 값을 제공할 수 있다.

Side Effect는 2가지 종류로 나뉜다.
1. clean-up해야 하는 것.
2. 그렇지 않은 것.

	useEffect( () => {
    		//2번 - 렌더링 시 발생시켜줘야 하는 sideEffect
            return //1번 - 컴포넌트가 unmount 시, clean-up시켜줘야 하는 sideEffect;
    );
    ```

의존관계 배열

리액트는 state가 변하면 컴포넌트 트리 또한 리랜더링 된다. 위의 예에 경우, input 안에 값이 변할때마다 매번 리랜더링 되고 useEffect또한 매번 호출될 것이다. 이것은 useEffect를 필요 이상으로 많이 호출하게 된다.


그렇다면 특정 조건에 해당할 경우에만 useEffect를 호출하고 싶다면??

이 때 필요한 것이 의존관계 배열이다.

의존 관계 배열은 effect가 호출되는 시점을 제어한다.
아래 코드가 의존 관계 배열의 예시다.

첫 번째 useEffect는 두번째 매개변수의 배열 안 val이 변할 때만 호출된다.

두 번째 useEffect는 배열 안 phrase값이 변할 때만 호출된다.

import React, { useState, useEffect } from 'react'; 

function App() {
  const [val, set] = useState("");
  const [phrase, setPhrase] = useState("Example phrase");

  const createPhrase = () => {
    setPhrase(val);
    set("");
  }

  useEffect(() => {
    console.log(`typing "${val}"`);
  }, [val]); //val값이 변할때만 호출

  useEffect(() => {
    console.log(`saved Phrase: "${phrase}"`);
  }, [phrase]); //phrase값이 변할 때만 호출

  return (
    <>
      <label>Favorite phrase: </label>
      <input 
        value={val}
        placeholder={phrase}
        onChange={e => set(e.target.value)}
      />
      <button onClick={createPhrase}>send</button>
    </>
  );
}

export default App;

++의존관계 배열에 []빈 배열을 넣게 되면 초기 렌더링 직후 한 번만 실행된다.