컴포넌트 내 데이터 전달

< 컴포넌트 간 통신 >

재사용 가능 컴포넌트는 코드 중복을 방지하기 위해 애플리케이션의 여러 영역에서 공유할 수 있다. 깔끔한 인터페이스를 사용하는 작은 컴포넌트를 조합해 복잡한 애플리케이션을 만드는 방식은 유지관리하기도 쉽다.

 

컴포넌트를 조합할 때는 프로퍼티를 사용해 컴포넌트 사이에 데이터를 공유한다. 

소유자가 render 메소드 안에 정의된 컴포넌트로 전달하는 children이라는 특수한 프로퍼티가 있다. 이 프로퍼티는 포함하는 값에 대한 정보를 전혀 제공하지 않기 때문에 리액트 설명서에서는 이를 불투명하다고 설명하고 있다. 

 

부모 컴포넌트의 render 메소드에 정의된 하위 컴포넌트는 보통 JSX에서 컴포넌트 자체의 속성으로서 전달되거나, createElement 함수의 두 번째 매개변수로 전달된 프로퍼티를 받는다.

 

리액트 컴포넌트에는 논리와 프레젠테이션이 같이 들어 있다.

 

• 논리 : API 호출, 데이터 조작, 이벤트 핸들러와 같이 UI와 연관되지 않은 코드
• 프레젠테이션 : render 메소드 안에서 UI에 표시할 요소를 생성하는 코드

 

컨테이너 컴포넌트

 

• 동작과 관계가 많다.
• 프레젠테이션 컴포넌트를 렌더링한다.
• API 호출을 수행하고 데이터를 조작한다.
• 이벤트 핸들러를 정의한다.
• 클래스로 작성한다.

 

프레젠테이션 컴포넌트

 

• 시각적 표현과 관계가 많다.
• HTML 마크업을 렌더링한다.
• 부모로부터 프로퍼티 형태로 데이터를 받는다.
• 상태 비저장 함수형 컴포넌트로 작성되는 경우가 많다.

 

< 단방향 데이터 흐름 >

리액트에서는 데이터가 트리의 맨 위에서 아래로 단방향으로 움직인다. 이 방식은 컴포넌트의 동작과 컴포넌트 간의 관계를 간소화하고 코드를 예측 가능하고 유지관리하기 쉽게 만들어준다는 여러 장점을 갖고 있다.

 

모든 컴포넌트는 부모로부터 프로퍼티 형태로 데이터를 수신하지만 프로퍼티는 수정할 수 없다. 수신한 데이터는 새로운 정보로 변환되고 트리의 다른 자식으로 전달된다. 각 자식은 로컬 상태를 포함할 수 있으며, 이를 중첩된 컴포넌트에 대한 프로퍼티로 사용할 수 있다.

 

그렇다면 자식에서 부모로 데이터를 푸시해야 한다면?                                                   

React에서 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 방법은 다음과 같다.

 

1. Props를 사용하는 방법
2. Context를 사용하는 방법
   • React의 고급 기능으로, 컴포넌트 트리를 통해 데이터를 전달하는 방법
   • 중간에 위치한 컴포넌트에서는 Props를 거치지 않고도 데이터를 전달할 수 있음
3. Redux를 사용하는 방법
   • Redux : React 애플리케이션의 전역 상태 관리를 위한 라이브러리
   • Redux를 사용하면 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 대신 상태를 Redux 스토어에 저장하고, 자식 컴포넌트에서 스토어로부터 필요한 데이터를 가져올 수 있음

이 중에서 Props를 사용하는 방법을 이용하려고 한다.

부모 컴포넌트 : Home

자식 컴포넌트 : Team >> Room

 

1. Home 컴포넌트에서 Team 컴포넌트로 teamId 전달하기

function Home() {
  const teamId = 123; //

  return (
    <div>
      {/* ... */}
      <Team teamId={teamId} />
    </div>
  );
}

2. Team 컴포넌트에서 Room 컴포넌트로 teamId 전달하기

function Team({ teamId }) {
  return (
    <div>
      {/* ... */}
      <Room teamId={teamId} />
    </div>
  );
}

3. Room 컴포넌트에서 teamId 사용하기

function Room({ teamId }) {
  // teamId를 이용하여 필요한 로직 수행
  return (
    <div>
      {/* ... */}
    </div>
  );
}

만약 Home 컴포넌트에 구성된 Team, Room 컴포넌트가 모두 같은 상위 컴포넌트인 Home 컴포넌트 내에 있고, Team 컴포넌트에서 발생한 이벤트를 Room 컴포넌트로 전달하여 재렌더링을 유발하려면 어떻게 해야 할까? 

이는 React의 상태 관리 기능을 활용하여 구현할 수 있다.

부모 컴포넌트 : Home

자식 컴포넌트 : Team / Room

 

1. Home 컴포넌트에서 상태 관리를 위한 useState를 사용하여 데이터와 데이터 변경 함수를 생성한다.

import React, { useState } from 'react';

function Home() {
  const [roomData, setRoomData] = useState(null);

  const handleTeamEvent = (eventData) => {
    // Room 컴포넌트에 전달할 데이터를 설정
    setRoomData(eventData);
  };

  return (
    <div>
      {/* ... */}
      <Team onTeamEvent={handleTeamEvent} />
      <Room data={roomData} />
    </div>
  );
}

2. Team 컴포넌트에서 이벤트 발생 시 해당 이벤트 데이터를 전달하는 콜백 함수를 호출한다.

즉, 이벤트 발생 시 handleEvent 함수를 호출하고, 해당 이벤트 데이터를 onTeamEvent 콜백 함수를 통해 Home 컴포넌트로 전달한다.

function Team({ onTeamEvent }) {
  const handleEvent = (data) => {
    const eventData = data; // 이벤트 데이터를 설정
    onTeamEvent(eventData); // 이벤트 데이터를 콜백 함수를 통해 전달
  };

  return (
    <div>
      {/* ... */}
      <button onClick={() => handleEvent(data)}>이벤트 발생</button>
    </div>
  );
}

3. Room 컴포넌트에서 전달받은 데이터를 사용하여 재렌더링한다.

function Room({ data }) {
  return (
    <div>
      {data && <p>받은 데이터: {data}</p>}
      {/* ... */}
    </div>
  );
}