리액트 공부 - props / state / onClick

*

props

 

properties 줄임말. 컴포넌트 속성 설정 시 사용 용어. 

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트 (MyCoponent의 부모 컴포넌트는 App 컴포넌트)에서만 설정 가능 

 

App.js

<MyComponent name="React"/>

 

MyComponent.js

            <div>

               안녕하세요. 제 이름은 {this.props.name} 입니다.  

            </div>

 

결과 

안녕하세요. 제 이름은 React 입니다.

 

*

혹은 이렇게 해도 이름에 값을 넣어줄 수 있고 (기본 이름)

class MyComponent extends Component {

    render() {

        return (

            <div>

               안녕하세요. 제 이름은 {this.props.name} 입니다.  

            </div>

        );

    }

}

MyComponent.defaultProps =  {

    name: '기본 이름'

}

*

이렇게 해도 이름을 넣어줄 수 있다 (기본 이름)

class MyComponent extends Component {

    static defaultProps = {

        name: '기본 이름'

    }

    render() {

        return (

            <div>

               안녕하세요. 제 이름은 {this.props.name} 입니다.  

            </div>

        );

    }

}

-

컴포넌트의 필수 props를 지정하거나 props 타입을 지정할 때는 propTypes를 사용

컴포넌트의 propTypes 지정방법은 

 

1

import PropTypes from 'prop-types';

 

대소문자 주의 

 

2

    static propTypes = {

        name: PropTypes.string

    }

 

name props 타입을 문자열로 설정 

 

이러면 prop이 string이 아닐 때 오류가 남 

그래서 문자열이 아닌건 { } 로 감싸줘야 함

 

<MyComponent name={3}/>

 

단 이렇게 하면 3이라고 나오긴 하지만 

콘솔로 오류라고 알려줌 

 

propTypes 종류 

배열array 참거짓bool 함수func 숫자number 객체object 문자열string ES6문법심벌symbol 렌더링할수있는모든것node 리액트요소element 특정클래스인스턴스instanceOf(MyClass) 주어진배열요소중하나oneOf([‘Male’, ‘Female’]) 아무any

 

 

*

state

props는 부모 컴포넌트가 설정. 자신은 해당 props를 읽기 전용으로만 사용 가능 

내부에서 읽고 업데이트 할 수 있으려면 state 사용 

 

언제나 기본값 미리 설정

this.setState() 메소드로 

 

state 초깃값 설정 - state 렌더링 - state 업데이트 

 

App.js

<MyComponent name="React" age={4}/>

 

MyComponent.js

 constructor(props) { //컴포넌트의 생성자 메소드 

        //이 내부에서 state 초깃값 설정 

        super(props);

        this.state={

            number: 0 //초기값 0으로 설정 

        }

    }

    render() {

        return (

            <div>

               <p>안녕하세요. 제 이름은 {this.props.name} 입니다.  </p>

                <p>저는 {this.props.age}살 입니다.</p>

                <p>숫자: {this.state.number}</p>

            </div>

        );

state 업데이트 

 

        this.setState({

            수정할 필드 이름: 값, 

            수정할 또 다른 필드 이름: 값

        })

*

버튼 누르면 1씩 숫자 더해지기 

 

    constructor(props) { //컴포넌트의 생성자 메소드 

        //이 내부에서 state 초깃값 설정 

        super(props);

        this.state={

            number: 0 //초기값 0으로 설정 

        }

 

    }

    render() {

        return (

            <div>

               <p>안녕하세요. 제 이름은 {this.props.name} 입니다.  </p>

                <p>저는 {this.props.age}살 입니다.</p>

                <p>숫자: {this.state.number}</p>

                <button onClick={() => {

                    this.setState({

                        number: this.state.number + 1

                    })

                }}>더하기</button>

            </div>

        );

    }

 

App.js

 

      <MyComponent name="React" age={4}/>