목차
Props 정의 Props 예제1 - 컴포넌트에 속성값 전달 Props 예제2 - 다른 컴포넌트로 데이터 전달 Constructor 안의 Props Props 주의사항 - Props 수정 금지
Props 정의
Props는 React 컴포넌트로 전달되는 인수 (= 독립변수) 임.
즉, Props는 JS의 함수 인수나 HTML의 속성과 유사.
[역할]
역할1.
HTML 속성을 통해 컴포넌트에 속성값 전달 .
※ 속성값이 문자열인 경우, 따옴표로 묶음.
역할2.
한 컴포넌트에서 다른 컴포넌트로 데이터를 매개변수로 전달.
※ 속성값이 (문자열)인 경우, 따옴표인 {"" 또는 '')로 묶음.
※ 속성값이 (변수・객체)인 경우, 중괄호인 { } 로 묵음.
[주의사항]
Props는 읽기 전용 이라,
컴포넌트 안에서 값을 변경하려 할 경우 에러 발생 함.
Props 예제1 - 컴포넌트에 속성값 전달
HTML 속성 통해 Props 전달.
※ 전달할 데이터가 문자열인 경우, 따옴표 로 묶음.
[예제] C:\User\사용자명\hz\src\index.js
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
render() {
return <h2>{this.props.name} Homzzang.com</h2>
}
}
const hz = <Hz name="홈짱닷컴" />;
ReactDOM.render(hz, document.getElementById('root'));
Props 예제2 - 다른 컴포넌트로 데이터 전달
다른 컴포넌트로 데이터를 매개변수로 전달.
이때, 전달할 데이터가 변수나 객체인 경우 중괄호인 { } 로 묶음.
[예제1] - 전달할 데이터가 문자열인 경우, 따옴표로 묶음
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
render() {
return <h2>{this.props.name} Homzzang.com</h2>;
}
}
class Qna extends React.Component {
render() {
return (
<div>
<h1>코딩 배우기 좋은 사이트는 어디?</h1>
<Hz name=" 홈짱닷컴" />
</div>
);
}
}
ReactDOM.render(<Qna />, document.getElementById('root'));
[예제2] - 전달할 데이터가 변수인 경우, 중괄호인 { }로 묶음
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
render() {
return <h2>{this.props.name} Homzzang.com</h2>;
}
}
class Qna extends React.Component {
render() {
const site_name = "홈짱닷컴";
return (
<div>
<h1>코딩 배우기 좋은 사이트는 어디?</h1>
<Hz name={ site_name}
</div>
);
}
}
ReactDOM.render(<Qna />, document.getElementById('root'));
[예제3] - 전달할 데이터가 객체인 경우, 중괄호인 { }로 묶음
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
render() {
return <h2>{this.props.info.site_name} Homzzang.com {this.props.info.site_open}</h2>;
}
}
class Qna extends React.Component {
render() {
const site_info = {site_name: "홈짱닷컴", site_open: "2012"};
return (
<div>
<h1>코딩 배우기 좋은 사이트는 어디?</h1>
<Hz info={site_info} />
</div>
);
}
}
ReactDOM.render(<Qna />, document.getElementById('root'));
Constructor 안의 Props
컴포넌트에 constructor() 함수 존재 시,
Props는 constructor() 함수에 전달 돼야 하며,
super() 메서드 통해서 React.Component 에도 전달돼야 함.
[예제]
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>{this.props.name} Homzzang.com</h2>;
}
}
ReactDOM.render(<Hz name="홈짱닷컴" />, document.getElementById('root'));
Props 주의사항 - Props 수정 금지
전달받은 Props 값을 컴포넌트 안에서 임의 변경 시, 에러 발생 함.
반드시, 앞서 소개한 매개변수 전달 방식 통해서 Props 값 수정 !!
[예제]
import React from 'react';
import ReactDOM from 'react-dom';
class Hz extends React.Component {
constructor(props) {
super(props);
}
this.props.name = "코딩 강의"; // 에러 유발시킴.
render() {
return <h2>{this.props.name} Homzzang.com</h2>;
}
}
ReactDOM.render(<Hz name="홈짱닷컴" />, document.getElementById('root'));
최신댓글