Before You Learn

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

Achievement Goals

React 데이터 흐름

• React에서의 데이터 흐름, 단방향 데이터 흐름을 이해할 수 있다.
• 어떤 컴포넌트에 state가 위치해야 하는지 알 수 있다.
• **State 끌어올리기**의 개념을 이해할 수 있다.

  • 상태 변경 함수가 정의된 컴포넌트와

    → const [state, setState] = useState(초기화 값)

  • 상태 변경 함수를 호출하는 컴포넌트가 다름을 알 수 있다.

    → 이벤트가 일어나는 컴포넌트

Effect Hook

• **Side effect**가 어떤 의미인지 알 수 있다.
• React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)
  • Side effect의 예를 들 수 있다.
• Effect Hook을 이용해 **비동기 호출 및 AJAX 요청**과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
• Effect Hook에서의 **dependency array 사용법**을 이해할 수 있다.
• 컴포넌트 내에서 네트워크 요청시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.