1. State란 ?

컴포넌트 내에서 동적으로 변할 수 있는 값들을 관리하는 역할을 합니다.

리액트 state를 통해 데이터를 동적으로 관리하며, state의 변화를 감지하여 렌더링하게 됩니다.

state는 직접 변경할 수 없고 반드시 setState 메소드를 통해 변경해야 합니다.

state의 불변성 유지

리액트의 state는 불변성을 유지해야합니다.

불변성이란, 데이터가 한번 생성된 후에는 그 값을 바꿀 수 없다는 것을 의미합니다.

리액트에서는 기존의 state를 직접 수정하거나 변경하는 것이 아니라 새로운 state를 생성하여 변경된 부분만 업데이트하여 불변성을 유지해야합니다.

이를 위해 리액트에서는 useState hook를 사용하여 state를 업데이트하고 불변성을 유지합니다.

불변성을 유지해야하는 이유

1 ) 성능 최적화 : 리액트는 state가 변경되었는지 판단하기 위해 이전 state와 현재 state를 비교합니다. 이때 불변성을 유지하면 객체의 참조값만 비교하므로 성능 최적화에 도움이 됩니다.

2 ) 재사용성 : 불변 데이터는 원본 데이터가 변경되지 않으므로 안전하게 재사용할 수 있습니다.

3 ) 코드 예측성 : 불변성을 유지하면 state 변화를 더 쉽게 추적하고 이해할 수 있습니다. 이는 디버깅과 코드 테스트에 유리합니다.

2. useState 란?

리액트 hook 중 하나로서, 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 함수입니다.

hook : 리액트의 훅은 16.8 버전부터 새로 추가된 기능으로, Hook은 함수형 컴포넌트에서 React state와 **생명주기 기능(lifecycle features)**을 연동(hook into) 할 수 있게 해주는 함수입니다.