-
선언형
HTML / CSS / JS 로 나워서 적기보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. (JSX = HTML +CSS) -
컴포넌트 기반
하나의 기능 구현을 위해 여러 종류의 코드를 묶어논 컴포넌트를 기반으로 개발했다. 컴포넌트를 분리하면 서로 독립적이고 재사용 가능하기 때문에 기능 자체에 집중하여 개발할 수 있다. -
범용성
리엑트는 자바스크립트프로젝트 어디에든 유연하게 적용가능하다.
facebook에서 관리되어 안정적이고 가장 유명하며 React.native로 모바일 개발도 가능하다.
JSX
- JSX는 React에서 UI를 구성할 때 사용하는 문법으로 Javascript를 확장한 문법이다.
- JSX는 브라우저가 바로 실행할 수 있는 자바스크립트코드가 아니다. 그래서 Bable을 이용해야한다. Bable은 JSX를 브라우저가 이해할 수 있는 자바스크립트로 컴파일한다. 컴파일 후 자바스키립트로 브라우저가 읽고 화면에 렌더링한다.
- 리엑트에서는 DOM과 다르게 CSS,JSX문법만을 가지고 웹어플을 개발할 수 있다. JSX를 사용하면 자바스크립트만으로 마크업형태의 코드를 작성하여 DOM에 배치할 수 있다.
JSX의 규칙
- 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야한다.
- 엘리먼트 클래스 사용 시 className으로 표기
- 사용자 정의 컴포넌트는 대문자로 시작
- 조건부 렌더링에는 삼항연산자 사용 (if문 X)
- 리엑트에서 여러 개의 HTML엘리먼트를 표시할 때는 map()함수를 사용
!! Map함수를 사용할 때는 key를 JSX속성에 넣어야한다.
Key속성의 위치는 map매서드 내부에 있는 엘리먼트 즉 첫 엘리먼트에 넣어야한다. Key는 배열 안의 객체를 추가하거나 삭제할 때 필요하다.
Component
- 하나의 기능 구현을 위한 여러 종류의 코드 묶음
- UI를 구성하는 필수요소
- 리엑트는 컴포넌트들의 관계를 트리 구조로 형상화하여 표현가능
** Create React App
리액트 SPA 를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
=> npx create-react-app 폴더이름
React SPA (single page application)
- HTML문서 전체가 아니라 업데이트에 필요한 데이터만을 받아와 자바스크립트가 이 데이터를 조작하여 HTML요소를 생성하여 화면에 보여주는 방식
- 서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹어플리케이션이나 웹사이트
< 장점 >
- 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 상호작용에서 빠르게 반응한다.
- 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어든다.
- 전체 페이지를 렌더링할 필요가 없기 때문에 더 나은 UX를 제공한다.
< 단점 >
- SPA의 경우 자바스크립트의 파일의 크기가 크다. 때문에 이 자바스크립트파일을 기다리는 시간으로 인해 첫 로딩화면시간이 길어진다.
- 검색 엔진 최적화가 좋지 않다. (사라지고 있는 추세)
Wireframe
- 웹페이지의 레이아웃과 UI요소 등에 대한 뼈대
=/ Mockup = 데모 시연, 평가를 위한 최소한의 기능만 담은 모형
React Router
라우터 역할 = BrowserRouter
경로매칭 = Routes, Route
경로변경 = Link
// 컴포넌트들을 사용하기 위해서는 React Router라이브러리에서 따로 불러와야 한다.
React Router 사용환경세팅
1. React-router 라이브러리 설치
- React App설치 후 npx create-react-app ..
- npm install react-router-dom@^6.3.0 (^ 삭제)
- App.js 로 react-router 컴포넌트 꺼내오기
(import {BrowserRouter, Routes, Route, Link} from "react-router-dom"
프론트엔드 개발자 일기