[리액트(React) Study Log] [Person App-006] Working with Props
1. Props 개요
- html 에서 element 안쪽에서 attribute 와 value를 지정하는 것과 마찬가지로 JSX 내의 component 에서는 Props 와 value 를 전달할 수 있음. --> 즉, 부모 component 에서 자식 component 를 사용하면서 Props 와 value 를 전달해 주면, 자식 component 는 Props를 전달 받아 사용할 수 있음. 전달 받은 Props에 의해서 구체화된 자식 component 의 형상이 만들어진다.
- 부모 component 로부터 자식 component 로의 Props 의 전달은 react 의 component 재사용 특성의 핵심임. (같은 종류의 자식 component 라도 부모 component 가 전달하는 Props 에 따라 다른 특성을 가진 자식 component 가 만들어짐.
2. Props 전달하기
// src-App.js
import React, { Component } from 'react';
// src-App.js
import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
render() {
return (
<div className="App">
<h1>Hi, I'm React App</h1>
<p>This is really working!</p>
<Person name="David" age="28" />
<Person name="Lina" age="29">Nice to meet you.</Person>
<Person name="Nick" age="26" />
</div>
);
}
}
export default App;
3. props 받기
- functional components 에서는 props.<prop name>.
(functional components 에서는 props(소문자 복수 형태임, 대문자 Props 사용하면 error 발생) 가 함수의 argument 로 들어감.)
- class-based components 에서는 this.props.<prop name>.
(class-based components 에서는 this 가 해당 object( = component) 를 의미함.)
//src-Person-Person.js
import React from 'react';
const person = (props) => {
return <p>I'm a {props.name} and I am {props.age} years old!</p>
}
export default person;
- 브라우져 확인 (자식 component 로 전달된 'Nice to meet you' 는 화면에 아직 안 보이고 있음.)
