머리터짐🤯 봐도봐도 처음본단말이지.. 왜 이렇게 되는지 계속 파기.. 함수형 업데이트란?React의 useState(또는 클래스형의 setState)에서 함수형 업데이트(functional update)는상태 변경시 최신 상태(prevState)를 기반으로 새 값을 계산해 반환하는 방식이다.특히 여러 번 연속된 업데이트, 이전 상태에 의존하는 로직에서 예상치 못한 동작 방지하기 위해 권장된다.setState(prevState => 새상태)`prevState`: 현 시점에서 가장 최신의 상태 값.이를 활용해서 새로운 상태 값 계산해 반환. 함수형 업데이트가 필요한 이유React의 상태 업데이트는 *비동기적으로 처리여러 번의 상태 변화를 한 번에 묶어 처리할 때, 이전 상태 값을 직접 참조하면 최신 값이 ..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

1. 상태와 변수 선언const [input, setInput] = useState('');const [todos, setTodos] = useState([]);const [showWarning, setShowWarning] = useState(false);const index = useRef(0);`input` : 입력창에 입력된 텍스트를 저장`setInput` : input 상태를 바꿔주는 함수`todos` : 할 일 목록을 저장하는 배열(예: `{id: 0, add: "공부하기"}`)`setTodos` : todos 상태를 바꿔주는 함수`showWarning` : 경고 메세지를 보여줄지 여부(true/false)`setShowWarning` : showWarning 상태를 바꿔주는 함수`index`..

1. 스냅샷이란?state는 렌더링이 될 때의 값(=스냅샷)만 보여준다는 뜻.setState를 여러 번 해도, 같은 렌더링 안에서는 state 값이 '고정'되어 있다.버튼을 클릭해도 1씩 증가import { useState } from 'react';export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 );} 2. state 업데이트 큐React에서 `setState`를..

리액트 화면 업데이트, 세 단계로 이해하기1. 트리거 (Trigger)상태(state)나 props가 바뀔 때(리렌더) 리액트가 "화면을 바꿔야겠다"라고 신호를 받는 순간import { useState } from "react";export default function Counter() { const [count, setCount] = useState(0); // 1. 트리거: 버튼을 누르면 setCount가 실행됨 → 상태 변경 // 2. 렌더링: Counter 함수가 다시 실행됨 → 새 설계도(JSX) 생성 // 3. 커밋: 바뀐 부분만 실제 화면(DOM)에 적용 return ( setCount(count + 1)}> {count} );}사용자가 버튼을 클릭하면 `..

보호되어 있는 글입니다.

useState 예제문제를 풀면서 문법 익히는 중이다. 문제를 풀면서 하나씩 풀이방법을 적어놓았다. 예제문제영화 제목을 입력하고 "추가" 버튼을 누르면,영화 제목이 아래 목록에 쌓이게 하세요.각 영화 옆에 "삭제" 버튼을 두고,누르면 해당영화가 목록에서 사라지게 하세요.import { useState } from "react";export default function Movie() { const [input, setInput] = useState(''); const [movies, setMovies] = useState([]); function handleSubmit(e) { e.preventDefault(); if(input.trim() === '') { alert('영화 제..