[REACT] State 데이터 변경

state 데이터 수정하기

1 기존 state의 카피본을 만든다.

이때 Reference Data Type의 특징이 나타나지 않도록 주의한다.

밑의 예시와 같이 state의 값을 직접 건들면 안된다.

 

var newArray = 글제목[0] = 1123123;

var newArray = 글제목;
//이러한 것들은 복사가 아닌 값 공유의 뜻으로 해석된다.

 

기존 state의 카피는 Deep copy를 통해 해준다.

var newArray = [...글제목];
//글제목의 state에 있는 데이터 배열을 그대로 복사해서 들고온다.

Deep copy : 값을 공유하지 않고 서로 독립적인 값을 가지는 복사본을 만드는 것.

 

 

2 카피본에 수정사항을 반영한다.

newArray[0] = '여자코트 추천';

 

 

3 변경함수에 집어 넣는다.

글제목변경(newArray);

state 변경함수는 state를 아예 대체해주는 함수이다.

 

※ 함수 이름으로 명령할 때 주의할 점

<button onClick={제목바꾸기()}></button>
//바로 실행됨

소괄호를 넣게 되면 함수 바로 실행이라는 뜻으로 소괄호를 빼야 클릭했을 때 실행된다.

<button onClick={제목바꾸기}>버튼</button>
//클릭했을 때 실행

 

import React, { useState } from 'react';
import logo from './logo.svg';

import './App.css';


function App() {
  let [글제목, 글제목변경] = useState(['남자 코트 추천', '부산 우동맛집', '파이썬 독학']);
  let [따봉, 따봉변경] = useState(0);
  let posts = '부산 고기 맛집';

  function 제목바꾸기(){
    var newArray = [...글제목];
    newArray[0] = '여자코트 추천';
    글제목변경(newArray);
  }
  

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <button onClick={제목바꾸기}>버튼</button>
      <div className="list">
        <h3> {글제목[0]} <span onClick={()=>{따봉변경(따봉 + 1)}}>👍</span> {따봉} </h3>
        <p> 2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> {글제목[1]} </h3>
        <p> 2월 18일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> {글제목[2]} </h3>
        <p> 2월 19일 발행</p>
        <hr/>
      </div>
    </div>
  );
}

export default App;