[React] onClick 사용과 state 변경 함수 이용하기

 

 

#1. 웃는 모양을 클릭할거기 때문에 span에 onclick 함수를 넣는다.

onClick={ ()=>{ 실행할 무언가 } }

{ 실행할 무언가 } 안에 실행할 내용을 넣는다.

 

#2. state로 기능을 만들어 준다.

let [like, likeChange] = useState(0);

 

좋아요를 클릭했을 때 1씩 증감되어야 하기 때문에 

useState(0)을 기본값으로 넣어준다.

state변경 함수로 값을 넣어주어야 재랜더링이 문제없이 잘 된다.

 

---

state를 사용하는 이유는?

동적인 데이터를 다루어야 할 때 사용한다.

 

---

#3. 버튼을 만들고 클릭했을 때 title이 변경되어야 하는 기능을 만들어보자.

 

버튼의 기능개발은 아래와 같이 사용할 수 있다.

<button onClick={txtChange}>버튼</button>

<!-- {}안에 작성한 함수명을 삽입하며, 함수명()로 넣게 되면 함수가 바로 실행 되므로 
괄호는 넣지 않는다.-->

 

#3-1. 값이 공유되지 않는 사본생성하기

버튼 클릭시 남자 코트 -> 예쁜 여자 코트 추천으로 바뀌게 하려면 

선언했던 posts의 배열 안에 있는 값을 새로운 값으로 다시 선언하여 변경해주어야 한다.

 

 //이때 절대 하면 안되는 방식
 
 var newArray = 글제목[0]; //이 형태는 값이 공유된다.

var newArray = [...posts];  //ES6 신문법으로 값이 공유되지 않는 사본 생성 가능
newArray[0] = '예쁜 여자 코트 추천';
글제목변경 ( newArray ); //변경함수를 가져와서 그 안에 사본 값을 넣는다.

state 사용순서

1. 변수 선언 한 뒤 useState의 사본을 생성한다. [...가져올 변수명];

2. 선언한 변수를 어떻게 바꿀 것인지??

3. 변경 함수에 변수 선언한 값을 넣어 준다.

 

 

---

참고자료

[JavaScript] 자주 사용하는 ES6 문법 정리