출처 - 리액트를 다루는 기술(김민준 지음)
props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다.
Component에 원하는 값을 넘겨줄 때 사용하며,
넘겨줄 수 있는 값은 변수, 함수, 객체 등 JS의 요소라면 제한이 없다.
주로 Component의 재사용을 위해 사용한다.
props 값은 부모 컴퍼넌트에서 설정할 수 있다. 자식 컴포넌트에서는 읽기전용이다.
props 사용하기
(1) JSX 내부에서 props 렌더링
props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다.
props를 렌더링할 때 JSX 내부에서 { } 기호로 감싸주면 된다.
// MyComponent.js
import React from 'react';
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>
};
export default MyComponent;
(2) 컴포넌트를 사용할 때 props 값 지정하기
App 컴포넌트에서 MyComponent의 props 값을 지정해 본다
// App.js
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent name="React" />;
};
export default App;
MyComponent에서 {props.name]을 전달하고, App에서 name="react"로 props 값을 지정해준다
(3) props 기본값 설정: defaultProps
방금 설정한 name 값을 지우고 MyComponent에서 defaultProps를 작성해준다
defaultProps는 props 값을 따로 지정하지 않았을 때 보여줄 기본값을 나타낸다
import React from 'react';
const MyComponent = (props) => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
MyComponent.defaultProps = {
name: '기본 이름',
};
export default MyComponent;
출력값 : 안녕하세요, 제 이름은 기본 이름입니다.
(4) 태그 사이의 내용을 보여주는 children
App.js의 MyComponent 태그 사이에 작성한 문자열을 MyComponent 내부에서 보여주려면
props.children 을 사용한다
// App.js
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent>리액트</MyComponent>;
};
export default App;
// MyComponent.js
import React from 'react';
const MyComponent = (props) => {
return (
<div>
안녕하세요, 제 이름은 {props.name}입니다. <br />
children 값은 {props.children}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름',
};
export default MyComponent;
(5) 구조분해할당으로 props 내부 값 추출하기
props 객체의 name과 children을 구조분해 할당으로 선언하면 아래처럼 코드를 간소화할 수 있다
// MyComponent.js
import React from 'react';
const MyComponent = (props) => {
const { name, children } = props;
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름',
};
export default MyComponent;
props 매개변수를 아예 name과 children으로 대체하면 더 간소화된다
// MyComponent.js
import React from 'react';
const MyComponent = ({ name, children }) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름',
};
export default MyComponent;
객체로 선언된 학생 정보를 전달받아 출력하는 컴포넌트
Student 컴포넌트에서 매개변수에 중괄호를 취해줘야 하는 점을 주의한다
App 컴포넌트에서 Student 컴포넌트에 이중객체로 값을 전달해주기 때문이다
// Student.js
import React from 'react';
const Student = ({ student }) => {
const { name, subject, score } = student;
return (
<div>
{name} 학생은 {subject} 수업을 수강중입니다.
<br />
현재 점수는 {score}점으로 {score >= 80 ? 'PASS' : 'FAIL'}입니다.
</div>
);
};
export default Student;
// App.js
import React from 'react';
import Student from './Student';
const App = () => {
const student1 = {
name: 'John',
subject: 'Math',
score: 88,
};
const student2 = {
name: 'David',
subject: 'English',
score: 72,
};
return (
<div>
<Student student={student1} />;
<Student student={student2} />;
</div>
);
};
export default App;