Frontend Framework/React (9) 썸네일형 리스트형 [Link] React의 페이지 이동 페이지 이동HTML에서 페이지 이동을 위해 기본적으로 사용되는 태그는 React에서 Link 라는 것으로 대체 됨단, React Link와 HTML 태그의 가장 큰 차이점은 페이지 이동을 하지 않는다는 점 태그는 페이지를 새로 고침하면서 이동을 하지만, Link는 페이지를 새로 고침하지 않고 URL 경로만 변경하여 사용자에게는 마치 페이지가 이동된 것처럼 보여줄 수 있음SPA(Single Page Application)란?Page가 Single로 단 1개의 페이지만을 사용한다는 것MPA(Multi Page Application)은 대체로 1개의 URL 마다 1개의 페이지가 매칭이 됨Ex) '/aaa' 주소 = aaa.html, '/bbb' 주소 = bbb.html → 2개의 페이지 React는 SPA.. [개념] 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 패키지 실행 도구 역할 : 패키지를 전역으로 설치하지 않고도 실행할 수 있도록 도움 주요 기능 패키지를 일시적으로 실행 : .. 이전 1 2 다음 목록 더보기
