[React] useState 는 왜 직접 값을 넣지 않을까 ?

useState ?

• React 사용하다보면 가장 많이 쓰는 상태를 의미하는 메서드
• 항상 선언을 [변수 , set변수] = useState() 형태를 띔

예시 코드

const [member, setMember] = useState(0);

const num = ['1','2','3'];
if(num.length === 3) {
    setMember(3)
}
else {
  setMember(0)
}

굳이 set ?

위의 코드를 보면 setMember 를 통해 member 는 3의 값을 가지게 되는데 사실 바로 member 에 적용하면 되는데 왜 그러는걸까 ?

기본적으로 react는 set을 통해 변화를 감지하는데 set을 통해 변화를 감지하게 되면 렌더링을 진행하여 화면을 업데이트 시켜준다

직접 member = 3; 이렇게 하게 되면 값 자체는 변수에 들어 갈 수 있지만 react는 변화를 감지하지 못한다 ...

아파트 복도 전등을 직접 키는게 아닌 아파트 센서등을 통해 키는 것 처럼

set을 통해 값의 변화 감지 > 화면 렌더링 (센서등 움직임 감지 > 전등 킴)
결국 직접 값을 넣어주면 센서등이 없기 때문에 전등은 켜지지 않는다

왜 그렇게 만들어졌을까 ?

React의 핵심은 상태(State)에 따른 UI의 변화이므로 상태 변화를 받는 set 을 추가로 선언하는 구조이다
실시간으로 데이터가 변하는 주식화면 같은 경우에서 리액트가 강한 이유 또한 이러한 이유이다