[React-09]react의 props 다시 자세히 알아보자

JavaScript와 HTML,CSS등에 대해서는 일체 다루지 않는다.

기초 지식은 다른 강의를 참조하도록 하라.

이 강의는 React의 사용법 위주로 작성되어 있다.

왜 React여야는지, React를 써야하는지에 대하지는 논하지 않으므로 그런 자료는 다른 데이터를 참조하라.

참조:

react docs 

일단 시작하기 전에 프로젝트를 간략하게 만들어보자.

일단 위 처럼 프로젝트를 한번 만들어준다.

프로젝트 구조는 위에서 변하지 않는다.  내부적으로 코드를 보는 일만 남았다.

props의 특징

1.props는 readonly이다.

2.props는 타입을 지정할 수 있다.

3.props은 required를 지정할 수 있다.

4.props 기본값을 정할 수 있다.

하나씩 알아보자.

props는 readonly

props는 readonly이다 과연 readonly맞는지 확인하도록 해보자.

import React, {Component} from 'react';

class Hello extends Component {
    constructor(props) {
        super(props);
        this.props.name = 'hi';
    }

    render() {
        return (
            <div className="Hello">
                hello {this.props.name}!
            </div>
        );
    }
}


export default Hello;

위와 같은 코드를 호출한다고 가정하자.

this.props.name에 값을 주었는데 위의 코드가 정상적으로 작동할까?

보다시피 readonly라서 수정이 불가능하다.

그렇다. props는 어떻게도 수정이 불가능 하다.

과거 버전에서는 setProps나 setReplace로 변경 가능했지만 지금은 deprecate되어 사용할 수 없다.

props로 type지정하기

props는 type을 지정할 수 있다.

근데 그냥은 안되고 위와 같이 prop-types를 설치해준다.

npm install --save prop-types

아래 예시를 보자

//App.js
import React, {Component} from 'react';
import Hello from './Hello';

class App extends Component {
    no = 3.14;

    render() {
        return (
            <div className="App">
                <Hello name={this.no}/>
            </div>);
    }
}

export default App;

//Hello.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Hello extends Component {
    render() {
        return (
            <div className="Hello">
                hello {this.props.name}!
            </div>);
    }
}

Hello.propTypes = {name: PropTypes.string};
export default Hello;

위 예제를 보면 App에서 Hello를 호출하면서 props로 넘버를 호출한다. 근데 아래를 잘 보자.

Hello.propTypes = {name: PropTypes.string};

방식은 위와 같은데 PropTypes를 string으로 지정했다.

이제 위의 코드를 실행해보자.

빌드가 안되는것도 아니고 실행도 된다. 그러나 타입 미스매칭이 뜨기 때문에 에러를 확인하기 쉽다.

Props에서 required지정하기

//App.js
import React, {Component} from 'react';
import Hello from './Hello';

class App extends Component {

    render() {
        return (
            <div className="App">
                <Hello/>
            </div>);
    }
}

export default App;

//Hello.js
import React, {Component} from 'react';
import PropTypes from 'prop-types';

class Hello extends Component {
    render() {
        return (
            <div className="Hello">
                hello {this.props.name}!
            </div>);
    }
}

Hello.propTypes = {
    name: PropTypes.string.isRequired
};
export default Hello;

위의 코드도 확대해서 한군데를 보도록 하자.

Hello.propTypes = {
    name: PropTypes.string.isRequired
};

여기 보면 isRequired가 지정되있다. 한번 실행해보자.

기본값을 안정하면 에러가 뜨는걸 확인할 수 있다.

props에 기본값 지정하기

//App.js
import React, {Component} from 'react';
import Hello from './Hello';

class App extends Component {

    render() {
        return (
            <div className="App">
                <Hello/>
            </div>
        );
    }
}

export default App;

//Hello.js
import React, {Component} from 'react';

class Hello extends Component {
    render() {
        return (
            <div className="Hello">
                hello {this.props.name}!
            </div>
        );
    }
}

Hello.defaultProps = {
    name: 'jiharu'
};

export default Hello;

기본값도 정할 수 있다.

기본값을 정하는 코드를 보자.

Hello.defaultProps = {
    name: 'jiharu'
};

만약 여러분이 props의 값을 지정하지 않고 넘긴다면 기본값으로 출력하게된다.

props를 안넘겨도 출력되는걸 확인할 수 있다.