state변경시, 왜 setState,useState를 사용하나요?

😏 state란 무엇인가?

• SPA를 사용하고 싶다면 state를 사용하여 state 변경이 일어날시에 DOM을 재렌더링해준다
• state는 리액트에서 일반변수와 다르게 상태(값)이 변하면 연관있는 컴포넌트들이 재렌더링을 일으킨다
• 컴포넌트 내 변경 가능한 데이터 저장소이며 UI에 반영하기 위해 유지해야할 값 묶음이다.

=> state는 props와 같이 렌더링에 영향을 주는 데이터를 가진 객체이고, 컴포넌트 안에서 관리된다

😏 setState란 무엇인가?

• setState를 변경할 때 사용하는 함수
• state를 직접 변경하게 되면 배열과 객체의 경우 같은 주소값을 참조하기에 재렌더링이 일어나지 않는다
• 비동기적으로 동작한다

const Test = () => {
   const [count, setCount] = useState(1)
   
  useEffect(() => {
    setCount(count + 1);
    setCount((count) => count + 1)
    setCount(count + 1);
    setCount((count) => count + 1)
    setCount(count + 1);
    setCount((count) => count + 1)
  }, [])
//결과 : 3
  const [count1, setCount1] = useState(1);
  useEffect(()=>{
    setCount1(count1 + 1);
    setCount1(count1 + 1);
    setCount1(count1 + 1);
  },[])
  //결과 : 1
  const [count2, setCount2] = useState(1);
  useEffect(()=>{
    setCount2(prev=> prev + 1);
    setCount2(prev=> prev + 1);
    setCount2(prev=> prev + 1);
  }, [])
  //결과: 3


  return (
    <div className='headerStyle'>
      count: {count}
      <br/>
      count1: {count1}
      <br/>
      count2: {count2}
    </div>
  )
 }

• React는 setState를 킵해두고 다른 코드들을 처리후 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트한다
• callback함수를 쓰지 않는다면(setCount2(prev=> prev + 1))===updater함수 많은 리렌더링을 줄이고자 배치(Batch) 기능을 사용하여 마지막 한번만 적용된다
• updater함수를 쓰면 동기적인 처리가 가능하다

😏 useState를 왜 쓰는가?

• state의 저장방식이 객체이기에 같은 참조값을 바라보면 React에서는 변화에 대한 감지를 할 수 없다
• 그렇기에 useState의 setState를 사용하여 직접 변경하지 않고 새로운 객체를 만들어(깊은 복사) 변경하여 비교&감지한다. 그 후 재랜더링이 일어난다

---

출처 :https://velog.io/@devmag/React-state-%EB%B3%80%EA%B2%BD-%EC%8B%9C-%EC%99%9C-useState-setState%EB%A5%BC-%EC%93%B0%EB%8A%94%EA%B0%80
https://rinrin-dev.tistory.com/93
https://velog.io/@win/useEffect%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC2
https://velog.io/@wjdcksdud29/React-setState-useState%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-TIL-53