[React] useState()

let [state변수, state변경함수] = useState(초기값)

// onClick event handler
// onClick = { state변경함수명() }
// onClick = { ()=> { ... } }
// onClick = { function(){ ... } }

state 변경하는 법

• 주의 : 등호로 변경금지

let [따봉, 따봉변경함수] = useState(0)

따봉변경함수(따봉+1)

• state변경함수(새로운state값)

오늘 배운 것
1. onClick 쓰는 법
2. onClick={ ... } 안엔 함수를 넣어야 함
3. state 변경하는 법: 항상 state변경함수 쓸 것

(참고)
array/object 다룰 때, 원본은 보존하는 게 좋음

• copy를 한다.
• 수정을 한다.
• 변경함수를 이용해서 state를 갱신한다.

state변경함수 특징
1. 값을 갱신 전에, 기존 state == 신규 state 의 경우
변경 안 해줌

array/object 특징

let arr = [1,2,3] 
// [1,2,3] 의 값은 heap(RAM)에 저장
// arr(변수)는 그 값이 저장된 주소(address)를 가리키는 화살표만 저장

let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬 독학'])
    // 1. 글제목(변수)에 저장되어 있던 건 화살표밖에 없음
    let [따봉, 따봉변경] = useState(0)
    return (
        <div className='App'>
            <div className='black-nav'>
                <h4>React Blog</h4>
            </div>

            <div>
                <button
                    className='btn1'
                    onClick={() => {
                        // 2. copy(변수)또한 글제목에 있던 화살표가 복사
                        let copy = [...글제목]
                        // spead operator를 사용해서
                        // 글제목의 대괄호를 벗긴 후  대괄호를 다시 씌운다.
                        // 완전히 독립적인 어레이 사본이 만들어진다.
                        // 이렇게 되면 화살표도 달라지게 되어
                        // 글제목변경 함수도 새로운 state로 인식
                        copy[0] = '여자코트 추천'
                        글제목변경(copy)
                    }}
                >
                    글수정
                </button>

state가 array 또는 object 라면
독립적 카피본(Shallow Copy Or Deep Copy)을 만들어서 수정해야 함