728x90 300x250 SMALL Front-end/React115 리액트에서 텍스트 입력 폼 리액트에서 폼(Form)은 사용자로부터 입력을 받아 데이터를 처리하기 위한 HTML 요소들을 포함한 컴포넌트이다.기본적으로 HTML의 , , , 등의 요소를 사용하며, 리액트에서는 폼 요소의 상태를 React state와 연결하여 관리하는 방식으로 동작 1. 리액트 폼의 특징상태 기반 관리 : 폼의 입력 값을 리액트의 상태(state)로 관리한다.제어 컴포넌트(Controlled Component) : 폼 요소의 값(value)이 컴포넌트 상태에 의해 제어된다.비제어 컴포넌트(Uncontrolled Component) : 리액트 상태가 아닌 DOM 요소 자체의 상태를 직접 참조한다.이벤트 처리 : onchange, onSubmint 등의 이벤트 핸들러를 통해 사용자의 입력을 처리한다. 2. 제어 컴포넌.. 2025. 1. 17. 여러개 리스트 컴포넌트 key ID로 추가하기 - 비공개 보호되어 있는 글 입니다. 2025. 1. 16. 리스트 컴포넌트 key 추가하기 1. 키가 없는 기본적인 리스트 컴포넌트import React from "react";function ListItem({ item }) { return {item};}function List() { const items = ["Apple", "Banana", "Orange", "Grapes"]; return ( {items.map((item) => ( ))} );}export default List; 이 코드는 items 배열을 map()메서드로 순회하면서 각 항목을 ListItem컴포넌트로 변환한다.하지만 이 상태에서는 key 속성이 없기 때문에, 리액트는 항목들을 구분할 수 없어, 변경된 항목을 효율적으로 처리할 수 없다. 2. key를 추가한 .. 2025. 1. 15. 여러 개의 컴포넌트 렌더링하기 리액트에서 여러 개의 컴포넌트를 렌더링하는 것은 매우 일반적인 작업이다.여러 개의 컴포넌트를 렌더링하려면, 주로 배열이나 반복문을 사용하여 컴포넌트들을 동적으로 생성하고 렌더링한다.컴포넌트를 여러 개 렌더링하는 과정에서 중요한 점은 리스트 렌더링, 조건부 렌더링, 그리고 고유한 키(key)설정이다.다음은 여러 개의 컴포넌트를 렌더링하는 방법에 대한 자세한 설명이다. 1. 배열을 사용하여 컴포넌트 렌더링하기리액트에서는 배열을 사용하여 여러 개의 컴포넌트를 동적으로 렌더링할 수 있다. 배열의 각 항목을 맵핑하여 컴포넌트로 변환한다.import React from "react";// 아이템을 표시할 컴포넌트function Item({ name }) { return {name};}function ItemLi.. 2025. 1. 14. 이전 1 ··· 9 10 11 12 13 14 15 ··· 29 다음 728x90 반응형 LIST