1. Props란?
Props는 Properties의 줄임말로, 컴포넌트의 속성을 설정할 때 사용되는 요소이다.- 컴포넌트 간 값을 전달하는 수단이며, 상위 컴포넌트에서 하위 컴포넌트로만 전달된다. 이를 단방향 데이터 흐름이라고 한다.
- 전달받은 props(전달받은 하위 컴포넌트)는 데이터의 수정이 불가하다.
- props는 n개의 데이터를 전달 할 수 있다.
2. 함수형 컴포넌트에서의 Props
- 부모 컴포넌트에서 전달한
props는 함수형 컴포넌트의 파라미터로 전달된다. - 전달받은
props는 JSX 내부에서 중괄호{}를 사용해 접근할 수 있다. - JSX 내부에 {props.사용할 키} 형태로 작성
예시:
부모 컴포넌트
import React from "react";
import Child from "./Child";
function Parent() {
return <Child name="React" />;
}
export default Parent;자식 컴포넌트
import React from "react";
function Child(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Child;결과:
Hello, React!가 화면에 출력된다.
3. defaultProps
defaultProps는 부모 컴포넌트에서 props를 전달하지 않았을 때 기본값을 설정하는 기능이다.- 이를 통해 컴포넌트가 예상치 못한 오류를 방지할 수 있다.
- 함수형 컴포넌트에서 defaultProps를 사용하려면 컴포넌트명.defaultProps에 기본값을 설정할 props:기본값을 작성한다.
예시:
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
Greeting.defaultProps = {
name: "Guest",
};
export default Greeting;
결과:
name이 전달되지 않으면 기본값인 Guest가 출력된다: Hello, Guest!
클래스형 컴포넌트에서 defaultProps는 propTypes와 동일하게 static 키워드를 사용하거나 클래스에 바로 props의 defaultProps를 선언할 수 있다. (밑에 propTypes에 자세하게 설명함)
4. props.children
props.children은 부모 컴포넌트의 태그 사이에 작성한 내용을 자식 컴포넌트에서 표시할 때 사용된다.- 밑에 예시는 함수형 예시이고, 클래스형 컴포넌트 에서는 함수형과 거의 동일하지만 props 앞에 this라는 키워드를 붙여서 사용한다.
예시:
부모 컴포넌트
function Parent() {
return (
<Wrapper>
<p>This is a child element!</p>
</Wrapper>
);
}자식 컴포넌트
function Wrapper(props) {
return <div className="wrapper">{props.children}</div>;
}
export default Wrapper;결과:
This is a child element!가 div.wrapper 안에 표시된다.
5. propTypes
propTypes는 컴포넌트의 props 타입을 정의하거나 필수 props를 지정할 때 사용된다.- 잘못된 타입의 값이 전달되면, 컴포넌트는 동작하지만 콘솔에 경고 메시지가 표시된다.
- 이는 JavaScript의 유연한 타입 특성을 보완하기 위해 사용된다.
요약 : 데이터 타입 지정은 PropTypes.지정할타입, 필수값 지정은 PropTypes.지정할타입.isRequired을 통해 설정할 수 있다.
Proptypes의 장점
props 타입으로 인한 버그는 에러 핸들링이 어렵다. 왜냐하면 props 타입으로 인한 버그는 syntax error가 아니라서 콘솔에 에러메세지가 출력되지 않아 원인 파악이 어렵기 때문이다. 그렇기 때문에 Proptypes를 사용하면 예기치 못한 에러는 방지할 수 있고, 타입이 정의되어 있기 때문에 직관적으로 필요한 props의 타입을 알 수 있어 컴포넌트의 사용이 편리하고 유지보수가 쉽다.
예시:
함수형 컴포넌트에서 전달받은 props의 데이터 타입을 지정하기 위해서는 반드시 prop-types에서 PropTypes를 import해야한다.
그리고 props를 사용하는 컴포넌트 이름.PropTypes에 데이터 타입을 지정할 props:PropTypes.데이터 타입을 작성해 해당 props의 데이터 타입을 선언한다.
import PropTypes from "prop-types";
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
Greeting.propTypes = {
name: PropTypes.string.isRequired,
};
export default Greeting;결과:
name이 전달되지 않으면 콘솔에 경고가 표시된다.
isRequired는 어떤 컴포넌트인지 상관 없이 props를 전달받은 자식 컴포넌트에서 해당 props를 필수로 전달하도록 지정한다.
PropTypes를 import하고, props의 타입을 지정하는 것과 동일하게 작성한 후 타입으의 뒤에 isRequired를 작성하면 된다.
번외) 클래스형 컴포넌트에서 props의 데이터 타입이나 기본값을 선언하는 방법은 두가지 이다. static키워드를 사용하거나, 클래스에 바로 props의 데이터 타입을 지정하는 방법이다.
예시 :
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class DataTypeClass extends Component {
render() {
return <div>{this.props.data}의 데이터 타입은 문자열 입니다.</div>;
}
}
DataTypeClass.propTypes = {
data: PropTypes.string.isRequired,
};6. 클래스형 컴포넌트에서의 Props
- 클래스형 컴포넌트에서는
props가this.props를 통해 접근된다. - JSX 내부에 {this.props.사용할 키} 형태로 작성.
- 이외의 사용 방식은 함수형 컴포넌트와 유사하다.
예시:
import React, { Component } from "react";
class Greeting extends Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}
export default Greeting;정리
Props는 컴포넌트 간 데이터를 전달하는 가장 기본적인 수단이다.defaultProps와propTypes는 안전한 컴포넌트 사용을 돕는다.props.children은 부모 태그 안의 내용을 자식 컴포넌트에서 렌더링할 때 사용된다.- React의
Props는 UI의 재사용성과 확장성을 높이는 핵심 요소이다.
