리액트 5강 : state가 array/object면

[state 변경 함수 특징]

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

* 변수1 & 변수2 화살표가 같으면,

  변수1 == 변수2 비교해도 true가 나옴.

 

[ array / object 특징 ]

array / object 담은 변수엔 화살표만 저장됨.

let arr = [1,2,3]

 

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 = 글제목;    <<< 글제목이라는 변수에 저장되어 있던건 
                              ['남자 코트 추천', '여자 코트 추천', '아이 코트 추천']
                              이 Array데이터가 아니라,
                              위치를 알려주는 화살표밖에 없음.
    copy[0] = '학생 코트 추천';
    글제목변경(copy);
    console.log(copy == 글제목); <<< true라고 나옴.
    }}>글수정</button>
        </div>
  );
}
    
    ** copy와 글제목은 같다고 나와서, 글수정 버튼을 누르더라도 내용 변경은 안됨 !
    
    ** 변경하려면
    let copy = [...글제목]   <<< 이런식으로 복제본을 만들어야지 가능함 !
    copy[0] = '학생 코트 추천';
    글제목변경(copy);
    
    여기서, ...의 의미는 괄호를 벗기고 다시 씌운다는 의미로
    완전히 독립적인 array사본 생성, 새로운 화살표도 생성.

 

** state가 array  / object면

 복사본을 만들어서 수정해야 됨 !

 

* 숙제 !

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

<button onClick = { () => {
      const 가나다순 = [...글제목];
      가나다순.sort();
      글제목변경(가나다순);
     }}>정렬버튼</button>

1) <button></button>을 하나 만들어서, 클릭이 가능하게 이름을 넣어줌(여기서는 정렬버튼)

2) onClick 이벤트(클릭시 작동하게 만들어줌)를 이용하기

   onClick = { *여기 안에는 함수만 들어가짐 ! }

3) 복제본 [...글제목] 이라고 만들고

4) sort( ) 정렬방식을 이용해 정렬 

                 

                               끝 !

 

 

** 지금까지의 코드

/* eslint-disable */         <<< 터미널에 Warning이 안뜨게 해줌
                                 (예를 들어, 변수 정의 후 사용을 하지 않았다던지)

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

function App() {

let post = '강남 우동 맛집';

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

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

    <button onClick = { () => {
      const 가나다순 = [...글제목];
      가나다순.sort();
      글제목변경(가나다순);
     }}>정렬버튼</button>

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


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

    <div className = "list">
      <h4>{ 글제목[2]  }</h4>
      <p>5월 12일 발행</p>
    </div>

    </div>
  );
}

export default App;

 

 

1) 좋아요 버튼 클릭시, 1씩 증가 

2) 정렬버튼 클릭시, 글제목 순서 변경

3) 글수정 버튼 클릭시, "남자 코트 추천" -> "학생 코트 추천" 으로 변경