State를 언제쓸까?

State란?

state는 일반 객체인데 랜더링 결과물에 영향을 주는 정보를 가지고 있다. 이 state는 컴포넌트 안에서 관리된다.

React 공식문서에서 정의한 State이다.

여기서 짚고 넘어가야할 부분은 '랜더링 결과물에 영향을 주는 정보' 부분이라 생각한다.
즉, 랜더링 결과물에 영향을 줄수 있는 동적인 정보라는 뜻이다.
나는 이전에 그냥 화면에 보이는 데이터들을 모두 state로써 useState를 사용하여 하는 구나 싶었다. 그런데 리액트의 하나의 컨셉인 state가 업데이트되면 그에 맞게 컴포넌트도 업데이트 즉, 리랜더링이 일어난다. 그 뜻은 state는 변경이 일어날수있어야한다는 뜻이다. 정적인 값을 state로 정의할 필요없다는 의미이다.
즉, 동적인 값을 state로 정의하여야한다.

무지하였을 때 사용하던 state사용

진행하던 프로젝트중에 강의평 작성하는 부분을 맞아서 개발을 하였다.
나에게는 첫 개발이기도했고 리액트도 익숙치않았던 나에겐 상, 중, 하, 팀플, 레포트, 토론, 퀴즈 이런 데이터가 모두 UI에 보여지기 때문에 state를 단순히 UI표기를 위한 데이터로만 알고있었음.. 배열로써 state로 정의하면 어떨까란 생각을 했다. 그래서 const [review, setReview] = useState([ { id: 1, value: '상', selected: true }, { id: 2, value: '중', selected: false }, { id: 3, value: '하' selected: false }, ]); 로 state를 정의했고 다른 값이 클릭될때마다 map함수를 이용해서 배열을 리턴했다. (불변성 지키려고)(상 중 하 이러한 버튼들은 모두 하나의 컴포넌트들로 정의함..)

이렇게 나는 아무 문제없다 생각하였고 코드 리뷰를 받았는데
다른 리뷰 값을 선택한다면 다시 배열을 랜더링해야하며 좋지 않다는 리뷰를 받았다.
이때 나는 문제가 없다생각해서 굉장히 의아해서 state에 대한 정의를 찾았고 state는 랜더링 결과물에 영향을 주는 정보로써 동적인 값에 대한 값을 정의하는 오브젝트라는 것을 알게 되었다.

변경된 코드

그래서 변경한 코드는 컴포넌트 밖에 상 중 하 정보를 가지고있는 배열을 정의하였고 (상 중 하에 대한 내용은 동적이지않고 항상 정적으로 사용자에게 같은 내용을 표시해줌) 선택된 값에대해서만 state로 정의하였다.

const [selectedReview, setSelectedReview] = useState(1); 이런식으로 말이다.

이러니 훨씬 깔끔했고 selectedReview라는 state가 primitive type인 number이라 setState할때도 간단하고 쉬웠다.

느낀점

• State는 랜더링 결과물에 영향을 주는 정보이며 동적인 값이라는 것. UI에 보인다고 아무 데이터나 state로 사용하지 말자.