[React] Props 와 proptypes

JSX 와 Component

[React] JSX 와 Component

저번 포스팅에서 Component 에 대해서 알아보았습니다.

이번 포스팅에서는 Component 를 통해서 정보를 보내는 방법을 알아보겠습니다.

 

Props

component 태그 안에 key 와 value 값을 명시함으로서 Child Component에 데이터를 넘길 수 있습니다.

그리고 이 데이터를 props 라고 합니다.

아래 예시는 name 이라는 키워드로 "value" 문자열 값을 넘겼습니다.

// src/App.js

import React from 'react';
import Mycomp from './Mycomp'

function App() {
  return (
    <div>
      hello
      <Mycomp name="value" />
    </div>
  );
}

export default App;

 

물론 props 는 여러 개가 될 수 있습니다.

<Mycomp name="value" list={[1, 2, 3]} />

 

Child Component 에서 이 값을 받기 위해서는 함수의 인자로 받을 수 있습니다.

// src/Mycomp.js

import React from "react";

function Mycomp(props) {
    console.log(props);
    return <h3>Hello Mycomp!</h3>;
}

export default Mycomp;

/*
{key: "value"}
*/

 

Function Destructuring 를 사용하면 값을 더 편하고 직관적으로 받을 수 있습니다.

// src/Mycomp.js

import React from "react";

function Mycomp({ name }) {
    return <h3>Hello {name}!</h3>;
}

export default Mycomp;

 

이렇게 component를 만들면 재사용이 가능합니다.

몇 번이고 횟수의 제한없이 사용할 수 있죠.

// src/App.js

import React from 'react';
import Mycomp from './Mycomp'

function App() {
  return (
    <div>
      hello
      <Mycomp name="value1" />
      <Mycomp name="value2" />
      <Mycomp name="value3" />
    </div>
  );
}

export default App;

 

하지만 component 의 사용량이 많아지면 언제까지 똑같이 써줄 수는 없을 것 입니다.

동적으로 component 를 만들어봅시다.

 

그 전에 기존에 사용했던 Mycomp 라는 의미없는 이름은 Fruit으로 바꿔주겠습니다.

추가적으로 데이터는 API 통신을 통해 받아온 것을 전제로 데이터를 저장하고 있는 배열을 하나 만들어주겠습니다.

// src/App.js

const fruits = [
  {
    name: "apple",
    color: "red"
  },
  {
    name: "banana",
    color: "yellow",
  },
  {
    name: "strawberry",
    color: "red"
  }
]

// 생략

 

JSX 에서는 javascript 문법이 가능하기 때문에 map 함수를 사용하여 쉽게 나타낼 수 있습니다.

fruit 배열의 각 값들을 한 번씩 넘겨주게 됩니다.

// src/App.js

import React from 'react';
import Fruit from './Fruit'

const fruits = [
  {
    name: "apple",
    color: "red"
  },
  {
    name: "banana",
    color: "yellow",
  },
  {
    name: "strawberry",
    color: "red"
  }
]

function App() {
  return (
    <div>
      {fruits.map(fruit => <Fruit name={fruit.name} color={fruit.color} />)}
    </div>
  );
}

export default App;

 

넘어온 값을 적절히 사용하면 브라우저에 원하는 대로 결과가 출력된 것을 확인할 수 있습니다.

// src/Fruit.js

import React from "react";

function Fruit({ name, color }) {
    console.log(name);
    console.log(color);

    return <h3>{name}'s color is {color}</h3>;
}

export default Fruit;

 

브라우저에서의 결과는 다음과 같습니다.

apple's color is red
banana's color is yellow
strawberry's color is red

 

하지만 브라우저에서 console을 살펴보면 오류가 존재합니다.

정확히는 오류보다는 경고가 존재합니다.

Warning: Each child in a list should have a unique "key" prop.

 

오류의 내용은 데이터들이 각각을 구별하는 고유한 key를 가져야 한다고 합니다.

