state를 사용할 때 주의사항

클래스형 컴포넌트든 함수형 컴포넌트든 state를 사용할 때는 주의해야할 사항이 있음.
state값을 바꾸어야할 대는 setState 또는 useState를 통해 전달받은 세터 함수를 사용해야함.

const [object, setObject] = useState({a: 1. b:1});
object.b = 2;

이거는 잘못된 코드임. 그러면 배열이나 객체를 업데이트해야 할 때는 어떻게 해야할까?
이런 상황에서는 배열이나 객체 사본을 만들고 그 사본에 값을 업데이트한 후,
그 사본의 상태를 setState 혹은 세터 함수를 통해 업데이트 함.

import React, { useState } from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({name,numnum,children}) => {


    // const nextObject = {...object, b: 2} // 사본을 만들어서 b 값만 덮어 쓰기.

    const [object, setObject] = useState({a:1, b:2, c:3});

const test = () => {
setObject({
    ...object,
    b:88
    }
);
console.log(object)

}
    return <div>안녕하세요, {name} 입니다.
    <br/>
    children 값은 {children}
    좋아하는 건 {numnum}
    <button onClick={()=>{test()}}/>
    </div>

}

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

MyComponent.propTypes = {
    name : PropTypes.string,
    numnum : PropTypes.string.isRequired

};

export default MyComponent;