[React] props

JUNE·2021년 3월 27일

React

목록 보기

3/7

props

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

JSX 내부에서 props 렌더링

//src/MyComponent.js
import React from 'react';

const MyComponent = props => {
  return <div>Hi, My name is {props.name}. </div>;
};

//default value 지정하기 
MyComponent.dafaultProps = {
  name: '기본 이름'
};

export default MyComponent;

다른 컴포넌트에서 불러와서 props 값 지정하기

//src/App.js
import React from 'react';
import MyComponent from './MyComponent';

const App = () =>{
  return <MyComponent name="JUNE" />;
};

export default App;

다른 컴포넌트 태그 사이의 내용을 보여주기

//src/App.js
import React from 'react';
import MyComponent from './MyComponent';
//컴포넌트 사이에 내용 추가
const App = () => {
  return <MyComponent>This is Children</MyComponent>;
}

export default App;

//src/MyComponent.js
import React from 'react';
//props.children으로 컴포넌트 사이의 내용에 접근할 수 있다.
const MyComponent = props => {
    return <div>
        Hi!, My name is {props.name}.
        <br/>
        children : {props.children}    
    </div>
}

MyComponent.defaultProps = {
    name : 'Default Name'
};
export default MyComponent;

비구조화 할당 구문을 통해 props 내부 값 추출

//src/App.js
import React from 'react';

const MyComponent = props => {
    const {name, children} = props;
    return <div>
        Hi!, My name is {name}.
        <br/>
        children : {children}    
    </div>
}

MyComponent.defaultProps = {
    name : 'Default Name'
};
export default MyComponent;

//src/App.js
import React from 'react';
//파라미터 부분에서 비구조화 할당 문법으로 값 추출하기 
const MyComponent = ({name, children}) => {
    return <div>
        Hi!, My name is {name}.
        <br/>
        children : {children}    
    </div>
}

MyComponent.defaultProps = {
    name : 'Default Name'
};
export default MyComponent;

propTypes를 통해 props 검증

//src/MyComponent.js
import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = props => {
    const {name, children} = props;
    return <div>
        Hi!, My name is {name}.
        <br/>
        children : {children}    
    </div>
}

MyComponent.defaultProps = {
    name : 'Default Name'
};

//prop의 타입을 직접 지정해줄 때 사용
MyComponent.propTypes={
    //name 값은 무조건 string 형태로 전달해야 한다라는 것을 의미
    name: PropTypes.string
}
export default MyComponent;

isRequired를 사용하여 필수 propTypes 설정

//src/MyComponent.js
import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = ({name, num, children}) => {
    return <div>
        Hi!, My name is {name}.
        <br/>
        children : {children}    
        <br/>
        num : {num}
    </div>
}

MyComponent.defaultProps = {
    name : 'Default Name'
};

//prop의 타입을 직접 지정해줄 때 사용
MyComponent.propTypes={
    //name 값은 무조건 string 형태로 전달해야 한다라는 것을 의미
    name: PropTypes.string,
  	//isRequired를 지정하면 해당 변수?(여기서 num)을 지정하지 않으면 
  	//undefined경고가 발생한다.
    num: PropTypes.number.isRequired
}
export default MyComponent;

PropTypes 종류 (잘 모를수 있는 일부만 언급)

arrayOf(다른 PropType) : 특정 PropType으로 이루어진 배열 (ex arrayOf(PropTypes.number)
func : 함수
object : 객체
symbol : ES6의 Symbol (Symbol ? : https://www.zerocho.com/category/ECMAScript/post/58ef98a6177375001892f891
)
node : 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드.. children도 node 타입)
instanceOf(클래스) : 특정 클래스의 인스턴스
oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나
oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나
objectOf(React.PropTypes.number) : 객체의 모든 키 값이 인자로 주어진 PropType인 객체
shape({name:PropTypes.string, num:PropTypes.number}): 주어진 스키마를 가진 객체
any: 아무 종류