state가 array / object 면

숙제 답

(참고) array / object 다룰 때 원본은 보존하는 게 좋음

/* eslint-disable */

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

function App() {

  let post = '강남 우동 맛집';
  **let [글제목, 글제목변경] = useState([ '남자 코트 추천', '강남 우동 맛집', '파이썬독학' ]);**
  let [따봉, 따봉변경] = useState(0);

  return (
      <div className='App'>
        <div className="black-nav">
          <h4>ReactBlog</h4>
        </div>

        **<button onClick={()=>{
          let copy = [...글제목];
          copy[0] = '여자 코트 추천';
          글제목변경(copy);
        }}>글수정</button>**

        <div className='list'>
          <h4>{ 글제목[0] } <span onClick={() => {따봉변경(따봉+1)}}>👍</span> {따봉} </h4>
          <p>2월 17일 발행</p>
        </div>
        <div className='list'>
          <h4>{ 글제목[1] }</h4>
          <p>2월 17일 발행</p>
        </div>
        <div className='list'>
          <h4>{ 글제목[2] }</h4>
          <p>2월 17일 발행</p>
        </div>
      </div>
  );
}

export default App

왜 […글제목] 이렇게 사용?

... : 괄호 벗겨주세요

빡대가리식 정리

기존 state가 array / object면 독립적 카피본(shallow copy)을 만들어서 수정해야 함

state 변경 함수 특징

• 기존 state == 신규 state 의 경우 변경 안 해줌

array / object 특징

• reference data type

숙제

버튼 누르면 글제목 가나다순 정렬 기능 만들기