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

Section 1에서 가장 어렵다고 느껴졌던 React 부분을 다시 배웠습니다. 부모 컴포넌트와 자식 컴포넌트가 왔다 갔다 많이 해서 좀 정신없었긴 했지만 좀만 배웠던 내용 더 정리하면 이해 잘할 수 있을 것 같아요!😊 내일까지 React를 이용한 항공권 예약 사이트를 구현하는데요. 아직 REST API로 어떻게 구현하는지에 대해 못풀었지만 내일까지 풀 수 있도록 마저 열심히 해보도록 하겠습니당

 

 

Lifting State Up

React에서 컴포넌트의 데이터 흐름은 하향식인데요. 따라서 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달합니다. 하지만 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변화하는 경우도 있는데요. 이 경우 React의 가장 큰 특징인 하향식에 위배되는 문제가 발생합니다. 이를 해결하기 위해 Lifting state up이라는 방법이 있습니다.

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("날 바꿔줘!");

  const handleChangeValue = () => {
    setValue("보여줄게 완전히 달라진 값");
  };

  return (
    <div>
      <div>값은 {value} 입니다</div>
      <ChildComponent handleButtonClick = {handleChangeValue}/> //부모 컴포넌트에서의 함수를 자식 컴포넌트로 전달
    </div>
  );
}

function ChildComponent({handleButtonClick}) {
  const handleClick = () => {
    handleButtonClick(); // 자식 컴포넌트의 함수가 실행되면 부모의 컴포넌트 변경
  };

  return <button onClick={handleClick}>값 변경</button>; //버튼을 누르면 handleClick 함수 실행
}

 

 

 

 

Effect Hook

Side Effect

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 Side Effect가 있다고 합니다. 

Side Effect가 없는 함수는 순수함수라고 합니다. 따라서 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴할 것을 보장합니다. 그래서 예측 가능한 함수입니다. 순수 함수의 특징을 고려하면 Math.random()과  fetch API를 이용해 AJAX 요청을 하는 함수는 예측이 불가능하기 때문에 순수 함수가 아닙니다.

 

 

Effect Hook

useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook 입니다. useEffect의 첫 번째 인자는 함수입니다. 컴포넌트가 렌더링 될 때 Effect Hook이 실행됩니다.

 

useEffect의 두 번째 인자는 배열입니다. 이 배열은 boolean 값이 아닌 값의 변경이 일어날 때라는 조건을 담고 있습니다. 따라서, 해당 배열엔 어떤 값의 목록이 들어갑니다. 이 배열을 특별히 종속성 배열이라고 부릅니다. 두 번째 인자의 종속성 배열 내의 요소가 변화할 때 첫 번째 인자의 함수가 실행됩니다.

 

1. 빈 배열 넣기: useEffect(함수, [])

2. 아무것도 넣지 않기 (기본 형태): useEffect(함수)

2번인 기본 형태의 useEffect는 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태(state)가 업데이트될 때 effect 함수가 실행됩니다. 반면에 1번 빈 배열을 useEffect의 두 번째 인자로 사용하면, 이 때에는 컴포넌트가 처음 생성될때만 effect 함수가 실행됩니다. 이런 경우로는 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때가 있습니다.

 

Hook 쓸 때 주의할 점

• 최상위에서만 Hook을 호출합니다. 즉, 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 않습니다.
• React 함수 내에서 Hook을 호출합니다. 일반적인 JavaScript 함수에서는 Hook을 호출하지 않습니다.

 

AJAX 요청

1. 컴포넌트 내에서 처리: 전체 데이터를 불러와서 처리
2. 컴포넌트 외부에서 처리: 컴포넌트 외부로 API 요청을 해서 데이터 처리

AJAX 요청이 느릴 경우 상태처리릍 통해 LoadingIndicator 구현을 할 수 있습니다. 아래와 같이 코드를 작성할 수 있습니다.

const [isLoading,setIsLoading] = useState(true);

// LoadingIndicator 컴포넌트는 별도로 구현했음을 가정
return {isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}