TIL | #7 React | props, PropTypes, state

2021-03-29(월)

props(Properties)

컴포넌트 속성을 설정할 때 사용하는 요소
props는 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
자식 컴포넌트에서는 props를 받아오기만 하고 받아온 props를 직접 수정할 수 없다.

defaultProps

// MyCompoenet.js

// 기본 프로퍼티스를 정의
MyComponent.defaultProps = {
    name: 'props.name',
};

PropTypes

// MyCompoenet.js

import PropTypes from 'prop-types';

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

// 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때
// 사용한다. defaultProps를 설정하는 것과 비슷하다.
// 타입의 종류 : bool, number, string, array, func, object, 
// instanceOf(클래스), any, node(렌더링할 수 있는 모든 것) 등

클래스형 컴포넌트

// MyComponent.js

class MyComponent extends Component {
    render() {
        // 클래스형 컴포넌트에서 props를 사용할 때는 this.props로 조회
        const { name, favoriteNumber, children } = this.props;
        return (
            <div>
                안녕하세요 . 내이름은 {name} 입니다.
                <br />
                children 값은 {children} 입니다.
                <br />
                내가 좋아하는 숫자는 {favoriteNumber} 입니다.
            </div>
        );
    }

    static defaultProps = {
        name: 'props.name',
    };
    static propTypes = {
        name: PropTypes.string,
        favoriteNumber: PropTypes.number,
    };
}

state

컴포넌트 내부에서 바뀔 수 있는 값을 말한다.

두가지 종류

• 클래스형 컴포넌트가 가지고 있는 state
• 함수형 컴포넌트가 가지고 있는 useState

클래스형 컴포넌트가 가지고 있는 state

// Counter.js

import React from 'react';

class Counter extends React.Component {
		
    // constructor(props) {
    //     super(props);
    //     // state의 초깃 값 설정 (Object Type)
    //     this.state = {
    //         number: 0,
    //         fixedNumber: 0,
    //     };
    // }

    state = {
        number: 0,
        fixedNumber: 0,
    };
    render() {
        // state를 조회할 때는 this.state로
        const { number, fixedNumber } = this.state;
        return (
            <div>
                <h1>{number}</h1>
                <h1>바뀌지 않는 값 : {fixedNumber}</h1>
                <button
                    onClick={() => {
                        // this.setState를 사용해 state에 새로운 값을 넣을 수 있다.
                        // this.setState : 인자로 전달된 객체 안에 들어있는 값만
                        // 변경해준다.
                        this.setState({ number: number + 1 });
                        //this.setState({ number: this.state.number + 1 });
                    }}
                >
                    +1
                </button>
            </div>
        );
    }
}

export default Counter;

기본적으로 setState는 한번 밖에 적용되지 않는다.
위에서의 setState의 기능을 여러번 나누어 처리하고 싶은 경우에는
아래와 같은 방법을 이용할 수 있다.

this.setState((prevState) => {
    return {
        number: prevState.number + 1,
    };
});
// 위와 아래의 코드는 완전히 똑같이 작동한다
// 아래 있는 문법은 함수에서 바로 객체를 반환한다
this.setState((prevState) => {
        number: prevState.number + 1,
});

// setState를 사용해서 값을 업데이트 하고 난 다음
// 특정 작업을 하고싶은 경우 setState의 두번째
// 파라미터로 콜백함수를 등록하여 처리할 수 있다.
this.setState({ number: number + 1 }, () => {
    console.log('방금 setState가 호출 되었다');
    console.log(this.state);
});

함수형 컴포넌트가 가지고 있는 useSate

import React, { useState } from 'react';

const Say = () => {
    // useState에서는 초깃 값은 객체가 아니어도 된다.
    // 문자열, 숫자, 객체, 배열 등으로 구성
    // 함수를 호출하면 배열이 반환된다.
    // 배열의 첫번째 원소는 현재 상태, 두번째 원소는 상태를 바꿔주는 함수
    const [message, setMessage] = React.useState('');
    const onClickEnter = () => setMessage('안녕하세요');
    const onClickLeave = function () {
        setMessage('잘가요~');
    };

    const [color, setColor] = useState('aqua');
    const onClickChangeColorByGreen = () => setColor('green');
    const onClickChangeColor = (changeColor) => setColor(changeColor);
    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1 style={{ color }}>{message}</h1>

            <button onClick={() => setColor('red')}>RED</button>
            <button onClick={onClickChangeColorByGreen}>GREEN</button>
            <button onClick={() => onClickChangeColor('blue')}>BLUE</button>
        </div>
    );
};

export default Say;

state의 배열이나 객체의 데이터를 변경하고자 하는 경우

// state의 배열이나 객체의 데이터를 변경하고자 하는 경우
// 배열이나 객체의 사본을 만들고 그 사본에 값을 변경한 후에
// 그 사본의 상태를 setState또는 setter함수를 통해 변경된 데이터를 적용

// 객체
const objcet = { a: 1, b: 2, c: 3 };
// 사본을 만들어서 b값만 덮어 쓰기
const nextObject = { ...object, b: 2 };

// 배열
const array = [
    { id: 1, value: 999 },
    { id: 2, value: 777 },
    { id: 3, value: 444 },
];
let nextArray = array.concat({ id: 4 }); // 새 항목 추가해서 복사
nextArray.filter((item) => item.id !== 2); // id가 2인 항목 제거
// id가 1인 항목의 value를 111로
nextArray.map((item) => (item.id === 1 ? { ...item, value: 111 } : item));