Frontend Framework (11) 썸네일형 리스트형 [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.. [설치] Vue.js 설치 및 프로젝트 생성 Vue 설치기존 React를 간단히 공부하면서 Node.js를 이미 설치하였었음Node.js가 설치되어 있지 않다면 설치 후 cmd창을 열고 순차적으로 진행vue 설치npm install vuevue cli 설치 npm install -g @vue/clinpm install : Node.js의 패키지 매니저(NPM)를 사용하여 패키지를 설치하라는 명령-g : 글로벌 설치 옵션 (이걸 붙이면 시스템 전체에서 사용 가능하게 설치됨)@vue/cli : Vue.js 프로젝트를 생성하고 관리하는 Vue CLI 패키지Vue CLI 설치 확인# Vue CLI 버전이 출력되면 정상vue --version글로벌 설치 이유 및 설치하지 않았을 경우 프로젝트 생성글로벌 설치(-g)를 통해 어디서든 다음과 같이 vue 명령어.. [개념] Vue.js란? Vue.js란?사용자 인터페이스(UI) 개발에 초점을 맞춘 오픈소스 프론트엔드 프레임워크로, React와 Angular의 개념을 참고하여 가볍고 직관적인 문법을 제공하는 것이 특징 대표적인 프론트엔드 프레임워크 중 하나로 React, Angular와 함께 널리 사용SPA(Single Page Application) 및 MPA(Multi-Page Application) 개발 모두 가능하며, 상태 관리(Vuex, Pinia)와 라우팅(Vue Router) 기능을 활용하여 실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 등 다양한 웹 애플리케이션 개발에 사용 SPA(Single Page Application)는 전체 페이지를 새로고침하지 않고 필요한 데이터만 동적으로 업데이트하는 웹 애플리케이.. [개념] 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.. 이전 1 2 다음 목록 더보기
