REACT - props

props는 properties를 줄인 표현으로 컴포넌트의 속성을 설정할 때 사용하는 요소이다.

props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(App 컴포넌트가 부모 컴포넌트)에 설정할 수 있다.

 

1. JSX 내부에서 props 랜더링

props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다. props를 랜더링할 때 JSX 내부에서 {} 로 감싸 주면 된다.

const MyComponent = (props) => {
	return <div>안녕하세요 저의 이름은 {props.name}입니다. </div>;
    };
    
    export default MyComponent;

 

2. 컴포넌트를 사용할 때 props 값 지정하기

import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent name="홍길동" />;
    };
    
    export default App;

 

3. props의 기본값 설정 : defaultProps

const MyComponent = (props) => {
	return <div>안녕하세요. 저의 이름은 {props.name}입니다.</div>;
    };
    
    MyComponent.defaultProps = {
    	name : '기본 이름'.
        };
        
        export default MyComponent;

import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent />;
    };
    
    export default App;

 

4. 태그 사이의 내용을 보여주는 children

children은 리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props이다.

import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent>리액트</MyComponent>;
    };
    
    export default App;

const MyComponent = (props) => {
	return(
    	<div>
        안녕하세요. 저의 이름은 {props.name}입니다.<br />
        children 값은 {props.children}입니다.
        </div>
        );
    };
    
    MyComponent.defaultProps = {
    	name : '기본 이름',
        };
        
        export default MyComponent;

 

5. 비구조화 할당 문법을 통해 props 내부 값 추출하기

❓ 비구조화 할당 문법(구조 분해 문법)

객체에서 값을 추출하는 문법으로, 함수의 파라미터 부분에서도 사용할 수 있다. 

만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용하는 것이다.

const MyComponent = (props) => {
	const { name, children } = props;	//비구조화 할당
    return (
    <div>
    안녕하세요 제 이름은 {name} 입니다. <br />
    children 값은 {children}입니다.
    </div>
    );
 };
 
 MyComponent.defaultProps = {
 	name : '기본 이름',
    };
    
    export default MyComponent;

const MyComponent = ({ name, children }) => {
	return (
    	<div>
        안녕하세요, 제 이름은 {name}입니다. <br />
        children 값은 {children}입니다.
        </div>
        );
     };
     
MyComponent.defaultProps = {
 	name : '기본 이름',
    };
    
    export default MyComponent;

=> 이렇게 비구조 할당 문법을 사용하면 name과 children 값을 더 짧은 코드로 사용할 수 있다. 

 

6. propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용한다.

컴포넌트의 propTypes를 지정하는 방법은 defaultProps을 설정하는 것과 비슷하다.  

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;

코드 상단에 propTypes를 import해 주고, MyComponent.propTypes를 설정한다.

이렇게 설정하면 name값은 무조건 문자열 형태로 전달해야 된다는 것을 의미하는데, 

App 컴포넌트(부모 컴포넌트)에서 name값을 문자열이 아닌 숫자로 전달한 뒤 개발자 도구의 콘솔을 확인하면 

에러가 보이는 것을 확인할 수 있다. 

 

7. isRequired를 사용한 필수 propTypes 속성

필수 항목을 설정하는 속성이다.

import PropTypes from 'prop-types';
const MyComponent = ({name, favoriteNumber, children}) => {
    return (
        <div>
             안녕하세요, 제 이름은 {name}입니다.
             children 값은 {children}입니다 <br />
             제가 좋아하는 숫자는 {favoriteNumber}입니다.
        </div>
    );
};

MyComponent.defaultProps = {
    name: '기본 이름',
};

MyComponent.propTypes = {
    name : PropTypes.string,
    favoriteNumber : PropTypes.number.isRequired
}

export default MyComponent;

 

8. 클래스 컴포넌트에서 props 사용하기

클래스 컴포넌트에서 props를 사용할 때는 render() 함수에서 this.props를 조회하면 된다.

그리고 defaultProps와 propTypes는 그대로 사용할 수 있다.

클래스 컴포넌트에서는 defaultProps와 propTypes를 클래스 내부에서 지정하는 방법도 있다. 

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>
        )
    }
}