React - State

React에서 State를 쓰는이유는 State를 쓰던 html은 State가 변경되면 재 렌더링 된다.

즉, html부분에서 자주 변경될거 같은부분은 state로 만들어 두면 된다.

// State Import
import { useState } from 'react';

// State 예시
let [val, setVal] = useState('남자옷');

// 이런식으로 html에 값을주면 자동으로 재 렌더링이 안된다.
let post = '강남 우동 맛집';

 

비슷한 성질의 여러개 태그에 state를 써야할경우, 묶음처리도 가능하다.

let [title, setTitle] = useState(['남자 코트 추천','강남 우동 맛집','파이썬 독학'])

// 사용할때는
<h1>{title[0]}</h1>

 

state의 값을 변경할경우

let [like, setLike] = useState(0);



<span onClick={()=>{setLike(like + 1)}}>💕</span>

 

배열에서 값을 꺼내와서 변경을 해줘야할 경우

 

  let [title, setTitle] = useState(['남자 코트 추천','강남 우동 맛집','파이썬 독학'])


<button onClick={()=>{
    let copy = [...title];
    copy[0] = '여자 코트 추천';
    setTitle(copy);
    }}>💥
</button>

이렇게 쓰는이유는 기본적으로 자바스크립트에서 객체나 배열은 얕은 복사를 이룬다.

내가 copy에 title 배열을 복사해놔도 둘은 같은 메모리를 사용하고 있다.

 

이럴경우, React의 state는 둘이 같다고 판단하여, 동작을 하지않는다.

(React의 State는 서로 다른경우만 변경된다.)

 

그래서 아래처럼 코드를 짜야한다

다른 메모리를 사용하게 해달라고 하는거다.

let copy = [...title];