반응형

props 2

React에서 폼 제출 처리와 props를 통한 컴포넌트 간 데이터 전달

React에서 폼 제출 처리와, 컴포넌트 간 데이터를 전달할 때 사용하는 props에 대해 알아보겠습니다.이 두 가지는 React를 구성하는 기본 요소 중 하나로, 기능적인 웹앱을 만들기 위해 꼭 필요한 개념입니다.1. 폼 제출 처리하기HTML에서 form 요소는 기본적으로 제출 시 페이지를 새로고침합니다. 하지만 React에서는 이를 막고 상태로 처리합니다.예제: 간단한 로그인 폼import { useState } from 'react';function LoginForm() { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const handleSubmit = (e) => { e.pre..

Programming/React 2025.04.11

React 컴포넌트 분리와 Props 사용법 알아보기

React 개발에서 가장 기본이 되는 컴포넌트 분리와 props 사용법에 대해 알아보겠습니다.React는 UI를 컴포넌트 단위로 쪼개서 개발하는 구조인데요, 이 구조를 이해하면 유지보수나 재사용성이 매우 좋아집니다.컴포넌트란?컴포넌트(Component)는 React에서 UI를 구성하는 기본 단위입니다.하나의 컴포넌트는 함수처럼 만들 수 있고, 원하는 데이터를 props로 전달해 재사용할 수 있습니다.간단한 컴포넌트 예제:function Welcome() { return 안녕하세요!;}이 컴포넌트를 App에서 다음과 같이 사용할 수 있습니다:function App() { return ( );}컴포넌트 분리하나의 파일에서 모든 코드를 작성하기보다는, 역할별로 파일을 나눠 작성하..

Programming/React 2025.04.11
반응형