반응형
오늘은 props에 대해 알아보겠습니다. props는 사용자가 생성한 component의 속성(attribute)를 말합니다. 예를 들어 아래의 코드에서 사용자가 생성한 <Subject> 컴포넌트 내부에 title, sub과 같은 사용자 정의 속성을 부여할 경우 이것들을 props라고 합니다.
App.js
import React, { Component } from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
import './App.css';
class App extends Component {
render(){
return (
<div className="App">
{/* 기존코드
<Subject />
*/}
<Subject title="WEB" sub="world wide web!" />
<TOC />
<Content title="HTML" desc="HTML is HyperText Markup Language." />
</div>
);
}
}
export default App;
Subject.js
import React, { Component } from 'react';
class Subject extends Component {
render() {
return (
<div>
<header>
{/* 기존 코드
<h1>WEB</h1>
world wide web
*/}
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
</div>
);
}
}
export default Subject;
위의 예에서 보듯이 기존에는 Subject.js에서 직접 태크와 텍스트로 그려내던 것을
App.js 내에서 Subject 컴포넌트의 title, sub와 같은 속성(props)으로 정의한 다음,
다시 Subject.js에서 이 속성(props)를 위의 코드와 같은 형식으로 불러서 출력할 수 있습니다.
이후 과제 진행을 위해서 Content.js도 props 속성을 이용하여 수정하도록 하겠습니다.
Content.js
import React, { Component } from 'react';
class Content extends Component {
render() {
return (
<div>
<article>
<h2>{this.props.title}</h2>
{this.props.desc}
</article>
</div>
);
}
}
export default Content;
반응형
'Programming > React' 카테고리의 다른 글
React기초- 6.이벤트 (0) | 2020.07.28 |
---|---|
React기초-5.state2 (0) | 2020.07.27 |
React기초-4.state (0) | 2020.07.25 |
React기초-2.컴포넌트 제작 (0) | 2020.07.25 |
React기초-1.설치 및 환경설정 (0) | 2020.07.25 |
댓글