React : state

React의 State란?

State는 React 컴포넌트에서 사용되는 동적인 값이나 상태를 관리하는 객체입니다. 값이 변경되면 자동으로 관련된 컴포넌트가 재렌더링되므로, 양방향 렌더링을 지원합니다. 일반적으로 이벤트와 함께 사용되며, 컴포넌트 내부에서 변경 가능한 데이터를 관리할 때 사용됩니다.

---

State 사용법

1. useState 가져오기
   React 모듈에서 useState를 불러와야 합니다.

   import { useState } from 'react';

2. useState 선언하기
   상태와 상태를 변경하는 함수를 선언합니다.

   const [state, setState] = useState(초기값);

   • state: 현재 상태값
   • setState: 상태를 업데이트하는 함수

State의 장점

• 자동 재렌더링: State는 값이 변경될 때 자동으로 화면을 갱신합니다.
• 데이터 변경 함수 사용: 상태를 변경할 때는 setState와 같은 함수를 통해 이루어져야 하며, 이를 통해 상태와 UI가 항상 동기화됩니다.

---

State vs 일반 변수 사용 예시

일반 변수 사용

import './App.css';

let count = 0;

function increase() {
  ++count;
  document.getElementById("cnt1").textContent = count;
}

function App() {
  return (
    <div>
      <p id='cnt1'>{count}</p>
      <button onClick={increase}>증가</button>
    </div>
  );
}

export default App;

State 사용

import { useState } from "react";
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(i => i + 1)}>증가</button>
      <button onClick={() => setCount(i => i - 1)}>감소</button>
      <button onClick={() => setCount(0)}>리셋</button>
    </div>
  );
}

export default App;

---

State 객체 사용

State를 객체로 관리할 수도 있습니다. 이 경우, 기존 상태를 변경하지 않고 새로운 객체를 반환해야 합니다.

const [state, setState] = useState({ key: value });

---

State를 사용하는 것은 React 애플리케이션에서 동적인 데이터를 효과적으로 관리하고 UI를 동기화하는 데 필수적입니다. 일반 변수로 상태를 관리할 경우 수동으로 DOM을 조작해야 하므로, React의 useState를 활용하여 효율적인 개발이 가능합니다.

---

---

---

state 예제

#1. 토글 버튼 만들기

// #4 문제
// 토글 버튼을 만드세요
// 1. state 값을 true로 놓기
// 2.state가 ture일시 화면에 <h1>가게가 오픈되었습니다</h1> 출력
// 3. 버튼을 놓고 버튼의 문구는 {개,폐장}
// 4. 해당 버튼을 눌렀을 시 state 값이 false로 변경
// 5. state가 false가 되었을 시 화면에 <h1>영업중이 아닙니다</h1> 출력

나의 풀이

import { useState } from "react";
import './App.css'

 function App(){
  const [toggle, setToggle]= useState(true);
  const openclose=()=>{
    (toggle == true) ? setToggle(toggle => false) : setToggle(toggle => true)
  }

  return(
    <div>
      <h1>{toggle == true? "가게를 오픈했습니다" : "가게를 닫았습니다"}</h1>
      <button onClick={openclose}>{toggle == true ? "close" : "open"}</button>
    </div>
  )
 }
export default App

선생님 풀이

import { useState } from "react";
import './App.css'

function App(){
  const[toggle,setToggle] = useState(true)
  return(
  <div>
    <button onClick={()=>setToggle(toggle=>!toggle)}>{toggle?"폐장":"개장"}</button>
    {toggle? <h1>가게가 오픈되었습니다</h1>:<h3>영업중이 아닙니다</h3>}
  </div>
  )
}
export default App

#2. 업다운 게임 만들기

//#5 문제 <ip/down>
//업다운 게임을 만드세요
  //1. state 값을 입력값인 input1과 고정값인 currentValue 두개를 만든다
  //2. 태그는 각각 업다운 문구를 나타내는 h1 태그와 실행 버튼, 그리고 input 태그로 구성한다
  //3. 해당 input 태그는 onChange 이벤트로 해당 데이터의 내용을 실시간으로 갱신하도록 만든다
  //4. {실행} 버튼을 누르게 되면 입력 값인 input1과 currentValue를 비교하여 만약 input1의 값이 
  // currentValue 값보다 작다면 "업" 크다면 "다운" 같다면 "밎췄습니다"를 출력
  //*참고 : onChange 에 state 함수를 걸어 데이터를 실시간으로 받을 수 있다.

나의 풀이

import { useState } from "react";
import './App.css'

let random = parseInt(Math.random()*100)+1 // 1~100까지 랜덤 값
console.log(random)

function App(){
  const [input1,setInput1] = useState(0) 
  const [num,setNum] = useState(random) 
  const [result,setResult] = useState("") 

  function updown(){
    if(input1 == num){
      setResult("정답!")
    }else if(input1>num){
      setResult("DOWN")
    }else{setResult("UP")}
  }
  return(
    <div>
    <h1>{result}</h1>
    <input type="number" value={input1} onChange={e=> setInput1(e.target.value)} />
    <button onClick={updown}>UP!DOWN!</button>
    </div>
  )
}
export default App

#3. 가위바위보 게임 만들기

//#6 가위바위보
  //가위바위보 게임을 만드세요
  // 1. 사용자의 상태값을 받는  user 상태값과 , 컴퓨터 상태값을 받는 com 받는다
  // 2. 사용자의 상태값을 input 창을 통해서 입력 받는다
  // 3. 버튼을 눌러 user와 com의 값을 비교한 후에 h1 태그에 출력하여
  //    각각 "이겼습니다","졌습니다","비겼습니다"를 출력하는 게임을 만들어라

나의 풀이