[리액트] useEffect-한번만 실행되게 하기

useEffect() = 어떤 effect를 발생시키는 Hook

- 컴포넌트가 등장할 때, 그리고 컴포넌트가 업데이트가 되고 나서 항상 실행된다.

- useEffect를 통해 클래스형 컴포넌트에서 사용 가능했던 생명주기 메서드를 함수형에서도 사용 가능해졌다.

 

 

[참고] 리액트 훅에 대한 글

[리액트] React hook 간단하게 알아보기

---

 

 

useEffect에 대한 설명은 짧게 하도록하고, useEffect를 한 번만 실행되게 하는 방법을 알아볼 거다.

 

function UseEffectExample(){
	let [data, changeData] = useState("");

    useEffect(() => {
      console.log("rendering~");
    });
  
  return (
  	<div>
          { data }
          <input onChange={ (e)=>{ changeData(e.target.value) }}/>
      	</div>
        )
}

 

위의 코드는 input창에 사용자가 입력할 때마다 로그가 찍힌다.

왜냐하면 state의 값이 변경될 경우 렌더링을 새로 하기 때문에!

 

 

입력

출력 로그

<input>에 입력할 때마다 useEffect도 실행이 되는 걸 확인했다. (rendering~이 출력되므로)

그런데 input의 값이 바뀔 때마다(state의 값이 변경될 때마다) useEffect가 실행될 필요가 있을까?

 

.. 이건 자원낭비다.

만약 state가 여러 개이고 useEffect가 state들이 변경될 때마다 호출된다면 정말 비효율적이다!

 

 

이를 막기 위한 방법이 있다.

function UseEffectExample(){
	let [data, changeData] = useState("");

    useEffect(() => {
      console.log("rendering~");
    },[]);
  
  return (
  	<div>
          { data }
          <input onChange={ (e)=>{ changeData(e.target.value) }}/>
      	</div>
        )
}

 

달라진 점은 useEffect의 두 번째 매개변수로 []가 들어왔다.

[]를 추가하면 첫 렌더링에만 호출이 되어 그 이후에는 절대 재호출 되지 않는다.

 

입력

출력 로그

해결되었다. 빈 배열 넣는 건 일종의 트릭이다..!