패스트캠퍼스 react 강의 학습후기 8주차

 

리액트 문서의 <고급 안내서> 항목을 참고해 리액트를 조금 디테일하게 공부한다. 

리액트 문서 ▼

https://ko.reactjs.org/docs/accessibility.html

접근성 – React

 

 

페이지 이동을 쉽게 하기 위해 리액트 라우터 돔을 사용할 수 있다. 터미널을 새로 열어 아래 명령어를 입력하면, 리액트 라우터 돔 6버전의 설치가 가능하다.

npm install react-router-dom@6

 

Routes

import {Routes, Route, Link} from 'react-router-dom'
<Routes>
         <Route path="/" element={<div>메인 페이지입니다.</div>}/>
         <Route path="/detail" element={<div>디테일 페이지입니다.</div>}/>
</Routes>

 

<Routes/> 태그 사이에 <Route> 태그를 이용하여 이동할 페이지를 설정할 수 있다. path에는 url 뒤에 붙을 주소를 명시하고, element 사이에 해당 페이지에서 보여줄 컴포넌트를 명시하면 된다. 리액트는 기본적으로 한 개의 App.js를 사용해 모든 페이지를 표시하므로 내부 내용을 갈아끼우는 형식으로 페이지를 빠르게 전환한다. 

 

Nested Routes

Route 안에 Route가 들어간 형식을 Nested Routes라고 한다. 보통 하위의 하위 페이지를 보여줄 때 사용한다.

<Route path='/about' element={<div><About></About></div>}>
         <Route path='location' element={<div>location</div>}> </Route>
</Route>

Nested Routes는 이동한 페이지에서 상위와 하위의 element를 모두 보여준다. 이 때 하위의 element를 어디에서 보이게 할 지 설정해야 하는데, 이는 <Outlet>으로 설정한다. 상위 코드의 경우에는 About 컴포넌트의 내용에 <Outlet>을 포함시켜야 하는 것이다.

 

url 파라미터

<Route path='/detail/:id' element={<Somthing></Somgthing>}/>

여기서 :id를 url 파라미터라고 한다. 파라미터는 일반적으로 비슷한 페이지가 여러개 필요할 때 사용한다. 파라미터는 여러개를 만들 수 도있는데, path의 경로에 /:about/:user 등 자유로운 형식을 추가해 사용하면 된다.

 

 

React Hook

 

React 16.8부터 도입된 리액트 기술로, use가 붙어있는 것들을 리액트 훅이라고 한다. 즉, 함수 형태의 컴포넌트에서 사용되는 리액트 기술들을 hook이라고 부른다. hook에는 대표적으로 useState와 useEffect가 있다.

 

https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

 

style-components

 

css를 사용하지 않아도 되게 해주는 리액트 라이브러리. 아래 명령어를 이용해 설치한다.

npm install styled-components