JSX 2

[React] JSX로 UI 표현하기

리액트에서 UI를 만들 때 사용하는 JSX는, 얼핏 보면 HTML과 비슷하지만 자바스크립트와 섞여 있는 특별한 문법이다.이 문법을 제대로 이해하면 더 깔끔하고 실수 없는 컴포넌트를 만들 수 있다. ✅ JSX에서 값 렌더링하기JSX에서는 중괄호 {}를 이용해 자바스크립트 값을 태그 안에 넣을 수 있다.const name = '댕주';const Hello = () => 안녕하세요, {name}입니다!;이렇게 하면 name 변수에 들어있는 값이 화면에 그대로 렌더링된다.1. 중괄호 안에는 표현식만 쓸 수 있다.표현식 = 값을 생성하는 코드✔️ 가능: 변수, 숫자 계산, 삼항 연산자 등❌ 불가: if, for, while 같은 문장(statement){user.age > 20 ? '성인' : '미성년자'} //..

Node.js/React 2025.05.05

[React] Quick Start - 1

📌 React Quick Start 정리 (v19 기준)참고: https://react.dev/learnReact 앱은 컴포넌트 (Component) 로 구성되어 있다.컴포넌트는 UI(사용자 인터페이스)의 하나의 독립적인 부분을 담당하며, 자체적인 로직과 UI를 가질 수 있다. ✅ 컴포넌트란 ?리액트의 핵심 개념 중 하나는 "컴포넌트 기반 아키텍처" 라는 것.즉, 리액트는 컴포넌트 단위로 구성되며, 각각의 컴포넌트는 하나의 UI 조각을 담당한다. ➡️ 컴포넌트 (Component) = UI의 개별적인 조각 ⬅️ ✔️ 작은 버튼 하나부터 페이지 전체까지 컴포넌트가 될 수 있다.✔️ 재사용이 가능하며, 독립적으로 동작할 수 있는 UI의 기본 단위다. ✅ 리액트에서 컴포넌트는 어떻게 정의될까 ?리액트에서 컴..

Node.js/React 2025.02.18