1.Props란?
props는 properties를 줄인 표현으로, 컴포넌트의 속성을 설정할 때 사용하는 요소이다.
props값은 부모 컴포넌트에서 설정할 수 있다.
가.사용 방법
아래와 같이 MyComponent컴포넌트(자식 컴포넌트)를 수정하여 해당 컴포넌트에서
name이라는 props를 렌더링한다고 하면 아래와 같이 코드를 작성할 수 있다.
props값은 (자식)컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다.
props를 렌더링할 때는 앞서 배웠던 것처럼 JSX내부에서 {}기호로 감싸주면 된다.
[ MyComponent컴포넌트(자식 컴포넌트) ]
import React from 'react';
const MyComponent = (props) => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
export default MyComponent;
이제 App컴포넌트(부모 컴포넌트)에서
MyComponent의 props값을 지정하는 코드는 다음과 같다.
[ App컴포넌트(부모 컴포넌트) ]
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent name="React" ></MyComponent>;
};
export default App;
출력 결과 >> 안녕하세요, 제이름은 React입니다.
나.defaultProps 설정
위 코드에서 부모 컴포넌트(App.js)의 name값을 지우고
아래 코드와 같이 저장하면,
[ App컴포넌트(부모 컴포넌트) ]
const App = () => {
return <MyComponent />;
};
출력 결과 >> 안녕하세요, 제이름은 입니다.
위 처럼 props 값이 없으므로 name값이 지정되지 않는다.
props 값을 부모 컴포넌트에서 지정하지 않아도 기본값으로 저장할 수 있다.
defaultProps를 설정해주면 가능하다.
defaultProps를 설정방법은 아래와 같다.
[ MyComponent컴포넌트(자식 컴포넌트) ]
import React from 'react';
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;
출력 결과 >> 안녕하세요, 제이름은 기본 이름입니다.
다. Childern 및 구조 분해 할당
다음으로 태그 사이의 내용을 보여주는 Children에 대해 알아보자.
부모 컴포넌트인 App 컴포넌트에
'<MyComponent>리액트</MyComponent>'
처럼 태그 사이에 내용을 추가해보면 아래와 같다.
[ App컴포넌트(부모 컴포넌트) ]
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent>리액트</MyComponent>;
};
export default App;
자식 컴포넌트인 MyComponent의 태그 사이에 작성한 문자열을
MyComponent의 내부에서 보여주려면 prop.children을 사용해야한다.
prop.children을 사용할 때 props.childern을 사용해서
props.라는 키워드를 앞에 붙여줘야하는데
매번 이런식으로 키워드를 붙이는 것이 번거로우므로, 구조 분해 할당을 사용해서 작성한다.
아래 코드에서 const {name, childern} = props;
이 부분에 해당한다. 각 name과 childern의 변수로 props를 분해 할당한 것이다.
[ MyComponent컴포넌트(자식 컴포넌트) ]
import React from 'react';
const MyComponent = props => {
const { name, children } = props;
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;
출력결과 >> 안녕하세요, 제이름은 기본 이름입니다.
children 값은 리액트입니다.
이것도 번거로우면 애초에 props를 인자로 넣어줄때,
props 대신 {name, children}을 넣어주면 된다.
const MyComponent = ({name, children}) =>{}
이런 식으로 작성하면된다.
[ MyComponent컴포넌트(자식 컴포넌트) ]
import React from 'react';
const MyComponent = ({ name, children }) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;
출력결과 >> 안녕하세요, 제이름은 기본 이름입니다.
children 값은 리액트입니다.
라.propTypes
다음으로 propTypes를 이용하면 컴포넌트의 필수 props를 지정하거나
props의 타입을 지정할 수 있다.
컴포넌트의 propTypes를 지정하는 방법은
먼저 코드 상단에 import구문을 사용해서 propTypes를 불러와야한다.
import PropTypes from 'prop-types';
다음으로는 아래 코드와 같이 작성한다.
MyComponent.propTypes = { name: PropTypes.string,... };
이 코드의 의미는 name값은 무조건 문자열(string)형태로 전달해야한다는 것을 의미한다.
[ MyComponent컴포넌트(자식 컴포넌트) ]
import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = ({ name, children }) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름'
};
MyComponent.propTypes = {
name: PropTypes.string
};
export default MyComponent;
출력결과 >> 안녕하세요, 제이름은 기본 이름입니다.
children 값은 리액트입니다.
만약 name이라는 props의 값이 string타입이 아닌 숫자형(number)이라면
화면에 숫자로 출력되더라도 콘솔창에 오류가 나타난다.
만약 props값을 부모컴포넌트에서 넘겨주지 않았을 경우 경고 메세지를 띄울 수 있다.
방법은 propTypes를 지정할 때 뒤에 isRequired를 붙여주면 된다.
MyComponent.propTypes = { name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired };
이렇게 지정해주고 난 뒤 부모컴포넌트인 App.js에서
<MyComponent name="리액트" favoriteNumber={2}>
위처럼 favoriteNumbers라는 props값을 지정해주지 않을 경우 콘솔창에 경고가 뜬다.
[ MyComponent컴포넌트(자식 컴포넌트) ]
import React from "react";
import PropTypes from "prop-types";
const MyComponent = ({ name, favoriteNumber, children }) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}
입니다.
<br />
제가 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
};
MyComponent.defaultProps = {
name: "기본 이름"
};
MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired
};
export default MyComponent;
[ App컴포넌트(부모 컴포넌트) ]
import React from "react";
import MyComponent from "./MyComponent";
const App = () => {
return (
<MyComponent name="리액트" favoriteNumber={2}>
리액트
</MyComponent>
);
};
export default App;
favoriteNumbers라는 props값을 지정해주면 다음과 같이 출력된다.
출력결과 >> 안녕하세요, 제이름은 기본 이름입니다.
children 값은 리액트입니다.
제가 좋아하는 숫자는 2입니다.
마. 클래스형 컴포넌트에서의 props 비교
클래스형 컴포넌트에서 prop를 사용할 때는 render함수에서 this.props를 조회하여 사용한다.
class MyComponent extends Component {
render() {
const { name, favoriteNumber, children } = this.props;
return (
위에서 함수형 컴포넌트에서 props를 사용하는 방법과 비교해보면 아래와 같다.
함수형 컴포넌트 | 클래스형 컴포넌트 |
import React from "react"; import PropTypes from "prop-types"; const MyComponent = ({ name, favoriteNumber, children }) => { return ( <div> 안녕하세요, 제 이름은 {name}입니다. <br /> children 값은 {children} 입니다. <br /> 제가 좋아하는 숫자는 {favoriteNumber}입니다. </div> ); }; MyComponent.defaultProps = { name: "기본 이름" }; MyComponent.propTypes = { name: PropTypes.string, favoriteNumber: PropTypes.number.isRequired }; export default MyComponent; |
import React, { Component } from "react"; import PropTypes from "prop-types"; class MyComponent extends Component { render() { const { name, favoriteNumber, children } = this.props; return ( <div> 안녕하세요, 제 이름은 {name}입니다. <br /> children 값은 {children} 입니다. <br /> 제가 좋아하는 숫자는 {favoriteNumber}입니다. </div> ); } } MyComponent.defaultProps = { name: "기본 이름" }; MyComponent.propTypes = { name: PropTypes.string, favoriteNumber: PropTypes.number.isRequired }; export default MyComponent; |
클래스형 컴포넌트에서 defaultProps와 propTypes를
class내부에서 지정하는 방법은 아래와 같다.
static defaultProps = {} static propTypes = {} 을 사용한다.
[ MyComponent컴포넌트(자식 컴포넌트) ]
import React, { Component } from "react";
import PropTypes from "prop-types";
class MyComponent extends Component {
static defaultProps = {
name: "기본 이름"
};
static propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired
};
render() {
const { name, favoriteNumber, children } = this.props;
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}
입니다.
<br />
제가 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
}
}
export default MyComponent;
'프론트앤드 > React' 카테고리의 다른 글
[포스코x코딩온] 웹개발자 입문 과정 8주차 | 이벤트 핸들링 (0) | 2023.04.25 |
---|---|
[포스코x코딩온] 웹개발자 입문 과정 8주차 | state 와 useState (0) | 2023.04.23 |
[포스코x코딩온] 웹개발자 입문 과정 8주차 | 컴포넌트(함수형|클래스형) (0) | 2023.04.23 |
[포스코x코딩온] 웹개발자 입문 과정 8주차 | JSX문법 (0) | 2023.04.21 |
[포스코x코딩온] 웹개발자 입문 과정 8주차 | React.js 정의 및 설치(MAC) (0) | 2023.04.20 |