[Codestates] 2021. 6. 28~9

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

React 데이터 흐름

• React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.
• 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.
  언제든지 변할 수 있는 값
• State 끌어올리기의 개념을 이해할 수 있다.
  • 상태 변경 함수가 정의된 컴포넌트와, 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.
    상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다

Effect Hook

• Side effect가 어떤 의미인지 알 수 있다.
  부수 효과, 함수 내부의 상황이 함수 외부에 영향을 끼치는 현상
• React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)
  • Side effect의 예를 들 수 있다.
• Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
  useEffect 를 사용한다.
• Effect Hook에서의 dependency array 사용법을 이해할 수 있다.
  2번째 인자, 이 인자가 변경될 경우에만 Effect Hook 이 실행된다.
• 컴포넌트 내에서 네트워크 요청시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.
  state로 loading 상태를 만들고, fetch 전후에 설정한다.

기타

• git restore . : 전체 파일을 맨 처음 상태로 되돌리기