728x90 300x250 SMALL ReactJS4 리액트 합성(Composition)이란? 리액트 합성은 컴포넌트를 조합하여 더 큰 컴포넌트를 구성하는 방식이다.즉 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것이라고 할 수 있다.이를 통해 재사용성과 유연성을 높이며, 상속보다 구성 철학을 따른다.합성은 컴포넌트를 다른 컴포넌트의 자식이나 속성으로 전달하여 구조를 구성하는 것을 의미한다. 리액트 합성의 주요 패턴1. 자식 컴포넌트를 사용하는 합성컴포넌트 내부에서 props.children을 통해 하위 컴포넌트를 포함하는 방식이 패턴은 레이아웃 컴포넌트(예: 카드, 모달, 컨테이너 등)에서 자주 사용된다.function Card(props) { return {props.children};}// Card 컴포넌트 사용 예시function App() { return ( .. 2025. 2. 12. Context API 상태 관리 : 쉽게 이해 하기 Context API란?React에서 컴포넌트 간 상태를 공유할 때 가장 일반적인 방법은 props를 사용하는 것이다. 하지만 컴포넌트 구조가 깊어지면 Props Drilling(중첩된 컴포넌트에 계속해서 props를 전달하는 문제)이 발생할 수 있다.이를 해결하기 위해 Context API를 사용하면, 부모 → 자식 → 손자 컴포넌트로 직접 props를 전달하지 않고 전역으로 상태를 공유할 수 있다.Context API의 역할공통 상태를 한 곳에 저장Provider를 통해 트리 구조의 모든 컴포넌트에 데이터 제공데이터가 필요한 하위 컴포넌트에서 useContext를 통해 쉽게 접근Context API의 핵심 개념Context 생성 : createContext()를 사용해 컨텍스트를 만든다.Provide.. 2025. 2. 7. React에서 useState를 활용한 간단한 회원가입 폼 만들기 이번에는 useState를 활용하여 이름과 성별을 입력받고, 제출 버튼을 누르면 입력된 값을 출력하는 간단한 회원가입 폼을 만들어보자 1. React에서 useState란?useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 도와주는 React의 훅이다. 이 훅을 사용하면 입력값을 저장하고 변경할 수 있다. 2. 회원가입 폼 만들기아래는 이름과 성별을 입력받는 폼을 구현한 코드이다.import React, { useState } from "react";const RegisterForm = () => { const [userName, setUserName] = useState(""); const [userGender, setUserGender] = useState("남성"); c.. 2025. 2. 3. React에서 value 설정하고도 입력이 가능하게 만드는 방법 1. value 속성의 역할React에서 이나 에 value 속성을 설정하면 해당 입력 필드는 제어 컴포넌트가 된다.즉, value가 React 상태에 의해 고정되므로, 사용자가 직접 입력해도 그 값이 없데이트되지 않는다.입력 값을 바꾸려면 React 상태를 업데이트해야만 변경된다.function App() { return } 이 경우 입력 필드의 값은 "고정 값"으로 고정된다.사용자가 입력을 시도해도 값이 절대로 바뀌지 않는다.2. 자유롭게 입력 가능하게 만들려면?만약 입력값을 사용자에게 자유롭게 입력하도록 허용하면서도 value를 유지하고 싶다면 다음 방법이 있다. undefined 또는 null을 value로 설정function App() { return ;} 동작 원리value가 undefined.. 2025. 1. 30. 이전 1 다음 728x90 반응형 LIST