[javascript] 리액트 프레임워크에서 컴포넌트간의 데이터 전달 방법은 무엇인가요?

05 Dec 2023

javascript

Props (속성): 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 가장 간단한 방법입니다. 부모 컴포넌트에서 자식 컴포넌트에게 속성을 전달하여 데이터를 공유할 수 있습니다. 자식 컴포넌트는 전달받은 속성을 props 객체로 접근하여 사용할 수 있습니다.

예시 코드:

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = 'Hello, World!';
  
  return <ChildComponent message={data} />;
}

// ChildComponent.js
import React from 'react';

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

Context (컨텍스트): 컴포넌트 트리 전역에서 데이터를 공유하기 위한 방법입니다. 컨텍스트는 전역 변수처럼 동작하며, 여러 컴포넌트에서 접근할 수 있습니다. Context를 생성하고 제공하는 컴포넌트와 이를 사용하는 컴포넌트로 구성됩니다.

예시 코드:

// MyContext.js
import React from 'react';

const MyContext = React.createContext();

export default MyContext;

// ParentComponent.js
import React from 'react';
import MyContext from './MyContext';

function ParentComponent() {
  const data = 'Hello, World!';
  
  return (
    <MyContext.Provider value={data}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

// ChildComponent.js
import React from 'react';
import MyContext from './MyContext';

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {(value) => <div>{value}</div>}
    </MyContext.Consumer>
  );
}

Redux: 상태 관리 라이브러리인 Redux를 사용하여 전역 상태를 관리하는 방법입니다. Redux는 단일 상태 트리를 사용하여 컴포넌트간에 데이터를 전달하고 공유할 수 있습니다. Redux Store에 상태를 저장하고 필요한 컴포넌트에서 상태를 가져와 사용할 수 있습니다.

예시 코드:

// actions.js
export const setMessage = (message) => {
  return {
    type: 'SET_MESSAGE',
    payload: message,
  };
};

// reducer.js
const initialState = {
  message: '',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_MESSAGE':
      return {
        ...state,
        message: action.payload,
      };
    default:
      return state;
  }
};

export default reducer;

// ParentComponent.js
import React from 'react';
import { connect } from 'react-redux';
import { setMessage } from './actions';

function ParentComponent(props) {
  const data = 'Hello, World!';
  
  props.setMessage(data);
  
  return <ChildComponent />;
}

const mapDispatchToProps = {
  setMessage,
};

export default connect(null, mapDispatchToProps)(ParentComponent);

// ChildComponent.js
import React from 'react';
import { connect } from 'react-redux';

function ChildComponent(props) {
  return <div>{props.message}</div>;
}

const mapStateToProps = (state) => ({
  message: state.message,
});

export default connect(mapStateToProps)(ChildComponent);

이외에도 리액트 프레임워크에서는 다른 데이터 전달 방법들도 제공합니다. 각각의 방법은 상황에 따라 선택하여 사용할 수 있습니다. 자세한 내용은 리액트 공식 문서를 참고하시기 바랍니다.