리액트 | props

https://goddaehee.tistory.com/300

props ( properties 프로퍼티의 줄임말 )

- 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.)
- 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.)

 

1. 상위 컴포넌트에서 하위 컴포넌트로 전달하는 매개변수

2. 객체 형태로 전달되기 때문에 {}로 값을 받습니다.

3. props은 읽기전용입니다.(값은 부모에서 바꿔서 전달합니다.)

 

사용방법

 - 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 

 

 사용방법 1 

App.js

import { Fragment } from "react";
import MyComponent from "./component/MyComponent";
import MyComponent2 from "./component/MyComponent2";
import MyComponent3 from "./component/MyComponent3";

const App = () => {
    return (
        <Fragment>
            <h3>나의 App.JS</h3>
            <MyComponent name={'홍길동'} age={20}/>           
            <MyComponent2/>  
            <MyComponent3/>           
        </Fragment>
    )
}

export default App; //내보내기

MyComponent.js

const MyComponent = ({name, age}) => {
    console.log(props);
    const a = props.name;
    const b = props.age;

    return (
         <Fragment>  
            <div>나의 첫번째 컴포넌트</div>
            <div>props값: {a}</div>
            <div>props값: {b}</div>
        </Fragment>
    )
}

export default MyComponent;

 

 

 사용방법 2

 

MyComponent.js

const MyComponent = (props) => {

    const {name,age,email} = props;


    return (
        <Fragment>  
            <div>나의 첫번째 컴포넌트</div>
            <div>props값: {name}</div>
            <div>props값: {age}</div>
            <div>props값: {email}</div>
        </Fragment>
    )
}
export default MyComponent;

 

props 기본값 지정하기 

컴포넌트명.defaultProps={}

MyComponent.js

MyComponent.defaultProps = {
    name : "이름없음",
    age : 0,
    email : "bb@naver.com",
    addr : "서울시" //addr은 전달되지 않지만 기본값
}

전달되지 않는 매개값은 defaultProps에서 지정한 값이 기본값이 된다.

 

props의 타입검증

컴포넌트명.propTypes={}

 

타입이 맞지 않으면 개발자 도구에 에러뜸

 임포트 : import propTypes from "prop-types"; //프롭스 타입검증

 

isRequired : 값이 반드시 있어야 함 ( null이라도 ) 

MyComponent.propTypes = {
    name : propTypes.string, //타입만 검증
    age : propTypes.number, //타입만 검증
    email : propTypes.string.isRequired //문자열타입 반드시 전달(비면 안된다.)
}

 

props의 같은 키의 값이 여러번 들어가게 된다면

import { Fragment } from "react";
import MyComponent from "./component/MyComponent";
import MyComponent2 from "./component/MyComponent2";
import MyComponent3 from "./component/MyComponent3";




const App = () => {
    return (
        <Fragment>
            <h3>나의 App.JS</h3>
            {/* props */}  
            <MyComponent name={'홍길동'} age={20}/>           
            <MyComponent2 name={'홍길자'}/>  
            <MyComponent2 name={'이순신'}/>
            {/* 클래스형 props */}  
            <MyComponent3 name={'강감찬'}/>           
        </Fragment>
    )
}

export default App; //내보내기

이렇게 순서대로 나온다.