React 시작

Node.js

Node.js는 크로스 플랫폼 자바스크립트 런타임 환경으로, 서버와 클라이언트에서 동일한 언어(자바스크립트)로 코드를 작성할 수 있도록 지원합니다.

 

npm(Node Package Manager)

npm은 Node.js의 기본 패키지 관리자입니다. JavaScript 라이브러리와 모듈을 검색, 설치, 관리, 공유할 수 있는 도구로, Node.js 생태계의 핵심 요소 중 하나입니다.  - package.json : 프로젝트 정보를 기록하는 핵심 파일로, 의존성, 스크립트, 버전 등의 정보를 포함합니다.  - package-lock.json : 패키지와 하위 의존성의 정확한 버전을 기록하여 일관성을 보장합니다.

 

npx(Node Package eXecute)

npx는 Node.js의 패키지 관리자 npm에 포함된 실행 도구입니다. npm 버전 5.2.0 이상부터 기본적으로 포함되어 있으며, 패키지를 설치하지 않고도 명령어를 실행할 수 있는 기능을 제공합니다.

 

React Start

> npx create-react-app . //React App 생성  > npm run start //React App 실행 => http://localhost:3000 //  > npx create-react-app . --use-npm --legacy-peer-deps // 의존성 충돌 문제 회피  > npm install web-vitals // web-vitals 패키지 설치  > npm audit fix --force  > npm run start

s.cmd

set NODE_OPTIONS=--openssl-legacy-provider npm run start

Node.js가 OpenSSL 3.0으로 업그레이드되면서 오류발생 s.cmd 배치파일 생성(win10) OpenSSL 관련 환경변수 옵션을 설정후 개발서버 실행

JSX

JSX(JavaScript XML)는 React에서 UI를 정의할 때 사용하는 JavaScript 확장 문법 입니다. HTML과 비슷한 문법을 사용하면서 JavaScript 코드 안에서 UI 구조를 작성할 수 있게 해줍니다. JSX는 React에서 가독성과 유지보수성을 높이는 데 중요한 역할을 합니다.

 

React props

props는 React에서 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용하는 객체입니다. props는 컴포넌트 간의 데이터를 효율적으로 전달하고, 컴포넌트를 재사용 가능하게 만드는 핵심 요소입니다.

 

React state

React의 state는 컴포넌트 내부에서 동적으로 관리되는 데이터입니다. 컴포넌트의 상태(state)가 변경되면 React는 자동으로 UI를 다시 렌더링합니다. state는 사용자 인터랙션, 네트워크 응답, 타이머 등으로 인해 변경될 수 있는 데이터를 관리할 때 사용됩니다.

 

React ref

React에서 ref는 DOM 요소나 클래스형 컴포넌트에 직접 접근하거나, React 외부 라이브러리와 상호작용할 때 사용하는 기능입니다. 주로 직접적인 DOM 조작, 포커스 설정, 애니메이션, 그리고 외부 라이브러리 통합 등의 상황에서 사용됩니다.

 

export default

export default는 JavaScript의 모듈 시스템에서 사용되는 구문으로, 모듈의 기본 내보내기(default export)을 정의하는 데 사용됩니다. 이를 통해 모듈 간에 재사용 가능한 코드, 함수, 클래스 등을 내보낼 수 있습니다. export default는 한 모듈당 하나의 기본 내보내기만 허용됩니다.

 

// 함수 정의
function greet() {
  console.log("Hello, World!");
}
export default greet; // 기본 내보내기

// 기본 내보내기를 가져올 때는 중괄호 없이 import
import greet from './greet.js';  // greet 함수 가져오기
greet();  // "Hello, World!"

import Person from './Person.js';  // Person 클래스 가져오기
const person = new Person('Alice');
person.sayHello();  // "Hello, Alice!"