[코낭] 3.3 props / 3.4 state

3.3.6.1 isRequired를 사용하여 필수 propTypes 설정

propType를 지정할 때 뒤에 isRequired를 붙여주면 console창에 경고 메시지를 띄워준다.

import PropTypes from 'prop-types';

const MyComponent = ({name, favoriteNumber, children}) => {
	return (
    	<div>
        	안녕하세요, 제 이름은 {name}입니다. <br/>
            children 값은 {children}
            입니다.
            <br />
            제가 좋아하는 숫자는 {favoriteNumber}입니다.
        </div>
    );
};

MyComponent.propTypes = {
	name: '기본 이름'
};

MyComponent.propTypes = {
	name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
};

export default MyComponent;

3.3.6.2 더 많은 PropTypes종류

• array: 배열
• arrayOf: 특정 PropType으로 이루어진 배열을 의미한다.
  • 예시) arrayOf(PropTypes.number): 숫자로 이루어진 배열
• bool: true 혹은 false 값
• func: 함수
• number: 숫자
• object: 객체
• string: 문자열
• symbol: ES6의 symbol
• node: 렌더링할 수 있는 모든 것
• instanceOf(클래스): 특정 클래스의 인스턴스
• oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나
• oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나
• objectOf(React.PropTypes.number):객체의 모든 키 값이 인자로 주어진 PropType인 객체
• shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체
• any: 아무 종류

3.3.7 클래스형 컴포넌트에서 props 사용하기

클래스형 컴포넌트에서 props를 사용할 때는 render함수에서 this.props를 조회하면 된다.
defaultProps와 propTypes는 똑같은 방식으로 설정할 수 있다.

import {Component} from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Componenet {
	render() {
    	const{name, favoriteNumber, children} = this.props;
        return(
        	<div>
            	안녕하세요, 제 이름은 {name} 입니다. <br/>
                children 값은 {children}
                입니다.
                <br/>
                제가 좋아하는 숫자는 {favoriteNumber}입니다.
            </div>
        );
    }
}

MyComponent.defaultProps = {	
	name: '기본 이름'
};

MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};

export default MyComponent;

클래스형 컴포넌트에서 defaultProps와 propTypes를 설정할 때 class 내부에서 지정하는 방법도 있다.

import {Component} from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Componenet {
	static defaultProps = {
    	name: '기본 이름'
    };
    static propTypes = {
    	name: PropTypes.string,
        favoriteNumber: PropTypes.number.isRequired
    };
    render() {
    	const{name, favoriteNumber, children} = this.props; // 비구조화 할당
        return(...);
    }
}
export default MyComponent;

3.4 state

• 리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
• props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다.
• props를 바꾸려면 부모 컴포넌트에서 바꿔주어야 한다.
• MyComponent를 사용할 때 props를 바꾸어 주어야 값이 변경되고 MyComponent에서 전달받은 name값은 직접 바꿀 수 없다.

3.4.1 클래스형 컴포넌트의 state

컴포넌트에서 state를 설정할 때 constructor메서드를 작성하여 설정한다.

constructor(props){
	super(props);
    // state의 초깃값 설정하기
    this.state = {
    	number:0
    };
}

• 위 코드는 컴포넌트의 생성자 메서드인데 클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(prop)를 호출해 주어야 한다.
• 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 component 클래스가 지닌 생성자 함수를 호출해준다.
• this.state 값에 초깃값을 설정해준다. 컴포넌트의 state는 객체 형식이어야 한다.

render() {
	const{number} = this.state;
    return (
    	<div>
        	<h1>{number}</h1>
            <button
            	onClick={() => {
                	this.setState({number: number+1});
                }}
            >
            	+1
            </button>
        </div>
    );

• render 함수에서 현재 state를 조회할 때 this.state를 조회하면 된다.
• 그리고 button안에 onClick이라는 값을 props로 넣어 주었는데, 버튼이 클릭될 때 호출시킬 함수를 설정할 수 있게 해주는데 이를 이벤트 설정이라고 한다.
• 이벤트로 설정할 함수를 넣어 줄 때는 화살표 함수 문법을 사용하여 넣어 주어야 한다.
• 함수 내부에서는 this.setState라는 함수를 사용했는데 이 함수가 state값을 바꿀 수 있게 해준다.

import Counter from './Counter';

const App = () => {
	return <Counter />;
};

export default App;

브라우저에서 다음과 같이 숫자와 버튼이 나타나고 버튼을 누르면 숫자가 1씩 올라간다.