WebFactory

리액트 공부 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을 두고 변경 사항만 ..