state에 대해 공부하면서 어떤걸 state로 올리고, 또 공유 해야 하는 경우 어느정도의 상위 컴포넌트로 올려서 써야하는지 판단이 어려웠던 참에, 아름다운 공식문서가 있어 아카이빙합니다
애플리케이션을 올바르게 만들기 위해서는 애플리케이션에서 필요로 하는 변경 가능한 state의 최소 집합을 생각해보아야 합니다. 여기서 핵심은 중복배제의 원칙입니다. 애플리케이션이 필요로 하는 가장 최소한의 state를 찾고 이를 통해 나머지 모든 것들이 필요에 따라 그때그때 계산되도록 만드세요.
예를 들어 TODO 리스트를 만든다고 하면, TODO 아이템을 저장하는 배열만 유지하고 TODO 아이템의 개수를 표현하는 state를 별도로 만들지 마세요. TODO 갯수를 렌더링해야한다면 TODO 아이템 배열의 길이를 가져오면 됩니다.
<판단기준>
부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.
기억하세요: React는 항상 컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름을 따릅니다. 어떤 컴포넌트가 어떤 state를 가져야 하는 지 바로 결정하기 어려울 수 있습니다. 많은 초보자가 이 부분을 가장 어려워합니다. 아래 과정을 따라 결정해 보세요.
애플리케이션이 가지는 각각의 state에 대해서
- state를 기반으로 렌더링하는 모든 컴포넌트를 찾으세요.
- 공통 소유 컴포넌트 (common owner component)를 찾으세요. (계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트).
- 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 합니다.
- state를 소유할 적절한 컴포넌트를 찾지 못하였다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 소유 컴포넌트의 상위 계층에 추가하세요.
> 나는, 엑셀에다가 컴포넌트 관계를 계층별로 쌓아놓고 필요할때 꺼내보니까 편했다
역방향 데이터 흐름
그런데 생각해보면, input에서 데이터를 받아와서 그것을 저장, 더 상위컴포넌트에서 사용해야 하는 하위->상위의 역방향 데이터 흐름도 있을 수가 있다.
NewPost에서 작성한 form을 저장한후 PostList에서 불러다가 사용해야 하는 경우같은.. 저장한다는것은 state를 변경하는 건데, 저장하는 컴포넌트와 사용해야할 컴포넌트가 다르면 어떻게 해야하는지 ! 이번에 수강한 강의에서는 라우팅을 썼기때문에 NewPost 컴포넌트에서, 작성한데이터들을 react-router-dom 에서 제공하는 <Form>컴포넌트를 이용했는데,
Form은 자신이 가지고있는 라우터의 action 프로퍼티를 호출하므로, NewPost를 가지고 있는 라우터, 즉
main.jsx의 createBrowserRouter 으로 설정하는 객체에서 element로 <NewPost />를 가지고 있는! 그 설정객체의 ! action 프로퍼티를 찾아서! 프로퍼티의 값(함수) 를 실행한다.
그러니, 라우터에서 action 프로퍼티에 form 데이터를 데이터로 변환해주는 action 함수를 작성해주고, fetch까지 해준뒤
redirect로 응답객체를 원하는 라우터에다 연결해주면 데이터 객체를 전달할 수 있는것이다.....!
이렇게 역방향으로 데이터 흐름을 제어해야 할때, 라우터 패키지 없이는 state를 한 없이 상위로 올려서 처음 코드를 작성할때는 App() 에 모든 기능이 들어있는 장관이 펼쳐졌지만, 패키지들의 도움으로 간결하고 깔끔하게, 중복제거와 단일책임으로 코드를 작성 할 수 있다는 점.
'리액트' 카테고리의 다른 글
| Fetch API (0) | 2023.05.24 |
|---|---|
| React :: useNavigate loader (0) | 2023.05.24 |
| React 004 : 라우팅 (1) | 2023.05.22 |
| React 003 : useEffect (0) | 2023.05.22 |
| React 002 (0) | 2023.05.17 |