버튼을 만들고 클린된 횟수 count (state 변경)

먼저, 이런 식으로 손모양과 카운트 횟수를 만든다.

<div className="list">
        <h3> {글제목[0]} <span>👍</span> 0 </h3>
        <p>2월 17일 발행</p>
        <hr />
</div>

그 다음에, 따봉모양을 클릭하면 숫자가 올라가야 하는데, 클릭을 감지하는 방법으로

onClick={클릭될 때 실행할 JS함수} 또는 ={ () => {실행할 내용} }  을 사용할 수 있다. 단, 함수를 사용할 땐 ()를 쓰면 안된다. ()를 쓰면 바로 실행해주세요 이다.

function App() {

  let [글제목,글제목변경] = useState(['남자 코트 추천', '코딩 인강 추천', '데이트 맛집 추천']);
  let [따봉,따봉변경] = useState(0);
  return (
    <div className="App">
      <div className="list">
        <h3> {글제목[0]} <span onClick={() => {따봉변경}}>👍</span> {따봉} </h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>
    </div>
  ); 
}

위 처럼, span태그에 onClick을 달아주고 따봉을 클릭할 때 마다 오른쪽의 숫자가 변경되므로 숫자도 state를 이용해 0이 오게 한 후, 따봉변경을 사용해서 변경해보자.

 

따봉변경은 따봉변경(대체할 데이터)이렇게 사용한다. 즉, state는 직접 변경할 순 없고, state변경함수를 이용해서 state를 변경해주는 것이다. 이렇게 변경해야 재렌더링도 일어난다. 따라서,

<h3> {글제목[0]} <span onClick={() => {따봉변경(따봉+1)}}>👍</span> {따봉} </h3>

이런 식으로, 따봉변경(원래 따봉에 1을 더한 값) 이렇게 쓰면, 안에 값으로 변경 시켜주세요가 된다.

 

만약, 글제목에 남자코트 추천을 버튼을 눌렀을 때 여자코트 추천으로 바꾸고 싶다면, state에 어레이가 있다면, 다음과 같이 한다.

let [글제목,글제목변경] = useState(['남자 코트 추천', '코딩 인강 추천', '데이트 맛집 추천']);

function 제목변경() {
    var newArray = [...글제목]; //deep copy라 하며, newArray = 글제목은 복사가 아니라 값공유임
    newArray[0] = '여자 코트 추천'
    글제목변경(newArray)
}

<button onClick={제목변경}>변경</button>

//...은 spread연산자이며, 원래는 중괄호나 대괄호를 벗겨주세요의 의미이다. 
//...[1,2,3] 은 1,2,3이 된다. 하지만 위 처럼 deep copy를 할 때도 쓰인다.

글제목변경[0] = 여자코트추천 이런 식으로, 변경이 불가능하므로 newArray라는 새로운 변수를 만들고 그곳에 어레이를 담고 새로운 어레이를 바꿔준다. 그 후, 글제목변경에 새로운 바뀐 복사본을 담아주고 onClick를 이용해준다.