TIL - 2021.08.02

TIL 1일차 👨‍💻

데이터 흐름의 이해와 비동기 요청 처리

Before You Learn

• 서버에서 정의한 API문서를 통해, 서버가 제공하는 리소스를 이용할수 있다.
  •   API테스팅 툴 Postman을 이용할 수 있다.
• AJAX통신을 가능하게 하는 fetch API를 이용할수 있다.
• UI를 구성하고, 컴포넌트를 분리할 수 있다.
• React의 props와 state 개념을 이해할 수 있다.
• 무엇을 React state(상태)로 두어야 하는지 알 수 있다.

Achievement Goals

React 데이터 흐름

• React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.
• 어떤 컴포넌트에 state가 위치해야 하는지 알수 있다.
• State 끌어올리기의 개념을 이해할수 있다.
  •   상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알수 있다.
    
    

React 데이터 흐름

• React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작됨.

• 앱의 프로토타입을 전달받았다면 먼저 컴포넌트를 찾고 그 컴포넌트를 기반으로 페이지를 조립해나가보자.

• 상향식(bootom-up)으로 앱을 만듬.

• 장점은 테스트가 쉽다.

• 기획자나 PM,또는 UX디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것을 먼저 해야함.

• 하나의 컴포넌트는 한가지 일만 한다.

• 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자(arguments)혹은 속성(attributes)처럼 전달받을 수 있다. 즉, 데이터를 전달하는 주체는 부모 컴포넌트가 됨.

• 이 데이터 흐름이 하향식(top-down)임을 의미함.

• 이 원칙이 얼마나 중요하냐면, 단방향 데이터 흐름(one-way data flow)이라는 키워드가 React를 대표하는 설명중 하나일 정도이기 때문에

• 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다.

• 모든 데이터를 상태로 둘필요는 없지만 상태를 최소화하는것은 좋다.

• 상태가 많아질수록 애플리케이션은 복잡해지기 때문에

• 어떤 데이터를 상태로 두어야 하는지 여부는 다음 세가지 질문을 통해 판단해보자
  
  

  •   부모로부터 props를 통해 전달됩니까? 그러면 확실히 state가 아니에요.
  •   시간이 지나도 변하지 않나? 그럼 확실히 state가 아니구요.
  •   컴포넌트 안의 다른 state나 props를 가지고 계산이 가능한가? 그렇다면 state가 아닙니다.
    
    

상태를 어디에 위치시켜야 하는가?

• 상태가 특정 컴포넌트에서만 유의미하다면, 특정 컴포넌트에만 두면 됨.
• 허나 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 이 때에는 공통 소유 컴포넌트를 찾아 그 곳에 상태를 위치해야 함.
• 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치해야 한다는것.
• 리액트는 단방향 데이터 흐름을 갖고 있다고 했다. 그런데, 갑자기 왠 역방향 데이터 흐름이라는 이야기가 나올까?
  상태 위치를 전부 정하고 나서 생각해보니, 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변하는 것을 발견할 수 있을 것이다.
• 하위 컴포넌트(NewTweetForm)에서의 클릭 이벤트가, 부모의 상태를 바꾸어야만 하는 상황이 왔다면, 이를 어떻게 해결할 수 있을까?
• 이를 해결할 수 있는 키워드가 바로 "State 끌어올리기(Lifting state up)" 이다.
  결론부터 말하자면, 이는 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결할 수 있다고 함.
• 이는 마치 콜백 함수를 사용하는 방법과 비슷하다.

State 끌어올리기 (Lifting State Up)

상태 끌어올리기

• 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있음. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지까지는 모름.

• 그렇기에 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"과 같이 조금 이상하게 들릴 수 있음.

React가 제시하는 해결책은 다음과 같습니다.

• 상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다. 여전히 단방향 데이터 흐름에 원칙에 부합하는 해결방법 이것이 바로 "상태 끌어올리기"이다.

내일 봐야하는 목록

Effect Hook
StatesAirline Client (2)
해설 강의