Component 재사용하기 (React)

갑자기 이럴 경우가 있다

이 사진에 있는 Card를 여러개를 사용하면서 안에 내용은 다르게 넣고 싶을때가 분명 있을 것이다.

즉 이 틀만 재사용을 하고 싶다는 것이다. React는 Component로 구성되어 있다. 하나의 Component를 만들면 그걸 계속 사용해야하는데 이걸 재사용할 수 있을까? 안의 내용은 계속 반복 되면서 사용될 것이다

 

그럼 이걸 어떻게 해결할 수 있을까??

우리는 Children 속성과 Wrap이라는 특성을 활용해서 이걸 재사용 해 볼 것이다.

 

function Card({children}) {
    return (
        <div
            style={{
                backgroundColor: '#0DCADB',
                borderRadius: '20px',
                color: 'black',
                minHeight: '200px',
                maxWidth: '200px',
                margin: '1rem',
                padding: '1rem',
                textAlign: 'center',
            }}
        >
            {children}
        </div>
    );
}

 

일단 위의 사진처럼 간단한 Component를 만들어 보자. 그리곤 Children 파라미터를 받아와서 위와 같이 작성한다.

import React from 'react';

export default function AppCard() {
    return (
        <>
            <Card>
                <p>Card1</p>
            </Card>
            <Card>
                <h1>Card2</h1>
                <p>TestTest</p>
            </Card>
            <Card>
                <h2>Card3</h2>
                <p>TestTestTest</p>
                <span>It's react practice</span>
            </Card>
        </>
    );
}

 

그리과 Card Compoent를 사용할 Component에서 Card 컴포넌트를 불러와서 위와 같이 Card 컴포넌트를 태그처럼 사용한 후에 안에 내용을 입력해준다. 

 

그러면 결과값이 이렇게 나온다.

즉 Component를 태그처럼 사용해서 안의 내용을 Wrap 즉 감싸주고 안의 내용이 감싸준 Component의 children으로 입력되어 나타나게 된다.

 

그래서 이게 재사용하기가 매우 좋다. 큰 틀을 계속 사용할 것 같은 컴포넌트를 위와 같이 작성하고 안의 내용만 바꿔서 보여주고 싶을 때 아주 유용하다.