따라서 데이터를 약간 수정해보겠습니다.

id 값을 만들어 각각의 object 를 구별해주었습니다.

const fruits = [
  {
    id: 1,
    name: "apple",
    color: "red"
  },
  {
    id: 2,
    name: "banana",
    color: "yellow",
  },
  {
    id: 3,
    name: "strawberry",
    color: "red"
  }
]

 

그리고 마찬가지로 id 값도 넘겨주면 되는데 이 때는 이름을 꼭 key 라고 명시해야 합니다.

// src/App.js

import React from 'react';
import Fruit from './Fruit'

const fruits = [
  {
    id: 1,
    name: "apple",
    color: "red"
  },
  {
    id: 2,
    name: "banana",
    color: "yellow",
  },
  {
    id: 3,
    name: "strawberry",
    color: "red"
  }
]

function App() {
  return (
    <div>
      {fruits.map(fruit => <Fruit key={fruit.id} name={fruit.name} color={fruit.color} />)}
    </div>
  );
}

export default App;

 

다시 브라우저를 확인해보면 오류가 없어진 것을 확인할 수 있습니다.

 

 

protection with proptypes

Child Component 에서는 Parent Component로 부터 값이 넘어올 때 잘 넘어오는지 확인해야할 필요가 있습니다.

그렇지 않으면 값이 잘못넘어왔을 경우 브라우저에 예상치 못한 결과를 사용자에게 제공하게 됩니다.

예시를 위해 데이터를 수정해주겠습니다.

const fruits = [
  {
    id: 1,
    name: "apple",
    color: "red",
    count: 10
  },
  {
    id: 2,
    name: "banana",
    color: "yellow",
    count: 4
  },
  {
    id: 3,
    name: "strawberry",
    color: "red",
    count: 7
  }
]

 

이제 바꾼 데이터를 적용하기 위해 App.js 와 Fruit.js 를 약간 수정해주겠습니다.

// src/App.js

import React from 'react';
import Fruit from './Fruit';

const fruits = [
  {
    id: 1,
    name: "apple",
    color: "red",
    count: 10
  },
  {
    id: 2,
    name: "banana",
    color: "yellow",
    count: 4
  },
  {
    id: 3,
    name: "strawberry",
    color: "red",
    count: 7
  }
]

function App() {
  return (
    <div>
      {fruits.map(fruit => (
        <Fruit
          key={fruit.id}
          name={fruit.name}
          color={fruit.color}
          count={fruit.count}
        />
      ))}
    </div>
  );
}

export default App;

// src/Fruit.js

import React from "react";

function Fruit({ name, color, count }) {
    return <h3>{count} {name}'s color is {color}</h3>;
}

export default Fruit;

 

결과는 문제없이 확인할 수 있습니다.

10 apple's color is red
4 banana's color is yellow
7 strawberry's color is red

 

그 후 props-types 를 설치해야 합니다.

이를 통해 전달받은 props가 원하는 props 인지 검사가 가능합니다.

npm install prop-types

 

설치여부는package.json 에서 확인가능합니다.

  "dependencies": {
    "prop-types": "^15.7.2",
		// 생략
  },

 

props 를 받는 Fruit.js 에 import 해주고 다음과 같이 사용할 수 있습니다.

각 값에 대해서 자료형과 필수 여부를 확인해주는 예시입니다.

// src/Fruit.js

import React from "react";
import PropTypes from 'prop-types';

function Fruit({ name, color, count }) {
    return <h3>{count} {name}'s color is {color}</h3>;
}

export default Fruit;

Fruit.propTypes = {
    name: PropTypes.string.isRequired,
    color: PropTypes.string.isRequired,
    count: PropTypes.number.isRequired
}

 

자세한 건 공식문서를 참고하여 본인의 상황에 맞게 사용하면 되겠습니다.

https://ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 확인 – React