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('영화 제..

1. useState란`useState`는 리액트의 상태(state) 관리 함수컴포넌트 안에서 값이 바뀌면 화면도 자동으로 다시 그려지게 해줌`useState` 는 배열을 반환 : `[현재값, 값을바꾸는함수]`2. 코드 구조const [index, setIndex] = useState(0);`index` : 상태값. 여기에서는 0으로 시작`setIndex` : index 값을 바꿀 때 쓰는 함수`useState(0)` : index의 초기값을 0으로 설정한다.3. 이 코드를 풀어서 쓰면/* 1. stateArray변수에 담으면 */const stateArray = useState(0);// stateArray는 [0,함수]처럼 두 개의 값을 가진 배열이다.// stateArray -> 현재상태값(여기서는..

보호되어 있는 글입니다.

더보기1. 컴포넌트마크업, CSS, JS를 앱의 재사용 가능한 UI 요소1-1. 컴포넌트 내보내기`export default` 는 표준 JavaScript 구문으로 나중에 다른 파일에서 가져오는 기능이다.1-2. 함수 정의하기`function Profile() {}`을 사용하면 `Profile`이라는 자바스크립트 함수를 정의.React 컴포넌트는 일반 JS 함수이지만, 이름은 대문자로 시작해야 하며 그렇지 않으면 작동하지 않는다. 1-3. 마크업 추가하기이 컴포넌트는 `src` 및 `alt` 속성을 가진 ``태그를 반환한다. HTML처럼 작성되있지만 실제로는 자바스크립트이며,이 구문을 JSX라고 한다.return ;// 마크업이 모두 return키워드와 같은 라인에 있지 않은 경우 괄호로 묶는다.retu..

리액트 기본 문서에서 보충 설명이 필요해 재정리를 통해 기본 개념을 다잡고자 한다.https://ko.react.dev/learn/passing-props-to-a-component1. props란props는 "properties"의 줄임말로 부모 컴포넌트가 자식 컴포넌트에게 값을 전달하는 방법이다.자식 컴포넌트는 props를 통해 전달받은 값을 읽는다.props는 읽기 전용이다. 자식 컴포넌트는 props 값을 직접 수정할 수 없다.2. 코드에서의 props 흐름2-1. 부모 컴포넌트 : Profile// App.jsexport default function Profile() { return ( .. );}Profile 컴포넌트가 Avatar 컴포넌트를 여러번 사용하면서, 각..