React 데이터 흐름

• 리액트 개발 방식 = 컴포넌트 단위 개발
  • 페이지를 만들기 이전에 컴포넌트를 먼저 만들고 조립함
  • 상향식(buttom-up) 앱 개발 ➡️ 테스트가 쉽고 확장성이 좋음
• 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 속성처럼 전달받을 수 있다.
  • 즉, 데이터를 전달하는 주체는 부모 컴포넌트
  • 데이터 흐름은 하향식 (top-down) ‼️
• React는 단방향 데이터 흐름(One-way data flow)을 따른다.
• 컴포넌트는 props를 통해 전달받은 데이터가 어디에서 왔는지 알지 못한다.
• 상태 위치 정하기
  • 두 개의 서로 다른 컴포넌트가 특정 상태에 영향을 받는 경우?
    ➡️ 공통 소유 컴포넌트(공통의 부모)를 찾아 그 곳에 상태를 위치시켜야 한다.
• 역방향 데이터 흐름 추가
  • 부모 컴포넌트의 상태가 하위 컴포넌트에 의해 변하는 경우?
    ➡️ "State 끌어올리기" 로 해결
    ➡️ 상태를 변경시키는 함수(handler)를 하위 컴포넌트에 props로 전달해서 해결할 수 있다.

State 끌어올리기 (Lifting State Up)

React 공식문서 읽기
https://ko.reactjs.org/docs/lifting-state-up.html

Effect Hook

Side Effect(부수효과)

함수 내의 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다.

let foo = 'hello';

function bar() {
  foo = 'world';
}

bar(); // bar는 Side Effect를 발생시킨다

Pure Function (순수 함수)

• 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미
• 순수 함수는 입력으로 전달된 값을 수정하지 않는다.
  ➡️ 어떤 값이 전달되면, 항상 똑같은 값이 리턴됨 (예측 가능한 함수)
• 순수 함수에는 네트워크 요청과 같은 Side Effect가 없다.

function upper(str) {
  return str.toUpperCase(); // toUpperCase 메소드는 Immutable
}

upper('hello') // 'HELLO'

React의 함수 컴포넌트

React에서 컴포넌트를 렌더링할 때, 서버에서 값을 받아오는 경우(➡️ Side Effect),
컴포넌트의 라이프사이클 내에서 서버와 통신하게 되면 화면이 잠시 멈추는 등의 증상이 나타날 수 있다.
따라서 서버에서 값을 받아오는 작업은 라이프사이클에 영향을 주지 않는 방법으로 처리해야 한다.
컴포넌트 라이프사이클과 무관한 외부에서 비동기로 서버와 통신하고 컴포넌트 상태를 업데이트하는 Side Effect 개념이 필요한 것이다. 이 때 useEffect()가 가장 이상적인 해결방법이 된다.
useEffect는 React가 제공하는, Side Effect를 다루기 위한 Hook이다.

useEffect

useEffect(함수) ➡️ 기본 형태

useEffect의 첫번째 인자는 함수이다. 해당 함수 내에서 side effect를 실행하면 된다. 이 함수는

• 컴포넌트 생성 후 처음 화면에 렌더링될 때
• 컴포넌트에 새로운 props가 전달되며 렌더링될 때
• 컴포넌트의 상태(state)가 바뀌며 렌더링될 때

실행된다. 즉, 매번 컴포넌트가 새롭게 렌더링될 때마다 실행된다.

Hook을 쓸 때 주의할 점

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

조건부 실행

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

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

두번째 인자가 빈 배열이라면?

useEffect(함수, [])

이 때에는 컴포넌트가 처음 생성될 때만 함수가 실행된다.(한번만 실행)

❗️ 아무것도 넣지 않은 기본 형태인 경우 useEffect(함수)
앞서 적은 것처럼 컴포넌트가 렌더링될 때마다 함수가 실행된다.