VSCODE 에서 npm 명령어를 사용해 Vite React 프로젝트를 생성했다. 생성 후 가장 먼저 보는 파일은 index.html 이고, 여기서 src/main.jsx 같은 엔트리 파일을 불러온다. main.jsx 는 React 앱을 실제 DOM 의 root 요소에 붙이고, 그다음 App.jsx 가 루트 컴포넌트로 실행된다. 즉 흐름은 아래와 같다.index.html : 가장 바깥 HTML 껍데기main.jsx / main.tsx : React 시작점App.jsx / App.tsx : 메인 화면 컴포넌트// index.html // main.jsximport { StrictMode } from 'react'import { createRoot } from 'react-dom/cl..

[React] React 파일 구조(Vite React)

VSCODE 에서 npm 명령어를 사용해 Vite React 프로젝트를 생성했다. 생성 후 가장 먼저 보는 파일은 index.html 이고, 여기서 src/main.jsx 같은 엔트리 파일을 불러온다. main.jsx 는 React 앱을 실제 DOM 의 root 요소에 붙이고, 그다음 App.jsx 가 루트 컴포넌트로 실행된다. 즉 흐름은 아래와 같다.index.html : 가장 바깥 HTML 껍데기main.jsx / main.tsx : React 시작점App.jsx / App.tsx : 메인 화면 컴포넌트// index.html // main.jsximport { StrictMode } from 'react'import { createRoot } from 'react-dom/cl..

2026.06.01

컴포넌트컴포넌트는 UI 를 잘게 나눈 조각이다.버튼, 카드, 네비게이션, 리스트 같은 걸 각각 독립된 컴포넌트로 만들고, 필요할 때 조합해서 화면을 구성한다.쉽게 말하면, 화면 조각을 만드는 JavaScript 함수이다. React 에서 컴포넌트는 보통 함수로 만든다.function Hello() { return 안녕하세요;} 위 함수를 사용하면 처럼 태그로 이용해서 사용한다. Props (속성)Props 는 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 입력값이다. 쉽게 말하면 함수의 매개변수 같은 개념이라 보면 된다.function Hello(props) { return {props.name}님 안녕하세요;} 사용 예 결과홍길동님 안녕하세요 더 많이 쓰는 방식 (구조분해)// 부모 컴포넌트functi..

JSX(Javascript Syntax eXtension) 문법이란? JSX 는 Javascript 를 확장한 문법이다. JSX 는 React 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다. 브라우저에서 babel 을 사용하여 일반 Javascript 문법으로 변환된다. // JSX 문법 사용 function App() { return( 안녕하세요? ) } // babel 을 사용한 문법 변환 function App() { return React.createElement("h1", null, "안녕하세요?"); } JSX 문법은 Javascript 파일에 HTML 코드를 작성한다. JSX 문법 1. JSX 문법에서 return 시 반드시 부모요소는 1개여야 한다. // 정상적인 문법..

react 프로젝트 생성을 위해 "npx create-react-app 프로젝트명" 명령어를 사용해 생성했다. 생성된 폴더 구조는 아래와 같다. 해당 구조를 알기 전에 NPM(Node Package Manager) 에 대해 알아야한다. NPM(Node Package Manager)npm 은 node.js 를 위한 패키지 관리 매니저이자 node.js 를 위한 오픈소스 생태계이다.npm 은 node.js 에서 사용하는 모듈들을 패키지로 만들어 의존성, 필요한 라이브러리 등관리해준다.  package.jsonpackage.json 파일은 프로젝트 라이브러리 버전 및 의존성을 관리하기 위한 JSON 파일이다.기본적으로 "npm init" 명령어를 통해 생성할 수 있다. // package.json{ "nam..

NodejsNode.js 는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 실행을 위한 Runtime 환경이다.Javascript 는 일반적으로 크롬과 같은 브라우저에서 내장되어 있는 Javascript 런타임 환경으로 인해실행된다. 이러한 Javascript 를 개발자 로컬 환경에서 실행시키기 위해 사용하는게 Node.js 이다. 런타임이란 특정 언어로 만든 프로그램을 실행할 수 있는 환경을 말한다.Javascript 언어도 독립적인 언어가 아닌 스크립트 언어이다. 스크립트 언어는 특정한 프로그램 안에서동작하는 프로그램이기 때문에 Javascript 런타임 환경이 필요하다. Express공식홈페이지에서 나온 설명을 보면 Express 는 웹 및 모바일 어플리케이션을 위한 일련..