[react] 버튼 기능개발 & state 변경

하나의 state에 여러 내용을 담는 법은 아래와 같다

 let [listTitle, listTitleSet] = useState(['코트 추천', '가디건 추천', '패딩 추천']);

 

 

그리고 사용할 때에는 배열에서 뽑아 쓰듯 쓰면 된당

 <h5>{listTitle[0]}</h5>

 

E-Z

 

 

이제 위의 state를 사용해서 목록을 만들고, 그 옆에 '좋아요'버튼과 좋아요 수가 나오도록 코드를 작성해주자

button태그 말고 span태그를 사용하고, 글자 말고 이모티콘으로 귀엽게 만들어도 된당

 

<li>
      <h5>{listTitle[0]} <span>👍</span> 0 </h5>
      <p>2022-10-02</p>
</li>

 

그런데 좋아요 갯수도 앞으로 계속 유동적으로 바뀔 숫자이니 state로 만들어두면 좋을 것 같다!

설정하는 함수를 아직 사용하지 않을때에는 변수에 하나만 입력해도 된당

   let [like] = useState(0);

 

 

그리고 js에서 선택자를 선택해서 addEventListener로 click 이벤트를 부여했었는데, 리액트에서는 요소에 직접 onClick을 넣을 수 있다.

주의할 점은 onClick에는 직접 코드를 작성할 수는 없고, 함수 이름을 넣어야한다.

좋아요 할 버튼에 onClick을 셋팅해보자

function like(){
     console.log('안녕하세요')
 }
return (
~~~
<li>
    <h5>{listTitle[0]} <span onClick={ like }>👍</span>{like}</h5>
    <p>2022-10-02</p>
</li>
)

 

span 태그를 클릭했을 때 console창에 잘 뜨면 성공~

onClick에 직접 함수를 넣으려면 함수 선언 문법부터 넣어주면 된다. 물론 화살표함수도 가능!

<h5>{listTitle[0]} <span onClick={ function(){ console.log('안녕하세요'} }>👍</span>{like}</h5>
<h5>{listTitle[0]} <span onClick={ () => { console.log('안녕하세요'} }>👍</span>{like}</h5>

 

 

무튼 이제 onCLick을 배웠으니 좋아요 수를 증가시켜보자

보통 변수에 숫자를 담아 사용할 때에는 아래처럼 작성하면 됐다

 <span onClick={ () => { like = like + 1} }>👍</span>
 <span onClick={ () => { like++ }>👍</span>

 

하지만 state에서는 이런 등호로 변경을 하면 html에 변경이 안된다.

그래서 state 변경 함수를 사용해야한다.

 

우선 아까는 state이름만 담았던 like에 likeSet이라고 state 변경함수에 이름을 붙여주자

이 state변경함수를 사용해서 변경해주어야 html 재렌더링이 잘 발생된다.

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

 

onClick에 likeSet을 불러와서, 파라미터로 새로운 state를 넘기면 된다

<span onClick={likeSet(1)}>👍</span>

 

1로 변경하겠다고 예시를 들어보았따.

직접 눌러보면 0이 1로바뀌는걸 확인할 수,, 있어야하는데 에러가난ㄴ다ㅏㅏㅏㅏ.

Too many re-renders. React limits the number of renders to prevent an infinite loop.

 

이유는 likeSet을 불러올 때에도 함수 내에서 불러왔어야 했는데 그냥 불러왔기 때문!

<span onClick={()=>{ likeSet(1)} }>👍</span>

 

이제 따봉을 눌러주면 0에서 1로 바뀌는게 확인된다!

이제 그냥 1로만 바꾸는게 아니라 +1을 해주려면 기존 state명인 like에 +1을 해주면 된다!

<span onClick={()=>{likeSet(like + 1)}}>👍</span>

 

 

 

 

오늘의 내용 요약!

 

1. onClick은 함수를 불러오거나, 함수를 안에서 선언 후 사용

2. state 변경하는법 : stateSet(변경할 내용)