[React] props

choie0423·2021년 3월 27일
0

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: 아무 종류

official : https://github.com/facebook/prop-types


profile
이것저것

관심 있을 만한 포스트

0개의 댓글