React Hooks 복습_1

알아도 더 자세하게 그리고 모르는게 무조건 있을 것이라는 생각으로 복습을 시작하였다.

useState

개념

useState는 reack Hooks 중 하나로, 컴포넌트의 state를 간편하게 생성하고 업데이트를 시킬 수 있게 해 주는 도구를 제공해 준다.

사용 이유

상태 관리: 동적인 값을 저장하고 관리.

UI 갱신: 상태 변화 시 React가 자동으로 UI를 업데이트.

함수형 컴포넌트에서 상태 사용: 함수형 컴포넌트에서도 상태를 관리 가능.

예시코드

import { useState } from "react";

function App() {
  const [time, setTime] = useState(1);
  const [input, setInput] = useState("");
  const [nameList, setNameList] = useState(["홍길동", "김민수"]);

  const handleChangeTime = () => {
    if (time >= 12) {
      setTime(1);
    } else {
      setTime(time + 1);
    }
  };

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleNameUpload = () => {
    setNameList((prevName) => {
      return [input, ...prevName];
      //이 경우는 앞에 추가하는 경우

      //뒤에 추가하고 싶다면  [...prevName,input] 이렇게 쓰면 된다.
    });
    setInput("");
  };

  return (
    <div>
      <span>현재시각 : {time}시</span>
      <button onClick={handleChangeTime}>Update</button>
      <p />
      <input value={input} onChange={handleInputChange} type="text" />
      <button onClick={handleNameUpload}>Upload</button>
      <div>
        {nameList.map((name) => {
          return <p>{name}</p>;
        })}
      </div>
    </div>
  );
}

export default App;

update 버튼 클릭 시 시간이 +1 씩 추가되는 기능과
upload 버튼 클릭 시 이름이 추가되는 기능에 관한 간단한 코드이다.

학습 참고 강의 (유튜브)