react - [useState]

자료를 잠깐 저장할 때 쓰는 변수

let, var, const 셋중에 하나 쓰면 된다

 

하지만 react 에서는 자료를 잠깐 저장할때 state를 써도 된다.

 

import {useState} from 'react';

let [a, b]  = useState('남자 코트 추천');


return (
<h2> {a} </h2> // 남자 코트 추천
);

 

a : state에 보관했던 자료가 나온다.

b : state 변경 도와주는 함수

 

Destructuring 문법

 

let num = [1,2];

//보통 이렇게 쓴다.
let a = numm[0];
let c = numm[1];

// Destucturing
let [a, c] = [1,2];

 

그래서

 

let [a , b] = useState('남자 코트 추천' , '' );

근데 굳이 변수 선언이 있는데 왜 state를 쓸까?

 

State 쓰는 이유?

• 변동시 자동으로 html 반영되게 만들고 싶을 때 state 씀
• 자주 변경될꺼 같은 html 부분을 전부 state로 바꾸자
• 변수와 state 차이점

let [a , b] = useState('남자 코트 추천' , '함수' );
let [c, d] = useState(['남자', '코트', '추천']);

return(
	<h4> {a} </h4> // state를 쓰면 html은 자동 재렌더링이 된다.
)

 

State 변경하는 법

• state 변경함수를 써야한다.

let [a , 변경] = useState(0);

return
	//state 변경함수(새로운state)
    <li><button className="nav-link" onClick={() => 변경(1)}>로그아웃</button></li>
     <li><button className="nav-link" onClick={() => 변경(a+1)}>로그아웃</button></li>
)