🤔 State가 뭐지?
리액트가 존재하는 이유라고 해도 좋다.
기존 JavaScript에선 변수 등이 변하더라도 UI가 바로 변하지 않았다
document.getElementById().innerHTML 등을 이용하여 UI에 보여지곤 하였다.
값이 바뀌면 자동으로 UI도 바뀌면 안 되나?🤔
해서 사용되어지는 것이 바로 리액트의 State이다.
값의 변화에 reaction 한다고 해서 리액트라고 불린다고 생각해도 좋다.
변수가 바뀔 때마다 UI를 다시 그려주는 작업 즉 DOM 작업은 프로젝트 성능에 과부화를 주기 쉽다.
그래서 State를 이용하여 State가 변화하면 UI가 변하게끔 개발을 하는 것이 좋다.
리액트가 기본 제공하는 useState를 이용하여 커스텀 훅을 만들어준다.
그리고 변수와 state 둘 모두를 출력해보면
변수는 변함이 없고 state만 정상적으로 증감하여 콘솔에 출력이 되어지는 것을 볼 수 있다.
state가 바뀌면 UI가 다시 렌더링되어진다.
하지만 바로 작업과 동시에 바뀌는 게 아니라 비동기적으로 바뀌어지게 된다.
state를 바꾸는 함수를 모아놨다가 함수가 끝나면 차근차근 실행하게 된다.
📖 리렌더링이 되어진다 = 컴포넌트를 다시 실행한다.
화면을 리렌더링 한다는 것은 컴포넌트를 다시 실행한다는 의미와 같다
그래서 state가 아닌 단순 함수로 설정한 counter 같은 변수들은 컴포넌트가 다시 실행되어짐과 동시에 초기화되어서
실질적인 증감이 이루어지지 않는 것이다.
state는 초기화가 되어지지 않는다.
버튼을 클릭시 counter + 1 이란 동작이 실행되고
setCount() 가 호출되고 console.log가 실행되어진다.
변수값은 1 로 증가하였지만 state는 아직 변하지 않았기 때문에 그전 값이 보인다
여기서 함수가 종료되어지고 App 이 다시 리렌더링이 되어진다.
state값은 update되어지면서 다시 렌더링 되어진다.
하지만 변수값은 다시 초기화되어지기때문에 1로 보여지는 것이다.
결론은 👏
잠깐 사용해야 할 값은 변수로 계속 사용해야할 값들은 State로 설정하는 것이 바람직하다.
