React 정복기(4) - props 기본 사용법

props는 properties의 약자로 컴포넌트 속성을 설정할 때 사용
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 가능

예시로 부모 컴포넌트(App.js)에서 name 이라는 porps를 만들어 자식 컴포넌트(Puppy.js)에 전달해 보겠습니다

props 기본 사용법

부모 컴포넌트

App.js

import React from 'react';
import './App.css';
import Puppy from "./Puppy";

function App (){
    return(
        <div>
            <Puppy name="hyun-mee"/>
        </div>
    );
}

export default App;

자식 컴포넌트(함수형)에서 props 사용

Puppy.js

import React from 'react';

const Puppy = (props) => {
    return (
        <div>내 강아지 이름은 {props.name} 입니다.</div>
    );
}

export default Puppy;

자식 컴포넌트(클래스형)에서 props 사용

import React, { Component } from 'react';

class Puppy extends Component {
    render(){
        const { name } = this.props;
        return(
            <div>내 강아지 이름은 {name} 입니다.</div>
        );
    }
}

export default Puppy;

props 기본값 설정: defualtProps

defaultProps는 props 값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정함

부모 컴포넌트에서 'name' props 제거

App.js

import React from 'react';
import './App.css';
import Puppy from "./Puppy";

function App (){
    return(
        <div>
            <Puppy />
        </div>
    );
}

export default App;

자식 컴포넌트(함수형)에서 props 기본값 설정

Puppy.js

import React, { Component } from 'react';

const Puppy = (props) => {
    return(
        <div>내 강아지 이름은 {props.name} 입니다.</div>
    );
}
Puppy.defaultProps = {
  name: '꼬미'
};

export default Puppy;

자식 컴포넌트(클래스형)에서 props 기본값 설정

Puppy.js

import React, { Component } from 'react';

class Puppy extends Component {
    render() {
        const {name} = this.props;
        return(
            <div>내 강아지 이름은 {name} 입니다.</div>
        );
    }
}

Puppy.defaultProps = {
    name: '뽀뽀'
};

export default Puppy;