22.06.03_TIL

📌 React에서 핵심 기능이라고 생각되는 Single Page Appliacion을 학습하는 날이다. 중요하니까 꼭 기억하도록 하자!

 

 

📗 오늘 학습한 내용

React

• SPA(Single Page Application)
  • 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식
• SPA 장점
  • 사용자와의 상호작용이 빠르게 반응한다.
  • 필요한 데이터만 서버에서 전달받기 때문에 서버 과부화 문제가 해결된다.
  • 더 나은 유저의 사용환경을 제공한다.
• SPA 단점
  • JS 파일의 크기가 크다.
  • JS 파일을 기다리는 시간으로 처음 로딩하는 시간이 길다.
  • 검색 엔진 최적화(SEO)가 좋지 않다.

와이어 프레임

• 웹 페이지의 레이아웃과 UI 요소들에 대한 뼈대
• 순서:
  • 컴포넌트 구성 → 설계로직 → 컴포넌트의 내용 구성

React Routing

• 하나의 페이지를 가지고 있지만 한 종류의 화면만 사용하지 않는다.
• Routiong: 주소에 따라 다른 뷰를 보여주는 과정

React Rout 라이브러리

• BrowserRouter(Router)
  • 브라우저의 주소를 감지한다.
• Routes(Rout matchers)
  • 여러 Route를 감싸서 하나만 렌더링 한다.
• Route(Rout matchers)
  • 랜더링 할 컴포넌트의 이름 및 경로를 지정한다. 
  • path: 경로
  • element: 컴포넌트
• Link(ROute changers)
  • a태그와 기능은 비슷하나 새로고침을 하지 않고 URL만 변경한다.
• useNavigate
  • 특정 이벤트가 발생했을 때, URL을 조작할 수 있는 인터페이스를 제공한다.

React Rout 라이브러리 설치

• npm install react-router-dom@^6.3.0
• import {BrowserRouter, Routes, Route, Link} from "react-router-dom"

 

 

📘 추가로 공부할 내용

React

• 노마드 코더 React 영화 웹 클론(진행중)
• State
• Props

 

 

📝 오늘 느낀 점 & 마음 가짐

• 다음주는 State, Props를 공부하는데 어렵다고 흔들리지 말자!