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

Before You Learn

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

Achievement Goals

React 데이터 흐름

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

Effect Hook

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

 

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

즉 상향식으로 앱을 만든다. 데이터 흐름은 하향식이다. top-down

 

React의 공식문서에서 주요 개념에 대해 잘 작성되어 있으므로 읽어볼 필요가 있다.

React 공식 문서의 주요 개념

 

 

Side Effect에서 알아야 할 키워드

• 순수함수
• 타이머 사용 (setTimeout)
• 데이터 가져오기 (fetch API, localStorage)

useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook 이다.

Hook을 쓸 때 주의할 점

• 최상위에서만 Hook을 호출.
• React 함수 내에서 Hook을 호출

useEffect의 두 번째 인자는 배열다. 이 배열은 조건을 담고 있다. 여기서 조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미한다. 따라서, 해당 배열엔 어떤 값의 목록이 들어간다. 이 배열을 특별히 종속성 배열이라고 부른다.

 

useEffect(함수, [종속성1, 종속성2, ...])

useEffect의 두 번째 인자는 종속성 배열이다. 배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행된다.

 

단 한번만 실행되는 Effect 함수

만일 종속성 목록에 아무런 종속성도 없다면 어떤 일이 발생할까? 달리 말해, 두 번째 배열을 빈 배열[]로 둘 경우에는 무슨일이 발생할까? 두 번째 인자를 아예 안넘기는 것과 어떻게 다를까?

1. 빈 배열 넣기

useEffect(함수, [])

2. 아무것도 넣지 않기 (기본 형태)

useEffect(함수)

(2번) 기본 형태의 useEffect는 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태(state)가 업데이트될 때 effect 함수가 실행됨을 앞서 배웠다.

반면에 (1번) 빈 배열을 useEffect의 두 번째 인자로 사용하면, 이 때에는 컴포넌트가 처음 생성될때만 effect 함수가 실행된다. 이것이 언제 필요할까? 대표적으로 처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 때에 사용할 수 있다.

 

 

컴포넌트 내에서 AJAX 요청

컴포넌트 내부에서 처리	HTTP 요청의 빈도를 줄일 수 있다	브라우저(클라이언트)의 메모리 상에 많은 데이터를 갖게 되므로, 클라이언트의 부담이 늘어난다
컴포넌트 외부에서 처리	클라이언트가 필터링 구현을 생각하지 않아도 된다	빈번한 HTTP 요청이 일어나게 되며, 서버가 필터링을 처리하므로 서버가 부담을 가져간다

 

Self Guided Lessons

실무에서는, 서버의 부담과 클라이언트의 부담이 적절하게 분배된 애플리케이션 구조를 가지게 된다. 이러한 내용에 대해 궁금하다면, 다음 내용을 공부해보는 것도 좋다.

클라이언트가 서버에 요청을 덜 보내는 방법

• Throttle a series of fetch requests in JavaScript
• throttle과 debounce

서버가 클라이언트에게 돌려줄 응답을 캐싱하는 방법

HTTP 및 서버 구현에 대한 이해가 필요하다.

• HTTP caching