클린코드 리액트 state

리액트 설치

Vite개발황경에서 진행 

yarn create vite ${폴더명} --template react

이전에는 Create React App 을 이용해서 리액트를 설치했었는데 2021-12-14이후로 업데이트 되고있지 않으며 웹팩의 결속력이 강하고 커스텀도 강하며 엣날 환경이기 때문에 느리다.

 

 

State

상태란?
사물이나 현상이 놓여있는 모양이나 형편
컴포넌트 상태, 전역 상태, 서버 상태(ex: TanStack Query), 상태 변경, 상태 최적화, 렌더링 최적화, 불변성, 상태 관리자

 

올바른 초기값 설정

초기값을 넣지 않으면 undefined가 된다. 

 

업데이트가 되지 않는 값

이경우에는 리액트 컴포넌트 내부에 있기 때문에 매번 렌더링 될때마다 같은 값이더라도 또다시 참조에 대해서 트리거하고 계산해야될 시기등이 들어가있지않다 그러다보니 불필요하게 참조하고 물고있는게 된다.

 

해결방법 : 아예 외부로 내보낸다. 

jsx내부에서 참고하고 있더라도 한파일내에 있기때문에 쉽게 참조가 가능하고 컴포넌트가 다시 마운트되고 참조되고 하더라도 INFO를 바라보는 참조는 동일하게 변치 않기 때문에 업데이트 되지 않는 상수나 고유한 값들은 외부에 내보내는게 되도록 좋다. 

 

불필요한 상태

complUserList에서 내가 필요한 값만 필터로 걸러서 그걸 다시 setUserList에 넣어줬는데 

이렇게 상태를 사용하지 않고 바로 변수로 빼서 사용하게되면 불필요하게 상태를 사용하지 않아도 된다. 

이렇게되면 렌더링 마다 고유의 값을 가지는 계산된 값이 된다. 

 

연관된 상태 단순화하기

복잡할수록 단순하게 : KISS(Keep It Simple Stupid)

위웨처럼 로딩, 피니쉬, 에러를 스테이트로 하나씩 만드는게 아닌

하나의 스테이트로 사용할 수 있다. 

도미노와 비슷한 상태들은 묶어서 사용할 수 있는걸 항상 생각해야 한다. 

 

---

 

객체 스테이트를 만들어서 해당 상태에서 하나만 변경하고 싶다면 나머지는 그대로 가지고가고 원하는 값만 변경해 줄 수 있다.

 

무의미한 state를 안만드는게 좋고 1 = 1 로 만들필요가 없고 하나의 state가 변경되면 다른 스테이트도 변경된다고하면 묶어주는 방법을 생각하는게 좋다.