WebFactory

리액트에서 사용자가 입력하는 값(Input, Textarea 등)을 어떻게 관리할까요?HTML에서는 브라우저가 입력값을 들고 있지만, 리액트에서는 "모든 데이터는 리액트의 상태(State)가 관리한다"는 원칙을 따릅니다. 이를 제어 컴포넌트라고 합니다.1. 제어 컴포넌트(Controlled Component)란?입력창에 타이핑을 할 때마다 리액트의 state를 업데이트하고, 그 state를 다시 입력창의 value로 보여주는 방식입니다. 즉, 데이터의 신뢰 가능한 단일 출처(Single Source of Truth)를 리액트 상태로 두는 것입니다.2. 단일 입력창 관리하기가장 기본적인 방식은 onChange 이벤트와 useState를 조합하는 것입니다.JavaScript import { useState ..

리액트 개발에서 가장 많이 하는 작업 중 하나는 서버에서 가져온 데이터(배열)를 화면에 리스트 형태로 보여주는 것입니다.오늘은 자바스크립트의 배열 메서드인 map()과 filter()를 리액트에서 어떻게 활용하는지 정리해 보겠습니다.1. map() 메서드로 리스트 렌더링하기map()은 배열의 각 요소를 돌면서 새로운 형태(JSX)로 변환해 주는 역할을 합니다. 리액트에서는 반복되는 UI를 만들 때 필수적으로 사용됩니다.기본 사용법:JavaScript const users = ["Ryon", "Alice", "Bob"];function UserList() { return ( {users.map((user, index) => ( {user} ))} );}2. ..

리액트 공부 3일차입니다!오늘은 리액트 컴포넌트가 데이터를 다루는 두 가지 핵심 방식인 Props와 State에 대해 이야기 합니다.이 두 개념만 제대로 이해해도 리액트의 절반은 이해했다고 할 수 있습니다.1. Props (Properties)Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 '읽기 전용' 데이터입니다. 마치 함수의 매개변수(Parameter)와 비슷합니다.특징: 자식 컴포넌트 입장에서는 전달받은 Props를 직접 수정할 수 없습니다. (불변성)용도: 컴포넌트의 재사용성을 높이기 위해 외부에서 데이터를 주입할 때 사용합니다.JavaScript // 자식 컴포넌트function Greeting(props) { return 안녕하세요, {props.name}님!;}// 부모 컴포넌트에..

리액트는 자바스크립트의 최신 문법(ES6 이상)을 적극적으로 활용합니다.리액트 컴포넌트를 더 깔끔하고 효율적으로 작성하기 위해 반드시 알아야 할 세 가지 핵심 문법을 정리해 보겠습니다.1. 화살표 함수 (Arrow Function)리액트 컴포넌트를 정의하거나 이벤트 핸들러를 만들 때 기본적으로 사용되는 방식입니다. function 키워드 대신 =>를 사용하여 간결하게 표현할 수 있습니다.기본 문법:JavaScript // 일반 함수function add(a, b) { return a + b; }// 화살표 함수const add = (a, b) => a + b;특징: 한 줄로 작성할 경우 return과 { }를 생략할 수 있어 코드가 매우 짧아집니다. 리액트에서는 특히 함수형 컴포넌트를 선언할 때 표준처럼..

리액트(React) 공부를 시작하며 배운 핵심 내용을 정리해 봅니다.리액트는 현재 프론트엔드 개발에서 가장 인기 있는 라이브러리 중 하나로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다.1. 리액트(React)란 무엇인가?리액트는 페이스북(현 Meta)에서 개발한 UI 라이브러리입니다. 단순히 화면을 그리는 것을 넘어, 복잡한 웹 애플리케이션의 상태를 효율적으로 관리하고 화면을 빠르게 업데이트하는 데 최적화되어 있습니다.컴포넌트(Component) 기반: UI를 독립적인 단위인 '컴포넌트'로 쪼개서 관리합니다. 마치 레고 블록을 조립하듯 화면을 구성할 수 있어 재사용성이 높습니다.Virtual DOM (가상 DOM): 실제 DOM을 직접 수정하는 대신, 메모리에 가상의 DOM을 두고 변경 사항만 ..