지금하고 있는 스프린트 과제를 할 때는 백지상태서 코딩을 하는게 아니다. 코드스테이츠 측에서 구조(바깥 틀)를 먼저 짠 상태의 코드를 넘겨주고, 코드를 보면 왠만큼은 그 안에 컴포넌트들도 이미 쪼개져 있다.(라우팅 처리 & 부모컴포넌트 랜더링 파트 구현 등등)
여기서 내가 하는 건...
- 일단 각각의 컴포넌트들의 부모 자식 관계 파악
- 컴포넌트 내부에서 구현해야 할 기능 파악하고 코드 짜보기
- state/props 및 데이터 흐름 이해
리액트 과제를 5차례 정도 계속하다보니 이제는 나무만 보던 것을 넘어서서 숲을 보는 것을 다시 한 번 짚고 넘어가는게 좋겠다는 생각이 들었다.
기획자나 디자이너가 아래 목업 페이지를 툭 던져준다면?...
(출처: 코드스테이츠)
React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것이다.
개발자는 이것을 받고
- 컴포넌트 분리
- 어떤 것이 상태로 정의되어져야 하는지
- 그러한 상태는 몇 개인지?
- 컴포넌트가 서로 어떤 상태를 공유하고, 주고받는지?
등을 머릿속에서 그려내야 한다.
Side effect도 있다. Side effect는 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인"이다. 대표적으로 네트워크 요청, API 호출이 Side Effect이다.
상태의 두 가지 구분(전역상태 & 로컬상태)
로컬 상태는 특정 컴포넌트 안에서만 관리되는 상태이며, 전역 상태는 프로덕트 전체 혹은 여러가지 컴포넌트가 동시에 관리하는 상태를 말한다.
(출처: 코드스테이츠)
로컬상태를 구분하는 것은 쉽다(해당 컴포넌트 내에서만 영향을 끼침). 전역 상태는 다른 컴포넌트와 상태를 공유하고 영향을 끼치는 상태이다.
장바구니에 담긴 물품의 경우, 상품 선택 여부에 따라 총 주문 금액을 업데이트해야 한다. 장바구니에 담긴 물품은 그 갯수 등을 다른 컴포넌트에 전달해주어야 한다.
전역 상태에서의 데이터 무결성
데이터 무결성이란?
데이터의 정확성을 보장하기 위해, 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것이다
--> 서로 다른 컴포넌트가 동일한 상태를 다룰 때에는, 서로 다른 출처로부터 가져오는 것은 피해야 한다!
서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 합니다. 만일 사본이 있을 경우, 두 데이터는 서로 동기화(sync)하는 과정이 필요한데, 이렇게 되면 골치아파진다.. 한 곳에서만 상태를 저장하고 접근해야하고, 여기서 '하나의 출처'는 다른 말로 이야기하면 '전역 공간'이라고 볼 수 있다.
(이후에 배울 Redux는 전역 상태 저장소를 제공하는 역할을 한다)
React로 사고하기
React로 사고하기 --> 이 공식문서를 다시 한 번 뜯어보았다. 공식문서 내용 중 React로 어떠한 웹을 구현 일련의 과정을 아래와 같이 정리해보았다.
1. UI를 컴포넌트 계층 구조로 나누기(트리형태 그려보기)
2. React로 정적인 버전 만들기(컴포넌트 재사용과 props사용만으로)
3. UI state에 대한 최소한의 (하지만 완전한) 표현 찾아내기
어떤 게 state가 되어야 하는 지 살펴봅시다. 이는 각 데이터에 대해 아래의 세 가지 질문을 통해 결정할 수 있습니다.
1. 부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아닙니다.
2. 시간이 지나도 변하지 않나요? 그러면 확실히 state가 아닙니다.
3. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요? 그렇다면 state가 아닙니다.
4. State가 어디에 있어야 할 지 찾기
기억하세요: React는 항상 컴포넌트 계층구조를 따라 아래로 내려가는 단방향 데이터 흐름을 따릅니다.
애플리케이션이 가지는 각각의 state에 대해서
- state를 기반으로 렌더링하는 모든 컴포넌트를 찾으세요.
- 공통 소유 컴포넌트 (common owner component)를 찾으세요. (계층 구조 내에서 특정 state가 있어야 하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트).
- 공통 혹은 더 상위에 있는 컴포넌트가 state를 가져야 합니다.
- state를 소유할 적절한 컴포넌트를 찾지 못하였다면, state를 소유하는 컴포넌트를 하나 만들어서 공통 오너 컴포넌트의 상위 계층에 추가하세요.
5. 역방향 데이터 흐름 추가하기
ex. 자식컴포넌트에서 이벤트를 발생시켜 부모컴포넌트의 state에 변화를 주는 것...!
