[코딩애플님 강의] 5. state 맘대로 변경하는 법

 

<Array, Object state 데이터 수정 방법>

- 일단 변경함수 써야함

- 변경함수(대체할 데이터)

state는 직접 건들지말고 deep copy해서 그걸 건드려라

 

*변경함수 제작시 기억할 것

1. 일단 기본 state 카피본 만들고 (Spread Operator)

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

3. 변경함수()에 수정사항 반영된  카피본 집어넣기

 

/* eslint-disable */

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

function App() {

  let [글제목, 글제목변경] = useState(['남자 코트 추천', '여자 스커트 추천', '남자 봄옷 추천']);
  let [따봉, 따봉변경] = useState(0);

  // deep copy
  function 제목바꾸기() {
    var newArray = [...글제목]; // 참조형 데이터, Spread Operator
    newArray[0] = '여자 코트 추천';
    글제목변경( newArray );
  }

  return (
    <div className="App">
      <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></hr>
        </div>
        <div className="list">
          <h3> { 글제목[1] } </h3>
          <p>3월 17일 발행</p>
          <hr></hr>
        </div>
        <div className="list">
          <h3> { 글제목[2] } </h3>
          <p>2월 17일 발행</p>
          <hr></hr>
        </div>
      </div>
    </div>
  );
}

export default App;

 

[ES6] Spread Operator (스프레드 연산자)