[React] state의 값을 변경하고 렌더링 시켜보자.

import React, { useState } from 'react'; // useState를 사용하기 위해 import
import './App.css'

function App(){
 
  let [글제목, 글제목변경] = useState( ['남자 코트 추천', '강남 우동 맛집'] ); // state를 destructuring으로 지정

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
      <div className="list">
        <h3>{ 글제목[0] }</h3> // 위 글제목에서 [0] 인덱스가 출력
        <p>2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3>{ 글제목[1] }</h3> 위 글제목에서 [1] 인덱스가 출력
        <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  )
}

 

state 값을 변경하고 렌더링 시키는 방법

위 코드에서 '남자 코트 추천'을 여자 코트 추천으로 변경하고 싶다.

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

 

지금 뭘 한거냐면..

0. 글제목이라는 state는 직접 수정할 수 없다. 그래서.. 복사본을 만들기로 한다. 

1. 글제목이라는 state의 복사본을 만들어 newArray라는 변수에 저장한다. 

2. newArray의 0번째 데이터를 ‘여자코트 추천’으로 변경한다.

3. 그리고 그걸 글제목변경() 함수 안에 넣어서 글제목 state를 변경한다. 

 

하지만 동작하지 않는다. 

이유는 코드는 잘 짠건 맞는데, state를 복사할 때 문제가 하나 있기 때문이다. 

 

원래 자바스크립트 내에서 array나 object 자료형은 = 등호로 복사하면 각각 별개의 자료형이 생성되는게 아니라

값을 공유한다.

 

즉, 글제목 array에 완전히 독립적인 복사본을 만들어 수정 이후 함수를 통해 수정해야한다.

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

리액트에서 state를 수정하고 싶으면 보통 이런 패턴으로 코드를 작성한다.

1. 수정하고 싶은 state의 deep/shallow 카피본을 하나 생성한다. 
2. 카피본을 입맛에 맞게 수정한다. 
3. 카피본을 state변경함수()에 Pramter로 동작시킨다.