React 공부2

🙌🏻 저번시간에 간단한 리액트 설치법,기본개념,State개념을 익혀보았는데요 오늘은 이벤트리스너 사용법과 state변경 함수 사용법을 공부해 보겠습니다~~

<div>
	<h3> 추천수 <span onClick={}>👍🏻</span></h3>
</div>

저번글에도 말했듯이 jsx문법을 쓰려면
기존 --> onClick={}

let [good,goodfx] = useState(0)
<div>
	<h3> 추천수 <span onClick={ ()=>{goodfx(good+1)} }>👍🏻</span></h3>
</div>

그런데!! 여기서 처음으로 state를 담은 변수에 두번쨰 state변경 함수를 사용해 보았는데요 이렇게 콜백함수 처럼 ()=>{ 변경함수() } 이렇게 간단한 연산이나 작업은 쉽게 할 수 있습니다

State변경함수를 마음대로 사용해 보자

위의 설명처럼 변경함수를 사용할 수 있는데 여기서 주의해야 할 점이있다.

let [store,storefx] = useState['nike','adidas','vans']

function changeStore() {
	let stores = store
    // 틀린복사
}

<h3>{store[0]}<button <onClick={ changeStore }>매장변경</button></h3>

이런식으로 onClick에 함수를 넣어주고 외부에서 함수를 만들어주는데 주의할점은 함수명 뒤에 ()소괄호를 붙히지 않는다.
괄호를 붙히면 누르기전에 그냥 실행이 되어버리기 때문에 onClick이벤트 발생시 함수호출을 하기위해 괄호를 빼는것이다

또한 위에 state에서 store안의 내용을 복사해올때 그냥 저렇게 store로 담게되면 값복사가 아닌 값공유가되고 원본 state는 변경하면 안되기 때문에 deepcopy를 사용해 복사본을 만들어줘야한다
(객체object는 {...store} 이렇게 복사를 해준다.)

let [store,storefx] = useState['nike','adidas','vans']

function changeStore() {
	let stores = [...store];
    stores[0] = 'Jordan';
    change(stores)
}

<h3>{store[0]}<button onClick={ changeStore }>매장변경</button>