[JS][REACT] 리액트 정리 2

리액트 스타일링

 

1. CSS Import

- CSS 파일을 import 해서 사용

- 자바스크립트 파일과 코드 분리

- CSS파일만을 사용해서 편리

- 컴포넌트가 적으면 하나의 CSS파일로 코드를 관리하는 것도 가능

- CSS파일은 분리할 수 있으나 namespace를 나눌 수 없음

- 스타일이 겹칠경우 cascading rule에 따라 적용

 

2. CSS module

- 하나의 CSS module 파일 안에 작성한 스타일을 하나의 파일 namespace로 관리

- className 뒤에 겹치지 않는 hash 작성으로 스타일이 겹치는 상황 해결

 

3. CSS - in - js

- 별도의 CSS파일을 만들지 않고 하나의 컴포넌트 파일 안에서 스타일을 작성

- 자바스크립트 문법을 그대로 활용해서 코드를 작성

- REACT 컴포넌트를 사용하는 것처럼 사용 , Sass 문법 활용 가능

 

styled-component

- 자바스크립트 파일 안에 스타일을 정의하고 컴포넌트처럼 사용

- 자바스크립트 코드와 긴밀히 연계하여 다양한 코드를 작성

- tagged template literal 문법 사용, 클래스 이름 자체가 hash

 

SPA 와 라우팅

- SPA(single page application) : 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식

- MPA(multi page application) : 서버에 여러 페이지를 두고 적합한 페이지를 전달하는 방식

- 클라이언트 사이드 라우팅으로 페이지 진입시 리로드 없이 라우팅

- ajax를 사용해서 페이지 이동 시 서버에 데이터만 요청해서 js로 페이지를 만듬

- 페이지간 스타일 , 컴포넌트를 재활용하는 방향으로 구현

- 매번 페이지 요청이 없어서 네트워크 요청이 줄어들고 , 데이터 요청 재사용 가능

- 코드가 많아질수록 로드 속도가 느려짐.

- 주로 history api, url hash를 이용해서 리로드없는 페이지 전환을 구현

 

React-Router

- 리액트에서 jsx를 이용하거나 history api를 사용해서 라우팅을 구현

- 웹에서는 react-router-dom 사용

- route로 path를 정의하고, 그 안에 렌더링하고자 하는 컴포넌트를 넣음

- link로 특정 페이지로 이동시 리로드 없이 페이지가 이동

- switch로 매칭되는 라우트 하나를 렌더링하게 함

 

BrowserRouter

- history api를 사용해서 ui와 api의 싱크를 맞추는 역할

 

Switch

- 여러 route중 매치되는 route 위에서부터 하나 선택하여 렌더링

- 매칭되는 route가 없으면 아무것도 보여주지 않음

- path='/'의 경우 모든 path에 매칭되므로 맨 아래로 낼거나 exact 키워드 추가

 

Route

- path와 컴포넌트 매칭

- 매칭되는 컴포넌트는 children으로 넣어주거나 prop으로 넘김

- exact 키워드로 정확하게 매칭하는 path를 설정

- render prop으로 매칭되었을 때 실제 어떤 컴포넌트를 렌더링할지 통제함

 

Redirect

- link와 비슷하나 렌더링되면 to prop을 받아 지정한 path로 이동

- switch 안에서 쓰일 경우 from, to를 받아 이동하게 만듬

 

Link, NavLink

- to prop을 특정 URL 로 받아 클릭시 네비게이션

 

Private Route 만들기

- 특정 조건이 충족되지 않았을 때 , 다른 페이지로 Redirect 하도록 하는 기능

- 상세 페이지 , 개인정보 변경 페이지 등을 만들 때 사용됨