ReactJS - props

ROCKBELL·2022년 11월 30일
0

리액트

목록 보기
4/12

props 란?

pros는 properties 줄인 표현으로 컴포넌트의 속성을 설정할 때 사용하는 요소입니다
props는 직접 조작 할 수 없으며 부모 컴포넌트에서 받아온 데이터를 하위 컴포넌트에 전달해 렌더링합니다

props 랜더링

  • 부모컴포넌트
const App () => {
	const name = '리아';
    <ChildComponent name={name} />
}
export default App;
  • 자식컴포넌트
const ChildComponent = (props) => {
	return <div>안녕하세요, 제 이름은 {props.name} 입니다<div>
}

export default ChildComponent;

defaultProps

만약 prop의 기본값을 정해주고 싶다면 defautProps 프로퍼티로 설정을 해주면 됩니다

const ChildComponent = (props) => {
	return <div>안녕하세요, 제 이름은 {props.name} 입니다<div>
}
ChildComponent.defaultProps = {
	name :"홍길동"
}
export default ChildComponent;

children

  • 부모컴포넌트
const App () => {
	const name = '리아';
    <ChildComponent name={name}>
      {/* children 삽입 영역 */}
      리액트를 배우고 있는 중입니다
    </ChildComponent>
}
  • 자식컴포넌트
const ChildComponent = (props) => {
	return (
    	<div>
        	<p>안녕하세요, 제 이름은 {props.name} 입니다</p>
            {/* children 출력 */}
            <p>{props.children}</p>
        <div>
    )
}

export default ChildComponent;

비구조화 할당

  • 부모컴포넌트
const App () => {
	const name = '리아';
    <ChildComponent name={name} age="20" />
}
export default App;
  • 자식컴포넌트
const ChildComponent = (props) => {
    const {name, age} = props;
	return <div>안녕하세요, 제 이름은 {name}이고 나이는 {age}살 입니다<div>
}

export default ChildComponent;
{/*함수 파라미터에서 구조분해할당도 가능 */}
const ChildComponent = ({name, age}) => {
	return <div>안녕하세요, 제 이름은 {name}이고 나이는 {age}살 입니다<div>
}

export default ChildComponent;

propTypes

props의 타입을 지정하거나 필수로 설정해야 할때 사용합니다

propTypes 적용

import PropTypes from 'prop-types';
const ChildComponent = ({name, age}) => {
	return <div>안녕하세요, 제 이름은 {name}이고 나이는 {age}살 입니다<div>
}
ChildrenCompoent.propTyes = {
	name : PropTypes.string,
    age: PropTypes.number
}
export default ChildComponent;

isRequired

필수로 지정하고 싶을때는 .isRequired 를 추가 작성 해주면 됩니다

ChildrenCompoent.propTyes = {
	name : PropTypes.string.isRequired,
    age: PropTypes.number
}

PropTypes 종류

  • array
  • arraOf
  • bool
  • func
  • number
  • object
  • string
  • symbol
  • node
  • instanceOf
  • oneOf
  • oneOfType
  • objectOf
  • shape
profile
luv it

0개의 댓글