[React] 리액트 state 사용법

What is ‘state’

---

• state 는 변수 대신 사용하는 데이터 저장공간이다.
• 문자, 숫자, array, object 모두 저장 가능하다.

Why to use ‘state’

---

• react 를 웹앱처럼 동작하게 하는 데 핵심적인 역할을 한다.
• state 로 만들어진 데이터가 바뀌면 새로고침 없이도 데이터를 담고 있는 html 이 자동 재렌더링 된다.

How to use ‘state’

---

1 . useState 를 import 한다.

import { useState } from 'react';

2 . java script ES6 destructuring 문법을 사용하여 state 를 선언한다.

let [title, setTitle] = useState(['강남 우동 맛집', '남자 코트 추천', '개발팀 모집'])
let [thumbCount, setThumbCount] = useState(0)

​ ES6 destructuring 문법이란?

​ ✔️ array, objectd 에 있던 자료를 변수에 쉽게 담고 싶을 때 사용

var [a, b] = [10, 100] // a 에 10, b 에 100 이 담긴다

3 . html(jsx) 의 필요한 부분에 데이터 바인딩을 한다.

<div>
  <h3> { title[0] }{' '}
    <span>👍</span>
    { thumbCount } 
  </h3>
</div>

4 . 데이터 값을 변경하고 싶을 때 함수를 사용한다.

<div>
  <h3> { title[0] }{' '}
    <span
      onClick={() => {
        setThumbCount(thumbCount + 1)
      }} style=>
      👍
    </span>
    { thumbCount } 
  </h3>
</div>

유의사항

---

1 . array 가 저장된 state 를 사용하는 방법

let [title, setTitle] = useState(['강남 우동 맛집', '남자 코트 추천', '개발팀 모집'])

function changeTitle() {
  var newArray = [...title];
  newArray[0] = '강남 라멘 맛집';
  setTitle( newArray );
}

var newArray = title 이 아닌 var newArray = [...title] 이라 써야한다.

var newArray = title 라고 쓰면 값 공유가 이루어진다.

하지만 var newArray = [...title] 라고 쓰면 deep copy가 이루어진다. 즉, 서로 독립적인 값을 가지는 복사가 이루어진다.

더 자세한 사항은 reference data type 을 검색해서 찾아보자!

React 의 대원칙 : immutable data.

즉 state data 들은 직접적인 수정이 발생하지 않도록 하기.