BEB 07 5-2

1. React 데이터 흐름

1.1 React 에서의 데이터 흐름

리액트는 컴포넌트 단위로, 상향식으로 개발을 진행한다. 때문에 단위 테스트가 쉽고, 확장성이 좋다.
하나의 컴포넌트는 SRP에 따라 하나의 역할만을 수행하도록 설계한다.

리액트의 데이터 흐름은 폭포식 단방향이다. 데이터 흐름 설계시 어떤 데이터를 상태(state)로 관리하고, 상태를 어디에 배치할지 결정해야 한다.

특정 데이터를 상태로 관리할지 여부는 아래와 같이 결정 가능하다.

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

State 끌어올리기

하위 컴포넌트의 동작이 상위 컴포넌트에 위치한 상태값을 변경하는 경우가 있다.
이때는 상태를 변경시키는 함수를 하위 컴포넌트에 prop으로 전달하여 호출한다.

주의할 점은 하위 컴포넌트에 prop으로 전달되는 상태변경함수에 인자를 전달하는 방법이다.
예제 코드에서는 상태변경함수를 인자로 전달하기 전에 고차함수인 wrapper 함수로 감싸서 전달하면 깔끔하게 하위 컴포넌트에서 호출할 수 있다.

아래에서 handleChangeValue 함수가 wrapper함수이다. 자식 컴포넌트에서 호출시 parameter를 지정해 줘서, 원하는 값을 함수에 넣어서 호출할 수 있다. 특정 자식 컴포넌트에서만 활용하는 고차함수를 선언해서 손쉽게 파라미터를 상위 컴포넌트에 위치한 상태변경함수에 전달할 수 있다.

function ParentComponent() {
  const [value, setValue] = useState("initial Value");

  const handleChangeValue = (newValue) => {
    setValue(newValue);
  };

  // ...생략...
}

function ChildComponent({ handleButtonClick }) {
  const handleClick = (childValue) => {
    handleButtonClick(childValue)
  }

  return (
    <button onClick={handleClick}>값 변경</button>
  )
}

2. Effect Hook

Hook?

React 16.8부터 추가되어 Class 바탕의 코드를 작성할 필요 없이 React의 여러 기능을 편리하게 사용가능하게 하는 함수.
Hook을 통해 함수 컴포넌트에서 React와 생명주기 기능을 연동할 수 있다.
두가지 Hook이 있다. stateHook, effectHook.

Side Effect

함수내부의 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 말한다.
리액트의 함수형 컴포넌트는 대부분 ajax요청등 외부 api와 소통하는데 이는 Side Effect에 해당하며, 리액트에서는 Effect Hook을 활용해 Side Effect를 제어한다.

Effect Hook 1

아래와 같이 함수 컴포넌트 내부의 최상위 레벨에서 useEffect()를 활용한다.

import { useEffect, useState } from "react";
function Proverb({ saying } ) {
  useEffect(() => {
    document.title = saying;
  });
  return (
    <div>
	    <h3>오늘의 명언</h3>
    </div>
    );
}
            

Effect Hook 2

Ajax in component

Sprint - StatesAirline Client

개요

리액트에서 외부 api 호출하는 방법이 궁금했는데 이번 스프린트를 통해서 관련내용을 학습했다.

throttle

debounce