[React] state

chxxrin·2022년 5월 20일
0

React

목록 보기
3/11

return () 안에는 병렬로 태그 2개 이상 기입 금지

자료 잠깐 저장할 땐 변수(let, const)
자료 잠깐 저장할 때 state 써도 됨

state 만드는 법

1. import { useState } from 'react; 
2. useState(보관할 자료)
3. let [작명, 작명]
let [a,b] = useState('남자 코트 추천');

a : state에 보관했던 자료 나옴 >> 남자 코트 추천이 나옴(작성은 { a })
b : state 변경 도와주는 함수

let [글제목, 함수] = useState('남자 코트 추천');

Destructuring 문법

let num = [1,2]; //list안에 있는 애들을 변수로 빼고 싶을 때 destructuring 사용
let a = num[0]; //a는 1이 됨
let c = num[1]; //c는 2가 됨
let num = [1,2]
let [a,c] = [1,2]; //a는 1이 되고, c는 2가 됨!

Q. 왜 state 써야함?
일반 변수는 갑자기 변경되면 html에 자동으로 반영이 안된다. state는 갑자기 변경되면 state쓰던 html은 자동으로 재렌더링된다!! 그래서 내가 굳이 코드를 바꿔주지 않아도 자동으로 변경됨!!!!그러니까 state를 쓰자!!

Q. state 언제 써야함?
변동시 자동으로 html에 반영되게 만들고 싶으면 state를 쓰자!

Array로 state 사용하기!! + indexing

let [글제목,b] = useState(['남자 코트 추천', '여자 코트 추천', '아기 코트 추천']);

<h4>{ 글제목[0] }</h4> //남자 코트 추천
<h4>{ 글제목[1] }</h4> //여자 코트 추천
<h4>{ 글제목[2] }</h4> //아기 코트 추천'

자주 변경될 것 같은 html부분은 state로 만들어 놓자~

0개의 댓글