[React] Prop(속성)으로 컴포넌트 재사용

Props

컴포넌트의 주요 장점 중 하나는 재사용이 가능하다는 것이다.

재사용 가능한 컴포넌트를 사용할 때마다 다른 데이터를 전달하고자 할 때 props가 사용된다.

커스텀 컴포넌트는 커스텀 props을 추가할 수 있다.

<CoreConcept title="Components" description="The core IU ..." image={componentsImg} />
<UserInfo
	name="Max"
	age={34}
	details={{userName='Max'}}
	hobbies={['Cooking','Reading']}
/>

• title, description, image들은 커스텀 속성으로 리액트에선 이걸 props라고 부른다.
• props의 값으로 스트링, 숫자, 객체, 배열 등 모든 형태를 전달할 수 있다.

 

 

Props 사용하기

일반 자바스크립트 함수에서 입력값을 받아 사용하려면 한 개 이상의 매개변수를 추가하면 된다.

function fnName(param1, param2) {}

 

 

리액트도 비슷하지만 일반적으로 props라고 불리는 하나의 매개변수만 사용한다.

function CompName(props) {}

 

• 커스텀 컴포넌트이기에 매개변수 이름을 props 말고 다른 이름으로 설정해도 된다.
• 리액트에선 일반적으로 props를 사용한다.

function CoreConcept(props) {
	return (
		<img src={props.image} />
		<h3>{props.tittle}</h3>
		<div>{props.description}</div>
	)
}

<CoreConcept title="Components" description="The core IU ..." image={componentsImg} />

• 키값 쌍인 속성들이 하나의 객체로 합쳐지고 이것은 props 매개변수를 통해 가져올 수 있다.

 

 

데이터 가져오기

데이터를 다른 곳에서 가져올 때 import 로 가져오면 된다.

//data.js
export const CORE_CONCEPTS = [
  {
    image: componentsImg,
    title: 'Components',
    description:
      'The core UI building block - compose the user interface by combining multiple components.',
  },
  {...},
  {...},
  ...

import { CORE_CONCEPTS } from "./data.js";

function CoreConcept(props) {
  return (
    <li>
      <img src={props.image} alt={props.title} />
      <h3>{props.title}</h3>
      <p>{props.description}</p>
    </li>
  );
}

<CoreConcept
  title={CORE_CONCEPTS[0].title}
  description={CORE_CONCEPTS[0].description}
  image={CORE_CONCEPTS[0].image}
/>

 

그런데 title={CORE_CONCEPTS[0].title} 이렇게 작성하는 건 코드 길이가 길다.

 

 

props 짧게 작성하기

데이터(data.js) props이름과 컴포넌트 태그(<CoreConcept />) props이름이 동일하면

자바스크립트의 스프레드 연산자(…)를 이용하여 객체의 키값 쌍들을 뽑아낼 수 있다.

import { CORE_CONCEPTS } from "./data.js";

<CoreConcept {...CORE_CONCEPTS[0]} />

• {...CORE_CONCEPTS[0]}로 작성하면 data.js의 배열 첫번째 키값이 컴포넌트에 추가된다.

 

컴포넌트 함수 내에서도 짧게 작성할 수 있다.

{}중괄호를 추가하여 객체 구조를 분해할 수 있다.

function CoreConcept({image, title, description}) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

• 매개변수 안 {} 중괄호는 첫 번째 매개변수를 구조 분해할 때 사용된다.
• 이 경우 첫번째 매개변수는 props 매개변수를 의미한다.
• 객체 구조 분해에서 속성들은 이름 별로 타켓팅된다.
• 그래서 컴포넌트의 props 이름과 동일한 이름을 사용해야한다. image, title, description

 

 

컴포넌트 분리하기

한 파일에 컴포넌트가 많을 수록 다른 컴포넌트를 찾는 것이 어려워진다.

그런 이유로 보통 각 컴포넌트는 별도의 파일에 저장하는 것이 좋다.

// src/components/CoreConcept.jsx

export default function CoreConcept({ image, title, description }) {
  return (
    <li>
      <img src={image} alt={title} />
      <h3>{title}</h3>
      <p>{description}</p>
    </li>
  );
}

 

// src/app.jsx

import CoreConcept from "./components/CoreConcept.jsx";

• 파일로 분리하고 내보낼 때는 export default를 사용한다.
• default를 추가하면 기본값으로 내보내는 것을 의미한다.

 

 

Props 자녀 속성

컴포넌트 태그에 속성 없다해서 props가 완전 비워진 건 아니다.

항상 받는 속성이 있는데 그것은 내장 속성인 children prop 이다.

function TabButton(props) {
    return <li><button>{props.children}</button></li>
}

<TabButton>Components</TabButton>

• children은 리액트에서 설정한 prop이다.
• 어느 특정 속성에 의해 설정된 것이 아니기에 <TabButton children=…> 이런 형식으로 사용하면 안된다.
• children은 컴포넌트 태그 사이의 내용을 의미한다.
  • <TabButton>Components</TabButton>

function Modal(props) {
    return <div>{props.children}</div>
}

<Modal>
	<h2>Warning</h2>
	<p>Do you want to delete this file?</p>
</Modal>

• <Modal>
  <h2>Warning</h2>
  <p>Do you want to delete this file?</p>
  </Modal>
• 내용이 텍스트 일 수도 있고 jsx 구조가 될 수도 있다.
• 이렇게 컴포넌트가 다른 컴포넌트나 내용을 감싸서 구축하는 것을 컴포넌트 합성이라고 한다.

function TabButton(props) {
    return <li><button>{props.children}</button></li>
}

<TabButton>Components</TabButton>

• props.children으로 내용을 출력할 수 있다.
  • {props.children} == Components

function TabButton({children}) {
    return <li><button>{children}</button></li>
}

<TabButton>Components</TabButton>

• 객체 구조분해하여 children만 추출해 사용할 수 있다.
  • {children} == Components

 

 

위 내용을 속성을 사용하는 방식으로 바꿀 수도 있다.

function TabButton({lable}) {
    return <li><button>{lable}</button></li>
}

<TabButton label='Components'/>