02. React State

thinking in React - ui상태의 표현을 찾아라 - 상태를 찾자는 거죠. 어ㅣ디에 있게 할 건지 결정해라. 그다음에 데이터flow 를 넣어라..

• React state란? 변경을 다루기 위한 요소 데이터가 있다고 해서 다 되는 것은 아님 - 리렌더링되어야하는 요소가 뭐냐상태가 바뀌면 하위에 있는게 다 바뀐다... 일관성 이런것들을 위해서도..

• DRY 원칙 Don't Repeat Yourself

컴포넌트를 만들 때마다 카테고리를 그냥 넣지 ㅇ않고(하드코딩) 필터를 써서 '만들어' 냈잖슴 항상 다시 그려야할 때마다 중복으로 갖고있는 거잖아요 데이터를 그럼 틀릴 수도 있는거예요 그래서 DRY하게 만들라는 거예요

• SSOT (Single Source of Truth) ( 단일 진실 공급원)

• 변경되지 않으면 상태 아님

• 계산 가능하면 상태 아님

• 부모 컴포넌트가 props로 전달한다면 상태 아님

상태가 너무 많으면 복잡합니다. 직접 관리하는 상태의 수를 줄여줄 수 있습니다. Props로 전달해줄 때 type을 잘 정의해놓으면 복잡해져도 정리가 잘 되게 할 수 있음..

• 상태의 관리주체 검색어, 체크박스, 바뀌는데 그럼 이걸 누가 관리하면 좋을까요?? 입력해요. 타이핑막 해요. 체크박스를 온오프해요. 컴포넌트로 가봐요.

• ?! props, state 변경에 따라 또다른 state를 변경해줘야 할 때, useEffect를 사용하지 마라?!?!?!?!? 나 계속 썼는데 상태변경이 일어나면 리액트는 변경사항을 버츄얼돔에 저장하고, 그 이후에 ui를 업데이트함니다. 이 두 과정이 상태변경이 일어날 때마다 발생하는데, 상태변경을 2, 3번 하면 2**n 번 수행될 거아닙니까! 상태가 변하면 그와 관련된 모-든 ui요소가 리렌더링 되므로, 다른 변수에 활용하여 저장해줘야합니다!!! 그런데 이 활용과정에서 비싼 연산이 포함된다면, useMemo를 사용해주세요.

• useState

• 1급 객체(first-class object)란?

• Lifting State Up

리액트가 아닌 ㄴ곳에서 상태를 관리하기