[React] state

state

: 자료를 잠깐 저장할 때 사용

 

1. state 사용방법

• import {useState}
• useState(보관할 자료)
• let[변수1, 변수2]
  • 변수1: state에 보관했던 자료
  • 변수2: state 변경을 도와주는 함수

import { useState } from 'react';

function App() {
	let title = useState('파스타가 맛있는 가게');
	return (
		<div className='list'>
			<h4>{ title }</h4>
		</div>
    );
}

   

   

 

2. state 사용 이유

• 변수의 경우 변수 값이 변경되면 직접 변경시켜줘야함
• state의 경우 값이 변경되면 state를 사용하던 HTML이 자동으로 재렌더링됨

 

3. state 변경 방법

• 등호 사용하면 안됨!

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

return (
        <h4><span onClick={ () => {likeCount(1)} }>❤</span> {like} </h4>
);

 

• 결과

버튼 클릭 전

버튼 클릭 후

 

 

/* 문자 값의 경우*/
let [like, likeCount] = useState('클릭 전');

return (
        <h4><span onClick={ () => {likeCount('클릭했어요')} }>❤</span> {like} </h4>
);

 

 

4. array, object state 변경 방법

let [title, titleChange] = useState(['파스타가 맛있는 가게', '노브랜드 신상 버거: 맥앤치즈버거', '뫄뫄 타코야끼 후기']);

return (
	<button onClick={ () => {
		title = [...title];
		title[0] = '디저트가 맛있는 카페';
		titleChange(title);
	}}>🧁CLICK!
	</button>

	<div className='list'>
		<h4>{ title[0] }</h4>
		<h4>2022-10-24</h4>
	</div>
)

 

*그런데 값 변경할 때 원본을 두고 카피본을 만드는 게 관습임(왜냐하면 나중에 원본이 필요해질 수도 있으니까)

let [title, titleChange] = useState(['파스타가 맛있는 가게', '노브랜드 신상 버거: 맥앤치즈버거', '뫄뫄 타코야끼 후기']);

return (
	<button onClick={ () => {
		let copy = [...title];
		copy[0] = '디저트가 맛있는 카페';
		titleChange(copy);
	}}>🧁CLICK!
	</button>

	<div className='list'>
		<h4>{ title[0] }</h4>
		<h4>2022-10-24</h4>
	</div>
)

 

🤔 let copy = [...title]; 이렇게 하는 이유는?

 

1. state 변경함수 특징

• 기존state == 신규state의 경우 변경 안해줌

2. array/object 특징

• array/object를 저장한 변수에 화살표만 저장
  (= 여기에 이 값이 있다~ 정도)

let copy = [...title];
copy[0] = '디저트가 맛있는 카페';

• -> copy란 state가 변경되는 게 아니라, copy[0]의 값이 '디저트가 맛있는 카페'로 변경되었다는 것.
  즉 title == copy로 간주되어서 재랜더링이 안됨!
• -> 헷갈릴 땐 콘솔에 console.log(title == copy) 찍어보기
  
  
• => 그래서 []를 씌우고 ...을 써서 괄호를 지워줌

 

 

 

*** 터미널 창에 뜨는 warning 지우기

/* eslint-disable */