8 - 리액트 기초 개념: props

props는 컴포넌트에서 컴포넌트로 전달하는 데이터를 말한다. (매개변수와 비슷)

props를 사용하면 컴포넌트를 효율적으로 재사용 할 수 있다.

 

1. 컴포넌트 여러 개 사용해 보기

영화 앱에 목록을 컴포넌트로 표현한다고 해본다.
Potato 컴포넌트의 이름을 Movie로 바꾼다.

 

import React from 'react';

function Movie() {
  return <h1>I like potato</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Movie />
    </div>
  );
}

export default App;

 

두 번째 줄의 function 이름을 Movie로 바꾸고

아홉 번째 줄의 <Potato />를 <Movie />로 바꿈

 

Movie 컴포넌트 1개가 영화 목록 1개라고 가정해보자

<Movie />를 20개 복사해서 붙여넣는다고 해보면 굉장히 비효율적이다.

게다가 모두 같은 값이 출력된다 (I like potato *20)

컴포넌트가 서로 다른 값이 나와야 영화 목록이 될텐데...

 

그래서 props를 사용해야 한다.

 

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

App.js에서 컴포넌트의 이름을 Movie에서 Food로 변경한다.

import React from 'react';

function Food() {
  return <h1>I like potato</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food />
    </div>
  );
}

export default App;

 

이제 props를 이용하여 Food 컴포넌트에 데이터를 보낸다

 

<Food />를 <Food fav="K=kimchi" />로 수정하자.

fav props의 값으로 "kimchi"를 추가하는 것이다. (fav는 favorite의 줄임말)

import React from 'react';

function Food() {
  return <h1>I like potato</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav="kimchi" />
    </div>
  );
}

export default App;

 

이게 props를 이용하여 Food 컴포넌트에 데이터를 보내는 방법이다.

Food 컴포넌트에 사용한 props의 이름은 fav고, fav에 "kimchi"라는 값을 담아

Food 컴포넌트에 보낸것이다.

 

props에는 불리언 값(true, false), 숫자, 배열 등 다양한 형태의 데이터를 담을 수 있다.

※주의할 점!

props에 있는 데이터는 문자열인 경우를 제외하면 모두 주괄호 { } 로 값을 감싸야 한다!

 

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

Food 컴포넌트에 something, papapapa props를 추가하고 저장한다.

import React from 'react';

function Food() {
  return <h1>I like potato</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav="kimchi" something={true} papapapa={['hello', 1, 2, 3, 4, true]} />
    </div>
  );
}

export default App;

 

그리고 브라우저를 봐도 아무 변하가 없다. 

Food 컴포넌트에서 props를 보내기만 했고 아직 사용 안했음.

그럼 Food 컴포넌트에 props를 사용하려면 어떻게 해야하나?

 

 

4. props 사용하기

우선 Food 컴포넌트의 인자로 전달된 prop를 출력 해본다.

Food 컴포넌트의 인자인 props는 potato로 바꿔도 된다.

import React from 'react';

function Food(props) {
  console.log(props);
  return <h1>I like potato</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav="kimchi" something={true} papapapa={['hello', 1, 2, 3, 4, true]} />
    </div>
  );
}

export default App;

 

다시 리액트 앱 화면(브라우저)은 아무 변화 없다.

console.log() 함수는 개발자 도구로 확인가능 (브라우저에서 F12)

Food 컴포넌트에 전달된 props(fav, something, papapapa)를 속성으로 가지는 객체가 출력됨,

 

fav="kimchi" something={true} papapapa={['hello', 1, 2, 3, 4, true]} 

props에 있는 데이터를 객체로 변환해서 Food 컴포넌트(함수)에 전달


function Food(props) {  <==== 전달받은 props를 props라는 인자로 받아 출력
	console.log(props)  <====
}

이러한 과정으로 props가 전달된다

 

 

다시 something=... papapapapa=... 는 삭제해주고 kimchi를 화면에 출력하려면

console.log를 지우고 <h1>I like potato </h1>에서 potato를 지우고 {props.fav}를 입력. 

props.fav를 중괄호로 감싸준다.

import React from 'react';

function Food(props) {
  return <h1>I like { props.fav }</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav="kimchi" />
    </div>
  );
}

export default App;

객체에 있는 값을 사용하려면 점 연산자(.)를 쓴다.

fav props의 값을 사용하려면 props.fav와 같이 점 연산자를 사용.

 

※ props에 포함된 데이터 개수가 많을 경우 매번 props.fav와 같은 방법은 불편하다

이 때 구조 분해 할당을 사용한다.

 

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

자바스크립트 ES6 문법의 구조 분해 할당을 사용하면 점 연산자 안써도 됨.

 

아래 코드는 Food 컴포넌트로 전달한 fav props를 Food 컴포넌트(함수)에서

{ fav } = props;와 같은 방법으로 사용한 것.

import React from 'react';

================================

function Food(props) {
  { fav } = props;
  return <h1>I like {fav}</h1>;
}

--------------------------------

function Food({ fav }) {
  return <h1>I like {fav}</h1>;
}

================================

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav="kimchi" />
    </div>
  );
}

export default App;

==== 와 ------ 로 나눈 코드 둘중 아무거나 사용할 수 있다.

 

 

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

앞으로 props는 대부분 구조 분해 할당으로 사용함. (모를 시 바로 위에 있는 구조 분해 할당 참고)

 

 

- Food 컴포넌트 3개를 추가하고 fav props 값이 서로 다르도록 수정.

import React from 'react';

function Food({ fav }) {
  return <h1>I like {fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <Food fav="kimchi" />
      <Food fav="ramyun" />
      <Food fav="samgiopsal" />
      <Food fav="chukumi" />
    </div>
  );
}

export default App;

각각의 fav props에는 서로 다른 값이 들어 있으니 같은 컴포넌트를 사용해도 서로 다른 문장이 출력됐다.

이것을 컴포넌트를 재사용 한다고도 함.

이것을 발전시키면 영화 앱이 된다.

 

---

요약

1. 컴포넌트가 무엇인지 알아보고 JSX 공부함
2. JSX는 단지 HTML과 자바스크립트를 조합한 문법임
3. JSX를 이용해서 컴포넌트를 작성했고, 컴포넌트의 이름은 대문자로 시작해야 함
4. 컴포넌트에 데이터를 전달할 때는 props를 사용하면 됨

컴포넌트에 props를 전달하면 props에 있는 데이터가 하나의 객체로 변환되어

컴포넌트(함수)의 인자로 전달되고, 이걸 받아 컴포넌트(함수)에서 사용 가능.

ES6의 구조 분해 할당을 사용하면 props를 더 편리하게 사용 가능