상태란 ?
- 상태는 변하는 데이터
- 동적으로 표현되는 데이터
Side Effect 란 ?
함수의 입력 외에도 함수의 결과에 영향을 미치는 요인
대표적으로 네트워크 요청, API 호출등이 side effect이다
상태(컴포넌트)는 side effect없이 즉, 본연 그대로 작동이 되어야 한다
만약 컴포넌트를 만든다면, 컴포넌트는 side effect를 최대한 배제하고 컴포넌트를 만들어야 한다
즉, fetch와 같은 api 요청이 없어도 이 컴포넌트는 작동이 되어야 한다
어떤 데이터가 들어오는지 상관하지 않고, 컴포넌트는 표현(presentation) 그 자체에 집중 해야한다
이러한 컴포넌트를 presentation 컴포넌트라고 한다
불가피한 Side Effect 그리고 상태
엡을 만들다 보면 side effect는 불가피하게 생기기 마련이다
이러한 side effect에 의존적인 상태도 있을 수 있다
UI를 구성할 때에는 항상 이러한 상태도 고려하여하 한다
상태의 적절한 위치
React 공식문서 React로 사고하기
github react 공식문서 정리
1. 상태의 두가지 구분
로컬 - 특정 컴포넌트 안에서만 관리되는 상태
- 보통 컴포넌트 내에서만 영향을 끼치는 상태
- 다른 컴포넌트와 데이터를 공유하지 않는 폼(form)데이터
- ex) input box, select box, radio button
전역 - 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태(여러 컴포넌트가 동시에 관리하는)
- 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태
- 서로 다른 컴포넌트가 사용하는
상태의 종류가 다르면,서로 다른 출처(source)가 있어도 상관없다, 하지만 서로다른 컴포넌트가동일한 상태를 다룰 때에는,서로 다른 출처로부터 가져오는 것은 피애야 한다
(만약 사본이 있을경우, 두 데이터는 서로 동기화(sync)하는 과정이 필요한데, 이는 문제를 어렵게 만든다) - 여기서
하나의 출처는전역 공간이라고 볼 수 있다
데이터 무결성을 위해, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 오도록 한다
Single source of truth(신뢰할 수 있는 단일 출처) 원칙은 프론트엔트 뿐만 아니라 다양한 곳에서 언급되는 원칙 이다
데이터 무결성이란
데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 올바르게 유지하는 것
Single source of truth
동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다
전역 상태 관리
ex) 다크모드 기능, 국제화(사이트 언어변경)
히스토리 기능과 Undo/Redo
화면에 표시되는 모든 내용을 전부 상태 객체로 만들어서 저장해버린다면, 원하는 특정 상태를 바탕으로 컴포넌트를 표현할 수도 있다, 이것이 Undo/Redo, 히스토리 기능의 작동 원리다
상태 관리 라이브러리가 어떤 문제들을 해결해 주는가
1. 전역 상태를 위한 저장소를 제공한다
2. props drilling문제를 해결한다(전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 이러한 문제는 해결 될 것이다)
3.
props drilling이란
최상위 컴포넌트 A가 있다고 하자 A컴포넌트의 자식의 그 자식 컴포넌트인 I가 해당 상태를 사용한다라고 하면, I의 부모컴포넌트들을 걸쳐 A까지 props를 전달해줘야 한다
이것이 props drilling이다
"상태가 어디에 위치해야 하는지"를 먼저 익힌다
