리액트
프론트앤드 개발을 위한 자바스크립트 오픈소스 라이브러리
한페이지를 보여주기 위해 HTML CSS JAVASCRIPT를 나눠 쓰기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
리액트의 특징
-
선언형
-
컴포넌트 기반
하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함(유지보수에 용이)
-
다양한 곳에서 사용가능한 범용성
JSX란?
React에서 UI를 구성할 때 사용하는 문법으로 JS를 확장한 문법이다.(React Element를 만들 수 있음)
-> 브라우저가 실행할 수 있는 JS코드가 아니기 때문에 브라우저가 이해할 수 있는 JS로 변환해줘야한다. (이 때 사용하는 것이 Babel을 이용하여 트랜스파일링 과정을 진행해준다.)
JSX의 주요 문법 및 특징
-
Component의 children으로 Component 추가 가능
-
className 속성을 사용함(class는 예약어이기 때문)
-
javscript를 중괄호 {}를 사용하여 값을 넣을 수 있다.
-
사용자 정의 component는 파스칼케이스를 사용한다.
-
조건부 렌더링에서는 삼항 연산자를 사용한다.
-
HTML 엘리먼트를 표시할 때, map()함수를 이용한다.(이 때, 반드시 "key" 속성을 넣어야한다.)
예제1)
const posts = [
{ id: 1, title: "Hello World", content: "Welcome to learning React!" },
{ id: 2, title: "Installation", content: "You can install React via npm." },
{ id: 3, title: "Practice", content: "Practice React via npm run start" }
];
export default function Blog() {
const blogs = posts.map((post)=>(
<div key ={post.id}>
<h3>{post.title}</h3>
<p> {post.content}</p>
</div>
));
return (
<div>
<div>
<h3>{posts[0].title}</h3>
<p>{posts[0].content}</p>
</div>
<div>
{/* TODO : 배열 메소드 map을 이용하여 포스트를 화면에 보여주세요. */}
<div className='post-wrapper'>{blogs}</div>
</div>
</div>
);
}
Component ?
“하나의 기능 구현을 위한 여러 종류의 코드 묶음” 혹은 “ UI를 구성하는 필수 요소”
이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다.
Create React App ?
리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인
참고 : https://ko.reactjs.org/docs/create-a-new-react-app.html프로젝트 생성 npx create-react-app [프로젝트명 ]
SPA(Single Page Application)
서버로부터 완전한 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아
그 정보를 기준으로 현재의 페이지를 업데이트함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트(현대에는 사용자가 어플리케이션 사용빈도가 늘어남으로써 트래픽 발생이 커져서 웹 페이지 자체를 다 불러오는 것은 낭비임)
SPA의 장점
- 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 Interaction 에 빠르게 반응
- 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줆
- 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 UX를 제공함
SPA의 단점
- SPA 경우 JavaScript 파일의 크기가 크다. 때문에 이 자바스크립트 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길어진다.(하지만 현재 극복)
- 검색 엔진 최적화(SEO)가 좋지 않다. 구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다. 하지만 SPA 의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못함
REACT Router
화면에 따라 주소가 달라지는데, 주소에 따라 다른 뷰를 보여주는 과정을 라우팅이라고 한다.
React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 많이 사용한다.
-
BrowserRouter : 라우터 역할을 함
-
Routes, Route : 경로를 매칭해주는 역할
-
Link : 경로를 변경하는 역할
사용할 때는 라이브러리를 따로 호출해줘야한다.
Import { BrowserRouter, Routes, Route, Link } from “react-router-dom”;
2일동안 리액트에 대해서 배워보았는데, 예전 프로젝트로 TypeScript와 Angular를 이용한 사이트를 만들어 본 적이 있었는데, 둘다 컴포넌트 기반의 개발이라 비슷한 부분과 차이점이 있었다.
앵귤러는 HTML ,SCSS,TS 따로 구분해서 컴포넌트를 개발했다면, React는 JSX 문법으로 한 페이지로 개발이 가능하다는 점이다. 리액트를 언젠간 한 번은 해봐야겠다는 생각은 있었지만, 잘 실천이 되지 않았는데, 이번 기회로 어떤 구조로 이루어졌는지 이해한 거 같다.
과제로 준 내용에서 좀 더 따로 이것저것 만져볼 예정이다.
List
- Sprint 과제 Advanced 진행
- 따로 조작해서 기능 추가 해보기
