리액트 8

[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] 리액트 컴포넌트란? 함수로 만드는 UI 조각

리액트는 UI를 컴포넌트 단위로 구성한다.컴포넌트는 쉽게 말해 "화면을 구성하는 작은 조각"이다. 버튼 하나, 헤더 하나, 목록 하나도 모두 컴포넌트다.✅ 함수 컴포넌트란?가장 일반적인 방식은 "함수(function)"을 이용해서 컴포넌트를 만드는 것이다.예를 들어, 헤더 컴포넌트를 만든다면 다음과 같이 작성할 수 있다.// 함수 선언식function Header() { return 헤더 입니다}// 화살표 선언식const Header = () => { return 헤더 입니다}; 함수 선언식, 화살표 선언식 모두 기능은 동일하기 때문에 익숙한 방식으로 사용하면 된다.클래스를 이용해서 선언할 수 있지만 코드가 복잡해져서 함수 방식이 일반적으로 사용된다.✅ 함수 컴포넌트의 return 문법 - ..

Node.js/React 2025.05.05

[React] React App 구동원리 알아보기

React 앱은 어떻게 작동할까?우리는 npm run dev 한 줄로 앱을 실행하지만, 그 내부에서는 많은 일이 일어난다.React 앱이 브라우저에 렌더링되기까지의 흐름을 따라가보자 1. 브라우저는 어디부터 읽을까?React 앱은 결국 HTML, CSS, JavaScript로 동작한다.npm run dev를 실행하면 개발 서버가 열리고, 브라우저는 루트 HTML 파일인 index.html을 불러온다. 여기서 핵심은 두 가지다:div#root : React가 실제 DOM에 렌더링될 자리main.jsx : 앱의 진입점 (entry point)2. 진입점(main.jsx) 에서는 무슨 일이?main.jsx 는 App.jsx 를 ReactDOM 을 통해 #root에 렌더링한다.import React fr..

Node.js/React 2025.05.04

[React] React App 생성하기

리액트로 프론트엔드 개발을 시작하기 위해서는 React 앱을 생성하는 것이 선행되어야 하는데,어떻게 리액트 앱을 생성해야 하는지 그리고 어떻게 구동해야하는지 단계별로 살펴보자 1. 왜 리액트 앱(애플리케이션)이라고 부를까?웹 페이지는 보통 하나의 HTML로 구성되어 있지만,리액트는 여러 개의 컴포넌트로 구성된 SPA(Single Page Application)이다.각 컴포넌트가 하나의 기능 단위로 묶여 있고, 이를 조합해서 하나의 애플리케이션을 만든다.즉, 단순한 HTML 페이지가 아니라 구조화된 프로그램에 가깝기 때문에 앱(App)혹은 애플리케이션이라고 부른다 2. 리액트 앱을 생성하는 방법Node.js 패키지 생성 -> React 라이브러리 설치 -> 기타 도구 설치 및 설정 기타 도구 설치하고 설정..

Node.js/React 2025.05.04

[React] 리액트란 무엇인가?

1. 컴포넌트 기반 UIReact는 컴포넌트(Component) 단위로 화면을 구성한다.말 그대로 “화면을 이루는 구성 요소”를 하나하나 모듈처럼 나눠서 만드는 방식이다. 예시:Header.js – 상단 메뉴Main.js – 본문Footer.js – 하단 영역이렇게 컴포넌트로 나누면,중복 코드 제거유지보수 편리재사용 가능덕분에 대규모 UI를 체계적으로 관리할 수 있다.2. 선언형 프로그래밍 방식React는 UI를 “선언형(Declarative)” 방식으로 정의한다. 선언형 vs 명령형선언형(React): "무엇을 원하는지"만 명확하게 선언예: “이 버튼을 누르면 이 화면을 보여줘”명령형(JavaScript 등): "어떻게 할 것인지" 일일이 지시예: 버튼 클릭 → DOM 선택 → 속성 수정 → 재랜더..

Node.js/React 2025.05.04

[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

[React] React 프로젝트 만들기

공부하려면 직접 프로젝트를 만들어보는 게 가장 좋다!먼저, React 프로젝트를 생성해보자.이번 과정에서는 VS Code를 사용하여 개발을 진행할 예정이다. 🚀 ✅ VS Code 를 다운받기 전, node 를 "최신 버전"으로 다운받는다.맥북 유저들은 nvm으로 node버전을 관리하는 것을 추천한다. 그때 그때 필요한 버전으로 변경할 수 있어서 매우 편리함!(nvm 이란 ? node version manager인데, 노드 버전을 관리하는 스크립트) ✅ nvm이 설치되어있다는 전제 하에 terminal에 들어가서 아래 명령어를 실행하면 lts 버전으로 설치가 된다.nvm install --lts ✅ 설치가 되었다면 버전 확인node -vnpm -v ✅ VS Code 다운받으러가기https://code.v..

Node.js/React 2025.02.17

[React] React 공부 시작하기 (feat. React의 정의)

새로운 프로젝트에서 프론트엔드 기술 스택으로 React를 사용하게 되어 공부를 시작하게 됐다.공부 방법으로 유튜브 강의, 인프런 강의, 책 등을 고민했지만, 가장 기본이 되는 공식 문서부터 정독하기로 결정!단순히 읽는 것보다는 블로그에 정리하면서 공부하는 게 더 도움이 될 것 같아 기록을 시작한다. React를 처음 공부하는 입장에서 중요한 것 같은 개념과 나의 학습 과정을 정리할 것 !이 글이 React를 공부하는 다른 사람에게도 도움이 되길 …! 🚀 📌 참고 자료:React 공식 문서React GitHub리액트를 공부하기 전에 "React가 정확히 무엇인지" 먼저 알고 싶어서 공식 사이트를 탐색했는데,의외로 react.dev에서는 기본 정의를 찾을 수 없었다. 결국 GitHub README.md..

Node.js/React 2025.02.17