useState

• 리액트에서 상태가 변경될때 useState 훅을 사용한다.
• 상태가 변경된다는건.. 값이 바뀔때 (단순하게 생각)

import React, { useState } from "react";

//값을 불러오고

const [state,setState] =useState(초기값) 
// state명은 마음대로 지어도 된다. ( ex name,setName)
// set은 관습적으로 사용하는 듯 싶다.

// 초기값은 무엇이든지 들어간다.(0,'0',[],...)

useState 를 통한 조건부 화면 출력

• && 와 같이사용해서
• 토글 스위치 같이 사용 할 수 있다.

const [visible,setVisible] = useState(true)// 초기값을 보이게
.
.
.
const toggle = () => setVisible(!visible); // visible true면 <=> false로

return (
  <> 
  
  {visible && (
   <h1> 갑자기 나타난 h1  </h1> 
  }
  </>
)

• visible 이 트루일때 h1 태그를 보여주고 visible 이 false 일때 h1 태그가 렌더링 되지 않는다.

&& ?

• 논리연산자 AND && 이다.
  A && B : A 가 트루면 B도 트루다 (A가 폴스면 B도 없다)

배열 STATE에 추가하는법

• setState는 값을 변경해주기 떄문에, 배열에서는 새로운 값을 넣으면, 추가가 아닌 변경이 된다

const [list,setList] = useState([1,2,3,4]);

setList([5]);

console.log(list) //[5]

이럴땐 spread 문법을 이용해서 추가해주면된다. (기존배열+신규값 이라 생각하자)

const [list2,setList2] =useState([1,2,3,4]);
setList([...list2,5]);

console.log(list2)//[1,2,3,4,5]