React state 변경하는법

ps. 터미널에 뜨는 warning은 에러는 아님 그냥 eslint라고...함

 

/* eslint-disable */

이거하나 넣어주면 오류 안남

 

---

-좋아요 버튼을 만들어보자

원래 이벤트 리스너 사용했어야했는데 간단하게 써보자!

      {/* <h4>{ 글제목[0] } <span onClick = {()=>{console.log(1)}} >🥰좋아요!</span> 0 </h4> */}
     <h4>{ 글제목[0] } <span onClick = { ()=>{따봉변경(따봉+1)} } >🥰좋아요!</span> {따봉} </h4>

당연히 카멜 케이스 사용해야하고 규칙은 단순하다

onClick, 클릭하면 뒤에 {} 안에 함수형태로 넣어주면되는것!

애로우 펑션말고 함수를 따로만들어서 함수 이름을 넣어줘도됨

 

function 함수이름() {
}

대신 onClick = { 함수이름} 이런식으로 해줘야함

---

-최종

버튼 하나누르면 서울을 뉴욕으로 바뀌게 만들어보자

 

/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import {useState} from 'react'

function App() {


  let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
  let [따봉,따봉변경] = useState(0)
  // 따봉변경은 함수다 따봉변경(),따봉변경(10) 하면 10으로 바뀜
  let posts = "군자 훠궈 맛집" 

  return (
    <div className="App">
      <div className="black-nav">
        <div >개발 BLOG</div>
      </div>
      <h4><span onClick = {() =>{글제목변경(['뉴욕','대구','대전','광주'])}}>제목변경클릭!</span></h4>

      <div className="list">
      {/* <h4>{ 글제목[0] } <span onClick = {()=>{console.log(1)}} >🥰좋아요!</span> 0 </h4> */}
      <h4>{ 글제목[0] } <span onClick = { ()=>{따봉변경(따봉+1)} } >🥰좋아요!</span> {따봉} </h4>

      {/* ps.크롬 브라우저에서 우클린 이모지 고를 수 있음 */}
      {/* 안에 onClick에 함수만 들어갈 수 있음 {} 써야함 */}
      {/* 자바스크립트 쓸때 처럼 쓰면됨! */}
      <p>4월 15일 발행</p>
      </div>
      <hr/>
      <div className="list">
      <h4>{ 글제목[1] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[2] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[3] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>

    </div>
  );
}

export default App;

포인트는

      <h4><span onClick = {() =>{글제목변경(['뉴욕','대구','대전','광주'])}}>제목변경클릭!</span></h4>

이와같이 배열 전체를 바꿔줘야한다.

 

그리고 좀더 테크닉 적으로

 

---

/* eslint-disable */
import logo from './logo.svg';
import './App.css';
import {useState} from 'react'

function App() {


  let [글제목, 글제목변경] = useState(['서울','대구','대전','광주'])
  let [따봉,따봉변경] = useState(0)
  let posts = "군자 훠궈 맛집" 

  function 제목바꾸기(){
    // 글제목변경(['뉴욕','대구','대전','광주']) 이렇게 해도되지만!
    var newArray = [...글제목]//array,object형태면 특히! 복사하는 스킬, deep copy하기
    // 그냥 하면 값을 공유하는거다. deep copy를 해야함!
    newArray[0] = '뉴욕'
    글제목변경(newArray)
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div >개발 BLOG</div>
      </div>
      <h4><span onClick = { 제목바꾸기 }>제목변경클릭!</span></h4>

      <div className="list">
      <h4>{ 글제목[0] } <span onClick = { ()=>{따봉변경(따봉+1)} } >🥰좋아요!</span> {따봉} </h4>
      <p>4월 15일 발행</p>
      </div>
      <hr/>
      <div className="list">
      <h4>{ 글제목[1] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[2] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>
      <div className="list">
      <h4>{ 글제목[3] }</h4>
      <p>2월 17일 발행</p>
      <hr/>
      </div>

    </div>
  );
}

export default App;

이와같이 함수로 만들어서 할 수 도 있다.

이렇게 하면 2가지가다르다

 

1) 함수로만들어서 {함수이름} 형태로 넣는다.

2) 좀더 테크닉적으로 자료를 복사해서 바꿀녀석만 바꿔서 쓴다.

3) deep copy를 직접 쓴다.

ps. 변경함수를 써야한다!

array,object자료형 할때 특히 딥카피 기억하자.

 

추가적으로 정렬을 하려면? (state 정렬) sort()

function 제목바꾸기(){
    // 글제목변경(['뉴욕','대구','대전','광주']) 이렇게 해도되지만!
    var newArray = [...글제목]//array,object형태면 특히! 복사하는 스킬, deep copy하기
    // 그냥 하면 값을 공유하는거다. deep copy를 해야함!

    
    newArray[0] = '뉴욕'
    newArray = newArray.sort() //여기서 미리 정렬해주면 넣을때도 정려래서 들어간다!
    //매우 자바스크립트 적이다.
    
    글제목변경(newArray)
  }

이와같이 자바스크립트에서 기존에 정렬을 하듯이 복사한값을 넣기전에 정렬해주고 넣어주면 된다!