Colin's Blog
[typescript] JSX에서 컴포넌트 사이의 데이터 전달 방법

JSX에서 컴포넌트 사이의 데이터 전달은 매우 중요합니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, Props와 State를 사용하여 데이터를 구조화하고 관리할 수 있습니다. 이 블로그 포스트에서는 JSX에서 컴포넌트 사이의 데이터 전달하는 두 가지 방법을 살펴보겠습니다.

Props를 사용한 데이터 전달

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 가장 일반적인 방법입니다. Props를 사용하여 자식 컴포넌트에 데이터를 전달할 수 있습니다. 아래는 Props를 사용하여 데이터를 전달하는 방법의 예시입니다.

// ParentComponent.tsx

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

const ParentComponent: React.FC = () => {
  const data = 'Hello from parent';

  return (
    <div>
      <ChildComponent message={data} />
    </div>
  );
};

export default ParentComponent;

// ChildComponent.tsx

import React from 'react';

interface Props {
  message: string;
}

const ChildComponent: React.FC<Props> = ({ message }) => {
  return <div>{message}</div>;
};

export default ChildComponent;

부모 컴포넌트에서 ChildComponent를 호출할 때 message라는 Props를 전달했습니다. 이제 ChildComponent 내부에서 해당 Props를 활용하여 데이터를 표시할 수 있습니다.

Context를 사용한 데이터 전달

만약 여러 컴포넌트 간에 데이터를 전달해야 하는 경우, Context를 사용하여 전역적으로 데이터를 관리할 수 있습니다. 이를 통해 Props를 통해 데이터를 여러 번 전달하는 번거로움을 덜 수 있습니다. 아래는 Context를 사용하여 데이터를 전역적으로 관리하는 예시입니다.

// AppContext.tsx

import React, { createContext, useContext, useState } from 'react';

export const AppContext = createContext<string | undefined>(undefined);

export const useAppContext = () => useContext(AppContext);

export const AppProvider: React.FC = ({ children }) => {
  const [data, setData] = useState('Hello from context');

  return <AppContext.Provider value={data}>{children}</AppContext.Provider>;
};

위 코드에서 AppContext를 생성하고 AppProvider로 데이터를 제공하고 있습니다. 이제 이 AppContext를 활용하여 데이터를 필요로 하는 컴포넌트에서 데이터를 전역적으로 사용할 수 있습니다.

JSX에서 컴포넌트 간에 데이터를 전달하는 방법은 Props와 Context를 사용하는 두 가지 방법이 있습니다. 각각의 상황에 맞게 적절한 방법을 선택하여 데이터를 효과적으로 전달할 수 있습니다.

이렇게 Prop와 Context를 사용하여 컴포넌트 간에 데이터를 전달하는 방법을 살펴보았습니다. 이를 통해 JSX에서 데이터를 효과적으로 전달할 수 있는 방법에 대해 배울 수 있었습니다.

참고 자료

© 2018 Colin. All rights reserved.