본문 바로가기

Language/React

 (8)
[개념] React의 동작 과정 리액트 앱에 접속하는 원리create-react-app으로 생성된 리액트 앱에는 웹 서버(예: webpack-dev-server)가 내장되어 있음npm run start 명령을 실행하면 이 웹 서버가 동작하며 브라우저를 자동으로 http://localhost:3000 주소로 연결 함리액트 앱이 동작하는 원리요청 : 브라우저에서 http://localhost:3000으로 요청index.html 반환 : 내장 웹 서버는 리액트 앱의 기본 HTML 파일인 public/index.html을 반환빈 태그 활용 : index.html의 태그에는 만 존재→ 이는 리액트 앱의 루트 요소로 사용// public/index.html 번들링된 bundle.js 실행 bundle.js가 포함하는 내..
[개념] React 프로젝트 구조 React 프로젝트 구조React 프로젝트 생성 명령어npx create-react-app my-app위의 명령어로 생성된 React 프로젝트 폴더의 구조my-app├── node_modules├── public├── src├── .gitignore├── package.json└── README.md. node_modules프로젝트에서 사용하는 모든 npm 패키지와 의존성이 저장되는 디렉토리역할 : 리액트 라이브러리, 웹팩, 바벨, eslint 같은 모듈과 프로젝트 실행에 필요한 모든 패키지를 포함주의사항이 폴더는 자동으로 생성되며 직접 수정하지 않음package.json에 정의된 의존성을 기반으로 npm install 명령어로 재생성 가능public정적 파일이 포함된 디렉토리역할브라우저에서 직접 접근 ..
[개념] List와 Key 리스트(List)란?리액트에서 여러 데이터를 화면에 렌더링하기 위해 사용하는 배열을 의미 Array.map() 메서드를 활용해 데이터를 컴포넌트로 변환하여 렌더링하는 것이 일반적리스트(List)를 사용하는 목적  반복적인 데이터를 화면에 표시 리액트에서 배열 데이터를 화면에 렌더링할 때 map 메서드와 리스트 구조를 활용 리스트는 주로 동일한 구조를 가지는 항목을 반복적으로 렌더링할 때 사용1, 2, 3, 4, 5라는 값을 ul안의 li에 표현을 하기 위해서는 다음과 같이 작성import React from 'react';function App() { return ( 1 2 3 4 5 );}export ..
[개념] 렌더링과 조건부 렌더링 렌더링(Rendering)이란? 사용자 인터페이스(UI)를 생성하거나 갱신하여 화면에 표시하는 작업 React에서의 렌더링컴포넌트가 실행되어 JSX(JavaScript XML)를 HTML DOM으로 변환하고, 이를 사용자 화면에 표시하는 과정초기 렌더링 (Initial Rendering) 애플리케이션이 처음 실행될 때 발생React 컴포넌트가 처음으로 DOM에 나타나는 시점function App() { return Hello, world!;} 이 컴포넌트가 처음 렌더링되면 h1 태그가 브라우저의 DOM에 추가 리렌더링 (Re-rendering)  컴포넌트가 상태(State)나 속성(Props)의 변화로 인해 다시 실행될 때 발생React는 변경된 부분만 업데이트하는 Virtual DOM을 사용하여 효율..
[개념] React Hook React Hook이란?함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있도록 도입된 기능이전에는 클래스형 컴포넌트에서만 상태와 생명주기 관리를 할 수 있었지만, Hook이 등장하면서 함수형 컴포넌트로도 복잡한 로직을 간단하게 구현이 가능해짐React Hook의 특징함수형 컴포넌트를 강화 : 상태와 생명주기 관리를 위해 클래스형 컴포넌트를 사용할 필요가 없어짐재사용 가능한 로직 : Custom Hook을 만들어 중복 코드를 줄이고 로직을 재사용 가능가독성 향상 : 로직을 분리하고 구조화할 수 있어 코드가 더 깔끔해짐React 16.8 이상에서 사용 가능 :Hook은 React 16.8 버전에서 도입 됨함수형 컴포넌트 ? 클래스형 컴포넌트 ?함수형 컴포넌트 JavaSc..
[개념] React의 개념, 컴포넌트, JSX, Props, State React란 무엇인가?다양한 자바스크립트 라이브러리 중 가장 인기있는 라이브러리사용자 인터페이스(UI)를 쉽게 구축하기 위해 설계된 컴포넌트 기반의 선언적 JavaScript 라이브러리 대규모 애플리케이션에 적합JavaScript의 다양한 라이브러리들UI 및 DOM 조작 : jQuery, GSAP, Three.js빌드 및 번들링 : Webpack, Parcel, Vite데이터 관리 및 상태 관리 : Lodash, Redux, RxJS테스트 : Jest, Mocha, ChaiHTTP 요청 : Axios, Fetch APIChart 및 데이터 시각화 : Chart.js, D3.js실시간 및 WebSocket : Socket.IO폼 검증 및 유효성 검사 : Yup, Validator.jsCSS 및 스타일링 :..
[Node.js] npm과 npx, 전역 설치와 로컬 설치 React를 설치하다가 누구는 npm을 쓰고, 누구는 npx를 써서 의문이 생김 npm이란?npm(Node Package Manager)은 Node.js의 패키지 매니저역할 : 패키지(라이브러리)를 설치, 관리, 삭제 하는 역할주요 기능패키지 설치 : npm install 패키지명패키지 삭제 : npm uninstall 패키지명프로젝트 의존성 관리 (dependencies와 devDependencies)설치 위치 : 패키지는 node_modules 폴더에 설치실행 : 설치된 패키지를 실행하려면 package.json에 있는 스크립트를 통해 실행 → npm start npx란?npm 패키지 실행 도구 역할 : 패키지를 전역으로 설치하지 않고도 실행할 수 있도록 도움 주요 기능 패키지를 일시적으로 실행 :..
[React] 리액트 프로젝트 생성 시 에러 발생 npx create-react-app project-name 에러 발생아래의 사진 같이 code ERESOLVE라는 에러가 발생 해결 방법해당 에러는 여러가지 방법이 있다고 하는데, 그 중 제일 간단한 방법이 yarn을 설치하여 프로젝트를 생성하면 된다고 함yarn 설치 방법은 하단에 참조 블로그 링크를 걸어두겠음yarn 설치 후 다음과 같이 명령어 입력하면 해결yarn create react-app react-tutorial 에러 발생 원인에러가 발생한 원인이 궁금해서 ChatGPT에 물어보니 다음과 같다고 함해당 에러의 원인은 React 버전 호환성의 문제react와 @testing-library/react가 서로 다른 React 버전을 요구React의 19.0.0 버전이 설치되었는데, @testin..

티스토리툴바