React로 앱 설계하기

1. 목업(Mock-Up) 만들기
2. 목업에서 컴포넌트 지정하고 계층 구조 정리하기
3. 계층 구조에 따라 State없는 정적인 컴포넌트 코딩하기
4. 최소한의 State만 찾아내기 (간단한 가공으로 계산될 수 있는 것은 별도의 State로 설정X!)
5. State 기반으로 렌더링하는 컴포넌트 모두 찾아내기
6. 공통의 부모 컴포넌트가 State 소유하도록 하기
7. State 필요한 컴포넌트들에 props로 내려주기
8. 사용자의 입력에 따라 State가 달라질 수 있도록 setState 메소드도 props로 내려주기

Props vs. State

Props와 State 모두 JS 객체이다.

하지만 Props는 다른 컴포넌트에 전달이 되지만, State는 컴포넌트 내부적으로 관리된다.
다른 컴포넌트에서 State를 사용하고 있다면 Props에 State를 담아서 전달하면 된다.

Props는 변하지 않는 객체 즉, Read-Only이지만
State는 사용자의 선택에 따라 동적으로 변하는 객체이다.

Side Effect

함수의 입력외에도 함수의 결과에 영향을 미치는 요인 (대표적으로 네트워크 요청 such as fetch)

Ex) 데이터를 서버에서 불러오기 위해 fetch(url) 요청을 했는데 대용량의 데이터를 불러오는데 5초의 시간이 걸린다면, 화면에는 5초 동안 멈춰있는 것처럼 보이는 상태가 된다. Bad UX를 사용자에게 주게 될 것이다. 이 때문에 Loading 창이 필요하다!

! 기본 리액트 개념은 어느 정도 파악이 된 것 같다. 조만간 React Hook을 이용해서 좀 더 편하게 리액트를 다룰 수 있게 될 예정이다.