일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- form
- 장고
- DRF
- HTML
- react
- AWS
- 파이썬
- django ORM
- javascript
- 알고리즘 문제
- 파이썬 알고리즘
- java
- Baekjoon
- js
- API
- 알고리즘 연습
- web
- django widget
- CSS
- MAC
- 알고리즘 풀이
- Algorithm
- Git
- Django
- c++
- PYTHON
- 알고리즘
- 백준
- es6
- django rest framework
- Today
- Total
수학과의 좌충우돌 프로그래밍
[React] Props 와 proptypes 본문
저번 포스팅에서 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
'웹프로그래밍 > React' 카테고리의 다른 글
[React] Axios 와 CSS (0) | 2020.01.27 |
---|---|
[React] Component Life Cycle method (0) | 2020.01.26 |
[React] Class Component 와 State (1) | 2020.01.26 |
[React] JSX 와 Component (0) | 2020.01.25 |
[React] React 시작하기, create-react-app (3) | 2020.01.23 |