[React] - state

• 리액트에서 자주 변화하는 데이터를 저장할 땐 변수 대신 state를 쓴다.

• 왜 변수가 아닌 state에 저장해야 하는가?
  • state는 변동사항이 생기면 state가 포함된 html을 자동으로 재랜더링하기 때문
  • 새로고침 없이 자동 재랜더링됨

📌 블로그 글 목록을 state로 만들기

< 기본 구조>

• 파일 상단에 import문 작성하기

import React, {useState} from 'react';

• state : 변수 대신 쓰는 데이터 저장 공간, useState()를 통해 생성
• [state 데이터, state 데이터 변경 함수]
• useState() 함수 : state를 생성해주는 함수이다. () 안에는 저장할 데이터를 넣는데, 그럼 state에 해당 데이터가 저장된다.

let [value, setValue] = useState();

• array 형태의 [value, setValue]는 구조 분해 할당 문법 적용이 가능하다.
• value = 저장할 데이터가 들어갈 변수, setValue = 저장할 데이터를 변경할 함수가 들어있는 변수

let [title, setTitle] =  useState('내가 원하는 글 제목');

📌 state 데이터바인딩

• 데이터바인딩 : 자바스크립트 데이터를 html에 넣어주는 것

import React, {useState} from 'react';

function App() {
    let [title, setTitle] = useState([
        'React 고수 되는 법',
        'Javascript 실습을 통해 이해하기'
    ]);

    return (
        <div className='App'>
            <div className='list'>
                <h3>{title[0]}</h3> 
                <p>2024/01/01</p>
            </div>
            <div className='list'>
                <h3>{title[1]}</h3>
                <p>2024/01/02</p>
            </div>
        </div>
    )
}

export default App;

• 변수 title에는 배열 [ 'React 고수 되는 법', 'Javascript 실습을 통해 이해하기' ] 저장됨
• 데이터바인딩 : {title[0]}, {title[1]}

📌 state 변경하기

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

• React에서 state는 직접 값을 변경할 수 없다 (중요!)
• state 변경 함수를 통해 값을 변경해야 한다

• 변경하고자 하는 state를 deep copy한 카피본을 새로운 변수에 저장한다
• 새로운 변수에 변경 내용을 저장한다
• 새로운 변수를 state 변경 함수 안에 넣어서 state를 변경한다

• 버튼을 누르면 title이 바뀌는 코드를 추가해보자.

<button onClick = {changeTitle}> 첫번째 글제목 변경 </button>
// onClick 태그 내에서 기능을 구현해도 되지만 복잡하므로 changeTitle 함수를 생성하여 실행

function changeTitle() {
  let newTitle = [...title]; // deep copy
  newTitle[0] = 'React 하수 되는 법';
  setTitle(newTitle);
}