리액트 - props 값 ES6문법으로 간단하게 작성하기

 props는 properties의 의미로 컴포넌트 속성을 설정할 때 사용한다. 

 

import React from 'react';

 

const ComponentTest = props => {

       return <div> 안녕하세요, 제 이름은 {props.name} 입니다. <br> 

                          그리고 제 나이는 {props.age} 입니다. </br>

}; 

 

export default ComponentTest

 

 

기존 props을 이용하여 컴포넌트 안에 문자열을 보여주려면 props. 이라는 키워드를 앞에 붙여주고 있다. 

이를 편하게 사용하기 위해 es6의 비 구조화 문법(destructuring assignment) 을 사용할 수 있다. 내부 값을 바로 추출하는 방법이다. 

 

 

방법 (1) 

import React from 'react';

 

const ComponentTest = props => {

       const {name , children} = props; 

       return <div> 안녕하세요, 제 이름은 {name}입니다. <br> 

                          그리고 제 나이는 {age}입니다. </br>

}; 

 

export default ComponentTest; 

 

방법 (2) 함수의 파라미터 부분에서도 사용 가능하다.

 

import React from 'react';

 

 

const ComponentTest = ({name, children}) => {

       return <div> 안녕하세요, 제 이름은 {name}입니다. <br> 

                          그리고 제 나이는 {age}입니다. </br>

}; 

 

Component.defaultProps = {

        name : '기본 이름 '

}

 

export default ComponentTest; 

 

 

+ 추가로 props 값을 따로 지정하지 않았을 때 값들이 널값이어서 빈 값을 보여주는 것을 방지하기 위해

기본값을 설정하는 것은 defaultProps 속성을 이용하여 설정한다.