React 데이터 흐름

• 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 인자 or 속성처럼 전달받을 수 있다.
  • 즉, 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 이는 데이터 흐름이 하향식임을 의미한다.

• React에서 단방향 데이터 흐름 이라는 키워드가 가장 중요하다.
  • 컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다.

상태 위치 정하기

• 상태가 특정 컴포넌트에서만 유의미하다면, 특정 컴포넌트에만 두면 되니까 크게 어렵지 않지만, 만일 하나의 상태를 기반으로 두 컴포넌트가 영향을 받는다면 이때에는 공통 소유 컴포넌트를 찾아 그 곳에 상태를 위치해야한다.
  • 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치해야한다.

역방향 데이터 흐름 추가

• tweet 버튼을 통해 부모의 상태를 변경하려면?
  • 상태위치를 전부 정하고 나서 , 부모 컴포넌트에서의 상태가 하위 컴포넌트에 의해 변경하는 것이다.
  • 바로 새로운 트윗 추가가 대표적인 예다.
  • 버튼을 통한 이 액션은, 부모의 상태를 변화 시켜야 한다.

• 하위 컴포넌트(NewTweetForm) 에서의 클릭 이벤트가 , 부모의 상태를 바꾸는 상황이다. 이를 해결할 수 있는 건 State 끌어올리기(Lifting state up) 이다.

상태 끌어올리기

• 마치 콜백처럼 함수 자체를 props에 전달한다.
  • 상태를 변경시키는 함수를 하위 컴포넌트에 props로 전달해서 해결할 수 있다.
  • 그래서 콜백함수를 사용하는 방법과 비슷하다.

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>;
}

• 상태를 변경하는 함수 handleChangeValue
• 전달은 props이용
• 하위 컴포넌트가 버튼 클릭 이벤트에 따라 상태를 변경하려 하기 때문에
  • handleButtonClick

• ChildComponent는 props로 전달받은 함수를 컴포넌트 내에서 실행할 수 있게 된다.
  • 상태 변경 함수는 버튼이 클릭할 때 실행되기를 원하므로 해당 부분에 콜백함수를 실행한다.

Effect Hook

Side Effect

• 함수 내에서 어떤 구현이 함수 외부에 영향을 끼친느 경우 해당 함수는 Side Effect가 있다

Pure Function (순수 함수)

• 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수
  • 하지만 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없다.
    • 또한 순수 함수는 , 입력으로 전달된 값을 수정하지않는다.
• immutable = 원본을 수정하지 않는다.

• 순수함수에는 네트워크 요청과 같은 Side Effect가 없다.
  • 어떠한 argument가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장한다
    • 그래서 예측 가능한 함수이기도 하다.

Question

• math.random()은 순수 함수가 아니다 왜일까?

• 어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해보면 이 함수는 순수 함수가 아니다. 왜일까?

React의 함수 컴포넌트

• props가 입력으로, JSX Element가 출력으로 나간다.
  • 어떤 Side Effect도 없고 , 순수함수로 작동한다.

• 하지만 React 어플리케이션을 작성할 때, AJAX 요청, LocalStorage , 타이머와 같은 React와 상관없는 API를 사용하는 경우에는
  • React입장에서는 전부 Side Effect이다.
    • React는 Side Effect를 다루기 위한 Hook 인 Effect Hook을 제공한다.

React 컴포넌트에서의 Side Effect

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