[React] 컴포넌트가 데이터를 다루는 3가지 방법

Props, State, Context (참고 사이트)

1. Props

• 부모 컴포넌트에서 자식으로 전달 되는 데이터
• 부모에서 받으므로 자식에서 변경x 

const Text = ({text}) => {
  return <div>{text}</div>
}

const App = () => {
  return <Text text='Hello world!'/>
}

• Hello world! 라는 문자열 데이터를 전달

2. State

• 한 컴포넌트에서 동적 데이터를 다룰 때 사용
• 컴포넌트 안에서 데이터 변경 가능 

import React, { useState } from 'react';

const Text = ({text}) => {
  return <div>{text}</div>
}

const App = () => {
  const [count, setCount] = useState(0);

  return <div>
    <Text text={count} />
    <div onClick={() => setCount(count + 1)}>+</div>
  </div>
}

• App 컴포넌트에서 useState라는 훅을 통해 버튼 클릭시 1씩 증가하는 count 데이터를 조작

3. Context

• React에서 Props와 State는 부모 자식 컴포넌트 또는 한 컴포넌트에서 데이터를 다루기 위해 사용. 즉 위에서 아래로,  단방향 데이터 흐름 ( 한 곳에서 데이터 수정과 같은 작업 시 공통 부모 컴포넌트 모두 변경해야 하는 번거로움)

• 위에서의 복잡성을 해결하기 위해 데이터 흐름과 상관 없는 전역 데이터를 Context에 저장 후 사용

• Context에는 Provider 와 Consumer가 있음.
  • Provider: Context 데이터를 사용하기 위해서는 공통 부모 컴포넌트에 Provider를 사용하여 데이터 제공
  • Consumer: 데이터를 사용할려는 컴포넌트에서 Context의 Consumer를 사용하여 실제 데이터 사용