useEffect Recap

useEffect 복습

useEffect는 내가 특정 순간 혹은 상황? 에서 리렌더링을 일으키고 싶을때 사용 하는 훅
만약 다음과 같은 코드가 있다면

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const [keyword, setKeyword] = useState('');
  const onClick = () => setCount((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
  console.log('Api 호출');

  return (
    <div className='App'>
      <input type='text' onChange={onChange} value={keyword} />
      <h1>{count}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

export default App;

처음 App이 마운트되고 나면 API 호출이 콘솔에 찍힐 것이다
하지만 문제는 버튼이 클릭되거나, 인풋에 타이핑을 하는 순간에도 API 호출이 콘솔에 찍히게 된다

실제로 서버에서 API를 호출하는 코드가 있다고 가정하면, 불필요한 호출이 계속 일어나고 있다는 소리고 성능에 저하가 생길 수도 있다

이럴때 useEffect() 훅을 사용하게 된다

useEffect(callback, deps?)

useEffect는 2개의 매개변수를 갖는다

첫 번째는 우리가 실행할 함수,
두 번째는 배열타입인데 배열의 값으로는 안넣어줘도 되고, 변화를 주고자하는 state를 넣어 줄수도 있다

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const [keyword, setKeyword] = useState('');
  const onClick = () => setCount((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
 
   useEffect(()=> {
    console.log('i run only once.')
  },[])

  return (
    <div className='App'>
      <input type='text' onChange={onChange} value={keyword} />
      <h1>{count}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

export default App;

useEffect() 안에 작성된 콘솔은 처음 마운트 될때만 실행이 되고 그 이후에는
실행이 되지 않는다. 즉 인풋에의해 리렌더링이 되거나, 버튼에의해 리렌더링이 되더라도 다시 실행이 안된다는 뜻
useEffect()의 두번째 인자로 [] 빈 배열 값을 전달 했기 때문이다.
이는 우리가 렌더링 되는것을 바라볼 것이 비어있기때문에, 최초 마운트 될때 말고는 컴포넌트가 리렌더링 되더라도 다시 실행 되지 않는 것이다
만약 [] 을 없애고 함수만 전달한다면

useEffect(()=> {
    console.log('i run only once.')
  })

useEffect를 쓰지 않았을때와 같이 모든 렌더링에 반응해 실행된다..

그럼 배열안에 특정 state 값을 넣어준다면?

useEffect는 그 state를 바라보고, 변화가 생길때마다 함수를 실행하게 된다.

function App() {
  const [count, setCount] = useState(0);
  const [keyword, setKeyword] = useState('');
  const onClick = () => setCount((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);

  useEffect(() => {
    console.log('i run only click.');
  }, [count]);
  return (
    <div className='App'>
      <input type='text' onChange={onChange} value={keyword} />
      <h1>{count}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

export default App;

배열안에 count 를 넣었을때,
마운트 될때 최초로 한 번 실행 되었고,
클릭 2번에 반응을해 count의 상태가 2번 바뀌었으므로 다시 2번이 실행됨

인풋에는 반응을 하지 않았다

useEffect 는 여러번 사용 할 수 있고 배열안에도 여러 state값을 넣어 줄 수 있다

function App() {
  const [count, setCount] = useState(0);
  const [keyword, setKeyword] = useState('');
  const onClick = () => setCount((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);

  useEffect(() => {
    console.log('i run only Once!');
  }, []);
  useEffect(() => {
    console.log('i run only click.');
  }, [count]);
  useEffect(() => {
    console.log('i run keyword');
  }, [keyword]);
  useEffect(() => {
    console.log('i run keyword & click');
  }, [count, keyword]);
  return (
    <div className='App'>
      <input type='text' onChange={onChange} value={keyword} />
      <h1>{count}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

export default App;

첫 마운트시 모든 useEffect가 실행된다

click 만 했을때의 useEffect

input만 했을때의 useEffect