useState

1. useState란?

• state: 컴포넌트가 가질 수 있는 상태
ex) 시계라는 state가 있다면 현재 상태로 시간을 가질 수 있음

• useState는 우리의 컴포넌트 상태를 간편하게 생성하고, 업데이트 해주는 도구를 제공

const[state, useState] = useState(초기값);
// state생성과 동시에 가져야 할 초기값을 useStatet함수에 인자로 넣어주면
// state와 setState라는 2가지 요소를 배열의 형태로 return해줌
// 현재의 상태값은 state라는 변수에, state를 변경시켜주고 싶을때는 setState함수를 사용해서 변경가능

const[time, setTime]=useState(5); /// → 원하는대로 변경 가능
//이렇게 만들면 시계 컴포넌트 안에 time이라는 State가 생기고 초기값은 5 (State: time = 5)
//시간을 변경하려면 setTime함수를 부르면 됨. 인자로는 젼경될 값을 넣어줌 → setTime(6)
//이렇게 하면 State: time = 6

→ setState함수를 사용해서 업데이트를 변경하면 해당 컴포넌트는 화면에 다시 렌더링 됨.
→ 시간 state가 변경될때마다 화면이 업데이트 되는 시계 만드는거 가능

예제 1

import { useState } from 'react';

function App() {
  const [time, setTime] = useState(1);
  //여기 useState는 초기값으로 1이 담긴 time이라는 state를 담은 변수와 time을 업데이트 하기 위한
  //setTime이라는 함수를 배열 형태로 반환해줌
  
  const handleClick = () => {
  setTime(time + 1); //time을 업데이트 해주는 함수
    //setTime의 인자로는 setState로 반영될 값
    //이 경우에는 현재시간(time) +1이 들어감
  }
  
 return(
  <div>
   <span>현재 시각: {time}시</span>
   <button onClick={handleClick}>update</button>
//setTime함수를 이용해서 state를 업데이트 해주게 되면 이 컴포넌트는 해당 브라우저에서 다시 렌더링 됨
  </div>
 )
}

export default App;

예제 2(state 함수 안에 조건문)

import { useState } from 'react';

function App() {
  const [time, setTime] = useState(1);

  const handleClick = () => { //handleClick함수가 불릴때마다
    let newTime; //newTime이라는 변수를 생성해주고
    if(time >= 12) { //만약 time이 12보다 크다면
    newTime = 1; //newTime을 1로 설정
    } else { //그렇지 않다면
    newTime = time + 1 //newTime은 시간에 +1
    }
    setTime(newTime); //setTime에는 newTime이라는 변수를 넣어줌
  };
  
 return(
  <div>
   <span>현재 시각: {time}시</span>
   <button onClick={handleClick}>update</button>
  </div>
 );
}

export default App;

예제 3(useState 안에서 함수호출)

import { useState } from 'react';

const heavyWork = () => {
console.log("엄청 무거운 작업!!!")
  return[]
}

function App() {
  //const [names, setNames] = useState(heavyWork());→ heavyWork함수가 멘처음 렌더링 될때만 불려지게 하려면?
  //초기값을 넣는 함수에 바로 인자를 넣는게 아니라 callback함수 사용
  const [names, setNames] = useState(() => {
    return heavyWork(); //그리고 return 값으로 hevyWork 함수를 불러줌
    //이렇게 작성하면 처음 렌더링 될때만 heavyWork라는 함수가 불러짐!
  });
  const [input, setInput] = useState("");//초기값 빈 문자열
  const handleInputChange = (e) => {//인자로는 event를 받고
    setInput(e.target.value); //setInput을 통해서 input을 업데이트 시켜줌
    //event안에있는 target안의 value를 새로운 input으로 지정해줌
  }; 
  const handleUpload = () => {
  setNames((prevState) => {  //5️⃣콜백의 인자로는 이전 상태의 state
   return([input, ...prevState]) //6️⃣return할 값은 어떤배열이 될거고, 첫번째 인자로는 input 그리고 두번째 인자로는 prevState안에 들어있는 이전의 state값
    //4️⃣return 하는 값이 새로 업데이트 될 state가 됨
  }); //1️⃣setNames함수를 불러서 state를 업데이트 해줌
    //2️⃣새로 업데이트 시켜줄 state는 이전에 존재하는 state와 밀접하게 연관되어 있음
    //3️⃣이럴때는 setNames 인자안에 바로 값을 주는게 아니라 callback함수를 전달
  };

  
 return(
  <div>
   <input type='text' value={input} onChange={handleInputChange}/>
   //input의 value 속성으로 state의 input을 줌
   //사용자가 입력을 할때마다 handling을 해줄 함수를 호출할 수 있도록 onChange사용
 
   <button onClick={handleUpload}>Upload</button>
   {names.map((name, index)=>{ //names 배열을 돌면서 
    return <p key={index}>{name}</p> //item 하나하나 마다 p태그를 만들어줌
 //리액트에서 map을 써서 element를 출력하면 key가 꼭 있어야 함
   })}
  </div>
 );
}

export default App;