React useEffect

# 6.0 ~ # 6.2 useEffect

버튼 누를때마다 숫자 올라가는 App()

import { useState } from "react";
function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((prev) => prev + 1);
  return (
    <div>
    <h1>{counter}</h1>
    <button onClick={onClick}>Click Me</button>
    </div>
  );
}

useState를 사용하면 어떤 state가 변하든 컴포넌트의 모든 코드가 리렌더링됨
✍ 컴포넌트가 맨 처음 render될 때만 코드가 실행되고 state가 업데이트 될 때는 실행되지 않기를 원한다면?

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((prev) => prev + 1);
  console.log('i run all the time');
  const iRunOnlyOnce = () => {
    console.log('i run only once');
  }
  useEffect(iRunOnlyOnce, []);
  // useEffect(() => console.log('i run only once'), []);
  return (
    <div>
    <h1>{counter}</h1>
    <button onClick={onClick}>Click Me</button>
    </div>
  );
}

• useEffect(function, []); 첫 번째 파라미터는 실행시킬 함수, 두 번째 파라미터(배열)는 확인할 값
• 확인할 값이 빈 배열일 경우 해당 함수는 컴포넌트가 처음 렌더링 될 때만 실행됨
  *state 초기값 0으로 설정해줘야 NaN 안뜬다..

# 6.3 dependencies(deps)

✍ 특정한 state가 변할때만 원하는 코드가 실행되도록 하려면?

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState('');
  const onClick = () => setCounter((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);
  useEffect(() => 
    console.log('i run only once'), []);
    useEffect(() => { if(keyword !== '' && keyword.length > 3) {
      console.log('search for', keyword)
    }
    }, [keyword]);
    useEffect(() => {
      console.log('i run when counter changes')}, [counter]);
  return (
    <div>
      <input 
      value={keyword} 
      onChange={onChange} 
      type="text" 
      placeholder="Search Here" />
    <h1>{counter}</h1>
    <button onClick={onClick}>Click Me</button>
    </div>
  );
}

• useEffect(() => { console.log('i run when counter changes')}, [counter]); 의 두 번째 파라미터인 counter 값이 변경될 때마다 함수가 실행됨
• 첫 번째 파라미터로 () => { if(keyword !== '' && keyword.length > 3) {console.log('search for', keyword) } 처럼 조건문 넣기도 가능
• 두 번째 파라미터에 [keyword, counter] 처럼 item이 두 개 이상 있을 때는 한 item만 변경되어도 코드 실행 (OR의 개념?)

📌 사용자의 조작에 따라 실행시킬 코드를 분리 가능!

# 6.4 Cleanup

✍ 컴포넌트가 없어질 때 실행하고 싶은 코드가 있다면?

function Hello(){
  useEffect(() => {
    console.log("hi!);
  return console.log("bye!");
  }, []);
  return <h1>Hello</h1>
}
function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);
  return (
    <div>
      {showing ? <Hello /> : null }
    <button onClick={onClick}>{showing? 'Hide' : 'Show'}</button>
    </div>
  );
}

• Hello()는 <h1>을 반환하는 함수
• useEffect의 첫 번째 파라미터에서 return 하는 함수는 <Hello /> 컴포넌트가 사라질 때마다 실행됨

---

(사담)
최근에 예스24에서 2022 젊은 작가 투표했을 때 투표를 완료해도 위의 이벤트 배너 부분은 다시 로드되지 않고 아래 화면만 투표 현황으로 바뀌는 페이지를 보고 이 기능이 생각나서 뒤늦게나마 정리해서 업로드,,