변수가 아닌 자료를 저장할 때 쓰는 state

state쓰는 방법

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

function App() {
	let post = '강남 우동 맛집';
  let [a, b] = useState('남자 코트 추천');

위와 같이 사용하면 됨.

1. useState를 사용한다.
2. 뽑아내어 사용한다.(distrcuturing)

구조분해 할당… 아니까 넘어갈게..

그래서 useState의 return 값은 결론적으론 [‘남자 코트 추천’, 함수] 이렇게 넘어오는 것임.

state 왜 쓸까?

갑자기 글자가 변경이 되었다면, 새로운 글자를 가져왔거나…

변경이 제대로 되지 않을 수 있음. state 는 값이 바뀌면 재렌더링이 자동으로 된다.

vue에서는 기본적으로 v-bind로 잡아주면 알아서 변경 되었다 그 차이임.

자주 변경될 것 같은 애들은 state를 사용해라.

이벤트 핸들러 사용법

<h4>{title[0]} <span onClick={함수이름}>👍</span> {good[0]} </h4>

on click 옆에는 함수 이름만 올 수 있음

state 변경하는 방법

<h4>{title[0]} <span onClick={clkGood(0)}>👍</span> {good[0]} </h4>

function clkGood(index) {
    good[index]++;
}

그러면 이렇게 두고

저 span 태그 눌러보면 좋아요 숫자가 올라가지 않음.

state 변경하는 방법은 따로 있음. state 변경할 때는 등호로 변경할 수 없음!

아래와 같이 코딩하면 된다.

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

function App() {
  let [logo, setLogo] = useState('리액트 블로그');  
  let [title, setTitle] = useState(['남자 코트 추천', '파이썬 강의 정리', '리액트 강의']);  

  let [good, setGood] = useState([0, 0, 0]);

	return (
		<div className="App">
			<div className="black-nav">
				<h4>{logo}</h4>
			</div>
			<div className="list">
        <h4>{title[0]} <span onClick={() => {
          let copy = [...good];
          copy[0] = copy[0] + 1;
          setGood(copy);
        }}>👍</span> {good[0]} </h4>
				<p>2월 17일 발행</p>
			</div>
			<div className="list">
				<h4>{title[1]} <span>👍</span> {good[1]} </h4>
				<p>2월 17일 발행</p>
      </div>
      <div className="list">
				<h4>{title[2]} <span>👍</span> {good[2]} </h4>
				<p>2월 17일 발행</p>
			</div>
		</div>
	);
}

export default App;

여기서 알아야하는 동작원리 두번째는 state 업데이트 해줄 때 복사본을 만드는 이유 (spread 문법 사용)

let copy = [...good];
copy[0] = copy[0] + 1;
setGood(copy);

state는 업데이트 해줄 때, 업데이트 전 <=> 업데이트 후가 같은 지 확인하고 완전히 같으면 아예 업데이트를 안함.

array의 경우 얕은 복사가 되어 다 target까지 동일하게 변경되므로 깊은 복사를 사용해야 함.