코딩애플 react 👍버튼만들기, array값 변경

 

 

 

 

버튼만들기

   let [좋아요, set좋아요] = useState(0);
							// 중략 // 아래 html은 return내부에 작성!!    
    <div className='list'>
        <h4>{제목[0]} <span onClick={() => { 
          set좋아요(좋아요 + 1) 
          }}>👍</span> {좋아요} </h4>
        <p>2월 11일 발행</p>
      </div>

onclick 아니라 onClick임!

onClick={함수가 들어감!}

state를 변경하려면, state변경함수가 들어가야함.

여기서는 set좋아요(새로운state)  (새로운 state로 싹 갈아줌)

 

 

 

 

 

 

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {


  let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 추천'])
  let [좋아요, set좋아요] = useState(0);


  return (
    < div className="App" >
      <div className="black-nav">

        <h4>블로그</h4>
      </div>

      <button onClick={() => {
        //1 depth 깊은복사
        let 제목정렬 = [...제목].sort();
        제목변경(제목정렬);
      }}>제목 정렬!</button>

      <div className='list'>
        <h4>{제목[0]} <span onClick={() => { 
          set좋아요(좋아요 + 1) 
          }}>👍</span> {좋아요} </h4>
        <p>2월 11일 발행</p>
      </div>

      <div className='list'>
        <h4>{제목[1]}<span onClick={() => {
          //1 depth 깊은복사
          let copy = [...제목];
          copy[1] = '다람쥐 코트 추천';
          제목변경(copy);
        }}>🐿️</span></h4>
        <p>2월 11일 발행</p>
      </div>

      <div className='list'>
        <h4>{제목[2]}</h4>
        <p>2월 11일 발행</p>
      </div>


    </div >
  );
}

export default App;

 

참고로 array, object state를 변경할 경우, 그냥 변경하면 변경이 안되고, 깊은 복사를 해주면서 변경을 해야 변경이 됨. 

 

array, object를 다룰때는 임의 변수에다가 기존 array, object를 복사해두고 let 임의변수명 = {...오브젝트명} 혹은 [...배열명];

그리고 임의변수명[index값, object는 key 값] = '변경할 문장';

기존배열변경함수(임의변수명);

 

헷갈리면 그냥 코드를 보는게 더 이해가 잘 됨.

 
        <h4>{제목[1]}<span onClick={() => {

          let copy = [...제목];
          
          copy[1] = '다람쥐 코트 추천';
          
          제목변경(copy);
          
        }}>🐿️</span></h4>

제목[1] = '다람쥐코트추천';

제목변경(제목)

이래도 작동은 되지만, 위에처럼 한번 깊은복사를 해주는게 관례임