React - props

props ?

• properties 의 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소
• props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정할 수 있습니다.

순서

props 렌더링하기 ⇒ props 값 설정하기 ⇒ props 기본 값 설정하기 ⇒ props 값 검증하기

1. JSX 내부에서 props 렌더링

• props를 렌더링할 때는 JSX 내부에서 { } 안에 감싸 주면 됩니다.

    import React, {Componenet} from 'react';
    
    class One extends Coponent {
    	render() {
    		return (
    			<div>
    				**//props에 접근 할 떄는 this 키워드를 사용하여 접근**
    				안녕하세요, 제 이름은 **{this.props.name}**
    			</div>
    		);
    	}
    }
    
    export default One;

2. 컴포넌트 사용할 때 props 값 설정

props 값을 설정하는 방법은 HTML 태그에 속성을 설정하는 것과 비슷합니다.

import React, {component} from 'react';
import One from './one.js';

class App extends Coponenet {
	render() {
		return (
			<One name = '홍길동'/>
		);
	}
}
export default App;

3. props 기본 값 설정 : defaultProps

방금 설정한 name 의 값을 없애면 현재 name 값을 지정하지 않았기 때문에 "안녕하세요, 제 이름은" 만 나옵니다. props 값을 지정하지 않았을 때 기본 값으로 설정하는 defaultProps를 알아봅시다.

1 ) class 밖에서 만드는 방법

import React,{Component} from 'react';

class One extends Coponent {
	(...)
}

One.defaultProps = {
	name : 'default name'
}

export default MyComponent;

 2) class 내부에서 정의하는 방법.

import React,{Component} from 'react';

class One extends Coponent {
	static defaultProps = {
		name : 'default name'
	} 
	(...)
}

export default MyComponent;

4. props 검증 : propTypes

• 컴포넌트의 필수 props를 지정하거나 props 타입을 지정할 때는 propTypes를 사용합니다. 컴포넌트의 propTypes를 지정하는 방법은 defaultProps를 설정하는 것과 비슷합니다. propTypes를 사용하려면 우선 코드 위쪽에 propTypes를 불러와야 합니다.

    import PropTypes from 'prop-types';

• 그 다음에는 클래스 밖에서 설정해도 됩니다.

    import React, {Component} from 'react'
    import propType from 'prop-types';
    
    class One extends Component {
      (...)
    }
    
    One.propTypes = {
    	name : propTypes.string //name props 타입을 문자열로 설정
    }
    
    export default MyComponent;

• class 내부에서도 가능합니다.

    import React, {Component} from 'react'
    import propType from 'prop-types';
    
    import React,{Component} from 'react';
    
    class One extends Coponent {
    	static defaultProps = {
    		name : 'default name'
    	} 
    
    	static propTypes = {
    		name : propTypes.string // name props 타입을 문자열로 설정
    	}
    	(...)
    }
    
    export default MyComponent;

• name props 타입을 문자열로 설정했습니다. App 컴포넌트에서 One의 name 값을 문자열이 아닌 숫자로 전달해 봅시다.

    //App.js
    <One name = {3}/>

• 3 을 {} 으로 감싼 이유는??? ⇒ '문자열' 이외 값을 컴포넌트에 전달 할 때는 {} 로 감싸야 합니다.