#TIL 20일차(React State)

State란?

컴포넌트 내부에서 관리되는 동적인 데이터

• 컴포넌트의 동작을 제어
• 사용자와의 상호작용을 처리
• 컴포넌트의 렌더링 결과에 영향

사용 방법

1. useState를 import 한다.

import { useState } from 'react'

2. 함수형 컴포넌트에서 useState 훅을 사용하여 state를 선언한다.

const [todos, setTodos] = useState([
    { id: uuidv4, title: "리액트 공부하기", content: "리액트 기초 문법 공부하기", complete: false },
    { id: uuidv4, title: "자바스크립트 공부하기", content: "자바스크립트 문법 공부하기", complete: true }
  ])

불변성

✏️ 상태를 직접 수정하지 않고, 새로운 상태 객체를 생성하여 상태를 업데이트해야한다.

const addGoals = (e) => {
    //기본값 제출 방지
    e.preventDefault();
    if (!title || !content) {
      alert("제목과 내용 모두 입력하세요!!!");
      return;
    }

    const todoId = {
      id: uuidv4(), // uuid를 사용하여 고유한 id 생성
      title,
      content,
      complete: false
    };

    setTodos([...todos, todoId]);

    //Todo 작성 후 공백으로 변경
    setTitle("");
    setContent("");
  };