< UseState >

✅ 함수형 업데이트

setState에 수정할 값이 아니라 함수를 넣음
그 함수의 인자에서는 현재의 state를 가져올 수 있고, { }안에서는 이 값(현재 state)을 변경하는 코드를 작성할 수 있음

// 기존에 우리가 사용하던 방식
setState(number + 1);

// 함수형 업데이트 
setState(() => {});

✔ 두 방식의 차이점

// 기존 방식
// 결과는 number : 3을 예상하지만 number : 1 임
const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 플러스 됨 */}
      <div>{number}</div> 
      <button
        onClick={() => {
          setNumber(number + 1); 
          setNumber(number + 1); 
          setNumber(number + 1); 
        }}
      >
        버튼
      </button>
    </div>
  );
}

// 함수형 업데이트
// 결과 : number : 3 
const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 플러스 됨 */}
      <div>{number}</div>
      <button
        onClick={() => {
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
        }}
      >
        버튼
      </button>
    </div>
  );
}

• 기존 방식은 setNumber가 각각 실행되는 것이 아니라 배치(batch)로 처리됨
  (=즉, onClick을 했을 때 setNumber 명령은 세 번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한 번만 실행)

• 함수형 업데이트 방식은 3번을 동시에 명령을 내리면 그 명령을 모아 순차적으로 각각 한 번씩 실행 (1+1+1)

✔ 왜 이렇게 만들었을까?

• 💡 불필요한 리렌더링 방지(렌더링 최적화)를 위해 한꺼번에 state를 업데이트 함

---

< UseEffect >

✅ 언제 사용할까?

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

• 어떤 컴포넌트가
  • 화면에 보여졌을 때 (mount)
  • 특정 데이터가 변했을 때 (update)
  • 사라졌을 때 (unmount)

✅ 의존성 배열

의존성 배열에 값을 넣으면 그 값이 바뀔 때마다 useEffect를 실행함

• 빈 배열이면? 처음 렌더링 될 때 한 번만
• 값이 있는 경우? 해당 값이 변할 때마다 실행

useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

✔ Clean Up

컴포넌트가 사라졌을 때 어떤 작업을 수행하고 싶다면? useEffect 내부 return 에 함수로 사용

useEffect(()=>{
	// 실행하고 싶은 함수
  console.log('실행하고싶음')
  // clean up
  return () => { console.log('사라지기 전에 이거함') }
  
}, [의존성배열])