[React] 리액트 기본 개념 (3) - props

Props

✏️ props는 컴포넌트에서 컴포넌트로 전달하는 데이터이다.

1. 컴포넌트 여러 개 만들기

./src/App.js

import React from 'react';

function Tests() {
  return <h3>We are test components.</h3>
}

function App() {
  return (
    <div>
    	<h1>Hello</h1>
    	<Tests />
    	<Tests />
    	<Tests />
    	<Tests />
    	<Tests />
    	<Tests />
    	<Tests />
    	<Tests />
    	<Tests />
    	<Tests />
    </div>
    );
}
export default App;

컴포넌트를 10개 작성하고 싶을 때, 직접 손으로 코딩하는 방식은 비효율적이다.
게다가 출력하는 값을 모두 다르게 줄 수 없다는 것도 문제이다.
이를 해결하기 위해 props로 컴포넌트에 데이터를 보내는 방법을 알아야 한다.

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

./src/App.js

import React from "react";

function Trip() {
    return <h3>I love going on trips.</h3>;
}

function App() {
    return (
        <div>
            <h1>Hello</h1>
            <Trip place="Jeju" />
        </div>
    );
}

export default App;

place의 props의 값으로 "Jeju"를 추가했다. Vacation 컴포넌트에 사용한 props의 이름은 place이고, place에 "Jeju"라는 값을 담아 Vacation 컴포넌트에 보냈다.

3. 컴포넌트에 props 전달하기

props에는 불리언, 숫자, 배열 등의 다양한 데이터 형을 담을 수 있다.
props에 있는 데이터는 문자열을 제외하고 모두 {}로 감싸야 한다.

./src/App.js

(...)
	<Trip place="Jeju" companion={["Sohee", "Gayoung"]} overseas={false} />
(...)

리액트 실행이 정상적으로 되었지만 Jeju라는 값이 보이지 않는다. 컴포넌트에 props를 보내기만 했을 뿐 아직 사용하지 않았기 때문이다.

4. props 사용하기

./src/App.js

import React from "react";

function Trip(props) {
    return <h1>I went to {props.place}</h1>;
}

function App() {
    return (
        <div>
            <h1>Hello</h1>
      		<h3>I love going on trips.</h3>
            <Trip place="Jeju" />
        </div>
    );
}
export default App;

객체에 있는 값을 사용하기 위해 점(.) 연산자를 사용한다. place props의 값을 사용하려면 props.place와 같이 점 연산자를 사용해야 한다.

5. 구조 분해 할당으로 props 사용하기

ES6의 문법 중 구조 분해 할당을 사용하면 점 연산자를 사용하지 않아도 된다.
구조 분해 할당은 객체에 있는 키 값을 편하게 추출할 수 있게 해주는 자바스크립트 문법이다.

// 두 방법 중 아무거나 사용해도 된다.
function Trip(props) {		
    { place } = props;
    return <h3>I went to {place}</h3>;
}


function Trip({ place }) {
    return <h3>I went to {place}</h3>;
}

6. 여러 개의 컴포넌트에 props 사용하기

./src/App.js

import React from "react";

function Trip({ place }) {
    return <h1>I went to {place}</h1>;
}

function App() {
    return (
        <div>
            <h1>Hello</h1>
            <h3>I love going on trips.</h3>
            <Trip place="Jeju" />
            <Trip place="Japan" />
            <Trip place="America" />
        </div>
    );
}
export default App;