[React] Props와 구조 분해 할당으로 컴포넌트 재사용하기

React에서는 화면을 여러 개의 컴포넌트(Component)로 나누어 작성할 수 있다.

컴포넌트를 사용하면 동일한 구조의 UI를 반복해서 작성하지 않고 하나의 컴포넌트를 여러 곳에서 재사용할 수 있다.

하지만 같은 구조의 컴포넌트라도 화면에 표시할 내용이나 링크처럼 서로 다른 값을 사용해야 하는 경우가 있다.

이때 사용하는 것이 Props이다.

1. 컴포넌트를 재사용하는 이유

예를 들어 여러 개의 링크를 화면에 표시한다고 생각해 보자.

<a href="https://www.naver.com">네이버</a> 
<a href="https://www.google.com">구글</a> 
<a href="https://github.com">GitHub</a>

각 링크의 내용과 주소는 다르지만 전체적인 구조는 동일하다.

<a href="주소">텍스트</a>

이처럼 반복되는 구조를 하나의 컴포넌트로 만들면 코드를 재사용할 수 있다.

function Link() {
    return (
       <a href="https://www.naver.com"> 네이버 </a>
    );
}

하지만 이렇게 만들면 항상 네이버 링크만 생성할 수 있다.

컴포넌트를 재사용하려면 컴포넌트의 구조는 유지하면서 필요한 값만 변경할 수 있어야 한다.

이때 Props를 사용할 수 있다.

2. Props란?

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값이다.

예를 들어 Link 컴포넌트에 링크의 이름과 주소를 전달한다고 해보자.

<Link 
    text="네이버" 
    href="https://www.naver.com" 
/>

여기서 text와 href가 Link 컴포넌트에 전달하는 Props이다.

다른 링크를 만들 때는 다른 값을 전달할 수 있다.

<Link 
    text="구글" 
    href="https://www.google.com"
/>

컴포넌트의 구조는 동일하지만 전달하는 Props에 따라 결과가 달라진다.

즉, Props를 이용하면 하나의 컴포넌트에 필요한 데이터를 전달하여 다양한 형태로 사용할 수 있다.

3. Props 객체로 전달받기

컴포넌트에서는 props라는 객체를 통해 전달받은 값을 사용할 수 있다.

function Link(props) {
    const text = props.text;
    const href = props.href;

    return (
        <a target="_blank" href={href}>
            {text}
        </a>
    );
}

Link 컴포넌트에 값을 전달하면, 컴포넌트 내부에서는 props 객체를 통해 접근할 수 있다.

props.text
props.href

Props는 문자열이나 숫자 같은 데이터뿐만 아니라 함수도 전달할 수 있다.

부모 컴포넌트에서 State를 변경하는 함수를 자식 컴포넌트에 전달하면, 자식 컴포넌트에서 이벤트가 발생했을 때 부모의 State를 변경할 수 있다

4. 구조 분해 할당 사용하기

위 코드는 다음과 같이 작성할 수도 있다.

function Link(props) {
    const { text, href } = props;

    return (
        <a target="_blank" href={href}>
            {text}
        </a>
    );
}

여기서

const { text, href } = props;

가 구조 분해 할당이다.

구조 분해 할당을 사용하면 더 간결하게 작성할 수 있다.

5. 매개변수에서 바로 구조 분해 할당하기

구조 분해 할당은 함수의 매개변수에서도 사용할 수 있다.

따라서 다음과 같이 더 간결하게 작성할 수 있다.

function Link({ text, href }) {
    return (
        <a target="_blank" href={href}>
            {text}
        </a>
    );
}

props 객체를 매개변수로 전달받으면서 동시에 text와 href를 구조 분해하여 사용하는 것이다.

Props를 많이 사용하는 React 컴포넌트에서는 이런 방식으로 작성하면 코드가 간결해진다.

6. Props를 이용하여 컴포넌트 재사용하기

이제 Link 컴포넌트를 여러 번 사용해 보자.

function Link({ text, href }) {
    return (
        <a target="_blank" href={href}>
            {text}
        </a>
    );
}

그리고 필요한 곳에서 서로 다른 Props를 전달한다.

function App() {
    return (
        <>
            <Link text="네이버" href="https://www.naver.com" /> 
            <Link text="구글" href="https://www.google.com" /> 
            <Link text="GitHub" href="https://github.com" /> 
        </>
    );
}

모든 Link는 동일한 컴포넌트를 사용한다.

하지만 각각 다른 text와 href를 전달하기 때문에 서로 다른 링크가 만들어진다.

이처럼 컴포넌트의 구조는 하나로 유지하면서 Props를 통해 필요한 데이터만 변경할 수 있다.