버튼에 이벤트 리스너(핸들러) 장착하는 법 feat. eslint disable, deep copy

만약 터미널에 warning이 뜨는게 보기싫으면

맨 위 상단에

/*eslint-disable*/

을 입력해주시면 됩니다.

 

 

count와 countChange

count는 초기값을 지정해주는것이고, countChange는 함수인데, count의 값이 어떻게 변경되게 하는지 정해주는 함수 역할을 해줍니다.

count의 초기값은 0으로 해줬네요.

 

그래서 onClick이벤트를 선언했을때 countChange함수를 호출하고 소괄호 안에 count+1로 증가되게 만들어 주었습니다.

 

 

 

 

이번에는 배열의 있는 string값을 변경해보도록 하겠습니다.

onClick이벤트에 함수명을 넣을건데 반드시 함수명만 넣지 "함수명()"이렇게 넣으시면 안됩니다! 함수를 실행한다는뜻이 되므로 성립되지 않습니다.

 

 

deep copy해서 수정하는방법도 알려드리겠습니다.

만약 배열안에 값이 어마무시하게 많다면, 다음과 같이 수정할때 굉장히 힘들겁니다.

deep copy는 값공유가 아니라 서로 독립적인 값을 가지는 복사를 만드는 겁니다.

그 방법으로는 [...변수명]을 입력해주시면 되는겁니다.

왜냐하면 리엑트는 immutable data로 값이 변경되면 안되는 대원칙이 있기때문에 단순히 일반적으로 아는 값의 재정의로하면 값의 변경이되지않고 공유만 일어납니다. 그래서 저런 형식 "[...이름]" 으로 사용해주셔야 합니다.

 

 

Array, Object State 데이터 수정방법!

1. 일단 변경함수를 써야 합니다.

2. 변경함수 (대체할 데이터)

3. state는 직접 건드는 것이 아닙니다.