create-react-app 컴포넌트 props

 

props(속성)

 

props는 컴포넌트에 전달하는 데이터를 의미합니다. 자바스크립트 함수의 매개변수라는 개념을 알고 계실텐데, 컴포넌트의 props 또한 매개변수와 비슷한 역할을 합니다. 전달되어지는 값에 따라서 결과의 차이를 만들어낼 수가 있고, 그로 인해 효율적인 컴포넌트 재사용이 가능해집니다. 

 

 

컴포넌트 여러 개 사용하기

 

다음과 같은 구조를 만들고, App.js와 Book.js를 각각 작성해주겠습니다. 

 

App.js

import React from 'react';
import './App.css';
import Book from './Book';
 
function App() {
  return (
    <div>
      <Book />
      <Book />
      <Book />
    </div>
  );
}
 
export default App;

 

Book.js

import React from 'react'
 
function Book(){
  return <h1>책의 제목</h1>
}
 
export default Book;

 

위와 같은 상태로 앱을 실행하면 "책의 제목"이라는 헤드라인이 세 개 출력될 것입니다. 그리고 이미 느끼셨겠지만 이는 무척 비효율적인 코드입니다. 일단 Book 컴포넌트를 직접 하나하나 입력해야 한다는 점과, 또 모든 Book 컴포넌트의 출력값이 동일하다는 점에서 문제가 있습니다. 따라서 이제는 porps를 사용해 컴포넌트에 데이터를 전달해주는 방법을 적용할 필요가 있습니다. 

 

 

props로 컴포넌트에 데이터 전달하기

 

Book 컴포넌트의 코드를 다음과 같이 수정해줍니다. 

import React from 'react'
 
function Book(props){
  return <h1>{props.title}</h1>
}
 
export default Book;

 

그런 다음 App 컴포넌트의 내용을 다음과 같이 수정해줍니다.

import React from 'react';
import './App.css';
import Book from './Book';
 
function App() {
  const titles = ["어린 왕자", "여린 왕자", "어린 환자"]
  return (
    <div>
      <Book title={titles[0]}/>
      <Book title={titles[1]}/>
      <Book title={titles[2]}/>
    </div>
  );
}
 
export default App;

위 코드의 방식이 바로 props를 이용하여 컴포넌트에 데이터를 보내는 방법입니다. Book 컴포넌트에 사용한 props의 이름은 title이고, title에 값(자바스크립트 데이터)을 담아 보낸 것입니다. 

 

결과입니다. 이렇듯 컴포넌트에 속성값을 추가해주어 props 라는 변수를 활용하는 것이 가능합니다.