[react web] 데이터 다른 컴포넌트로 보내기

0. 들어가면서

react는 많은 jsx파일이나 js 파일로 컴포넌트가 만들어진다. 그렇다면, 각각의 컴포넌트에 데이터를 전달할 수 있어야한다. 쉽고 간단하게 설명해 보겠다.

 

1. 부모 컴포넌트

데이터를 보낼 컴포넌트다. 이 컴포넌트 안에는 3개의 다른 컴포넌트( DownTest1, DownTest2, DownTest3 )를 만들었다. 

// src/component/UpTest.jsx
import React from 'react';
import DownTest1 from './DownTest1';
import DownTest2 from './DownTest2';
import DownTest3 from './DownTest3';

const UpTest = () => {
    return (
        <>
            <h3>Parent Component</h3>
            <DownTest1 a="a들어감" b="bb들어감" c="ccc들어감" title="title들어감" />

            <hr />

            <DownTest2>
                <p>a 이렇게도 들어감</p>
                <p>b 이렇게도 들어감</p>
                <p>c 이렇게도 들어감</p>
                <p>d 이렇게도 들어감</p>
            </DownTest2> 

            <hr />
            
            <DownTest3 buttontag={<button>버튼도 내려간다</button>} ptag={<p>p태크도 내려간다.</p>} />
        </>
    )
}

export default UpTest;

 

위의 코드를 좀 더 이해하기 쉽게 보자.

 

 

우리는 위와 같이 3가지 방법으로 데이터를 자식 컴포넌트로 보낼 수 있다.

 

 

 

2. 자식 컴포넌트

첫번째 방법

 <DownTest1 a="a들어감" b="bb들어감" c="ccc들어감" title="title들어감" />

 

 직관적으로 간단하다. =을 기준으로 왼쪽이 DownTest1 컴포넌트에서 사용될 이름이고, 오른쪽이 넣어준 데이터이다. DownTest1의 코드는 아래와 같다.

 

 

props뒤에 .a나 .title과 같이, 부모 컴포넌트에서 적은 = 왼쪽부분을 넣어주면 된다. 결과 페이지는 아래와 같다.

 

 

두번째 방법

            <DownTest2>
                <p>a 이렇게도 들어감</p>
                <p>b 이렇게도 들어감</p>
                <p>c 이렇게도 들어감</p>
                <p>d 이렇게도 들어감</p>
            </DownTest2>

 

이러한 방법은 통으로 넣는 방식이다. <DownTest2></DownTest2> 사이에 통으로 데이터를 넣어주는 거다. DownTest2의 코드를 보면 아래와 같다.

 

 

이런 경우 .children을 사용해서 부모데이터를 받는다. 결과는 아래와 같다.

 

 

 

 

세번째 방법

<DownTest3 buttontag={<button>버튼도 내려간다</button>} ptag={<p>p태크도 내려간다.</p>} />

 

위의 방법은 = 왼쪽에는 DownTest3 컴포넌트에서 사용할 변수를 넣어준다. 오른쪽에는 tag를 직접 넣어준다. DownTest3 코드는 아래와 같다.

 

 

 받는 방법은 첫번째 방법과 비슷하다. 결과 값은 아래와 같다.

 

 

 

3. 마무리

 사실 첫번째 방식으로 데이터를 많이 보낸다. 그러나 컴포넌트의 재사용성을 위해서는 다른 방식이 좀 더 효율적인 경우가 있다. 따라서 첫번째 방식을 주로 쓰고, 다른 방식들은 있다는 것만 인지하고 있으면 좋을 것 같다.