.jpg)
Photo by Susan Wilkinson on Unsplash
설치
node.js 설치 후 vscode 터미널에서 프로젝트를 만들 폴더 (react-insiders-app) 으로 이동 후
npx create-react-app을 입력
-
노드js환경에서 개발하는 이유
리액트 프로젝트에서 같이 쓰는 웹팩과 바벨같은 도구들이 node.js를 사용하기 때문 -
npx
npm 레지스트리에 있는 패키지를 프로젝트 폴더에 설치해줌
react 폴더 구조
기본 폴더 구조
-
이름 수정하면 안되는 파일
public/index.html페이지 템플릿 파일
src/index.js자바스크립트 시작점 -
/public
이곳의 파일들은 index.html 에서만 사용가능 -
/src
js,css 등 소스파일, webpack 번들러가 묶는 폴더, 이외의 것은 webpack이 처리안함
React코드는 여기서 대부분 여기서 작성 -
package.json
프로젝트 정보, 앱 시작/빌드/테스트 시 스크립트 명시
"name" 프로젝트이름 "version"프로젝트버전 "private"뭔지모름
"dependencies" 의존(필요한)라이브러리:버전
"scripts" 상황별 스크립트모음. 여기다 써놓으면 scripts안의 키값을 데려다가 npm react-scripts start 이렇게 하면 사용가능
"eslintConfig" eslint 문법,코드포멧 체크
쇼핑 앱 구조로 만들기
앞으로 만들 쇼핑몰 앱에 맞춰서
/src 폴더에 components css images pages 폴더를 새로만들어줬다.
components 여러 군데에서 사용되는 컴포넌트를 모아두는 곳
css css모음 images 이미지모음 pages 홈페이지 내 각종 페이지 모음
App.js 라우팅 관련 일을 함 (페이지에서 페이지로 이동할 때)
React router DOM
페이지를 이동할때 필요한 라이브러리
react의 페이지 교체 방식
-
옛날 페이지 교체 방식
여러개의 페이지를 준비해두고 다른 내용을 보여주고 싶을때 다른 html문서를 불러온다
(Multi Page Application)
index.html->login.html -
react 페이지 교체 방식
폴더를 보면/public/index.html하나밖에 없다.
전체페이지를 하나에 담아 필요한 것만 교체해서 돌려가며 사용하는 방식
SPA (Single Page Application)
웹사이트의 전체페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 방식
어떻게 표현하는가? History API
- JS영역에서 HTML5 History API를 이용해 페이지가 교체되는것처럼 보여준다.
MDN docs | History API
DOM의 Window 객체는 history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공합니다. history는 사용자를 자신의 방문 기록 앞과 뒤로 보내고 기록 스택의 콘텐츠도 조작할 수 있는, 유용한 메서드와 속성을 가집니다
history.back()사용자가 뒤로가기 버튼을 누른것과 같은 효과
history.forward()사용자가 앞으로가기 버튼을 누른것과 같은 효과
history.go()현재 페이지 기준으로 상대적 거리에 있는 페이지로 이동 가능
history.go(-1)뒤로 1페이지history.go(1)앞으로 1페이지
history.go()history.go(0)둘다 새로고침
window.history로 접근가능window.history.length로 방문기록 스택크기 측정가능
hisrory.pushState()세션기록 스택에 데이터넣기, 직렬화가능한 모든 JS객체를 넣을 수 있음
histroy.replaceState()최근세션기록 스택을 주어진 데이터로 교체
이런것들을 쉽게 해주는게 React Router DOM 라이브러리다.
react router 공식 예제코드 살펴보기
출처 reactrouter.com
React Router v6 docs - reactrouter.com
React Router v6 basic example - stackblitz.com
베이직 예제코드 사이트로 들어가보면 이렇게 뜬다.
리액트 코드를 구동시켜 볼 수 있다.
from "react-router-dom" react-router-dom 에서 가져온 함수인
Routes Route Outlet Link 등을 이용하여 라우팅(페이지이동)을 한다.
아래쪽에 함수 Home() About() Dashboard() NoMatch() 이 오른쪽 Home About Dashboard Nothing Here 페이지 내용을 표시해준다,
안의 내용을 바꿔보면 페이지 링크를 클릭할때마다 그대로 출력된다.
/src/main.tsx 에서 10줄의 <BrowserRouter> 라는 부분이 이런 페이지이동을 제어한다.
다시 App.tsx 로 이동해서 20줄 부터 보면 <Routes>와 <Route>가 있다.
<Route path="about" element={<About />} />
path="about" about이란 곳으로 이동할때 element={<About />} /> About이라는 컴포넌트를 보여달라는 뜻. About이라는 컴포넌트는 위에서 보여준 About()부분을 얘기하는 것
:29 줄 <Route path="*" element={<NoMatch />} />
path="*" 위의 주소(/,index,about,dashboard)를 제외한 나머지 주소 일때 (페이지를 찾을 수 없을때) NoMatch라는 컴포넌트를 보여준다.
BrowserRouter History API를 사용해 URL과 UI를 동기화하는 라우터
Routes Route에 매치되는 첫번째 컴포넌트 렌더링
Route 컴포넌트 속성에 설정된 URL과 현재경로가 일치 시 해당 컴포넌트를 렌더링
Link a태그와 비슷 to속성에 설정된 링크로 이동, 기록이 history객체에 저장됨
React Router 설치
npm으로 react-router-dom 설치
npm install react-router-dom --save
--save 명령어를 써야 package.json 의 "dependency" 부분에 추가해줄 수 있다.
안하게 되면 추가되지 않고 설치만 하게 됨
dependency에 "react-router-dom"이 추가된 것을 볼 수 있음
index.js에 <BrowserRouter> 추가하기
<App /> 컴포넌트를 <BrowserRouter>로 감싸준다. 자동으로 :6줄의 import { BrowserRouter } from 'react-router-dom';코드가 추가된다.
여기서 App컴포넌트는 라우팅 관련 처리를 하는 App.js 파일이다.
App.js 수정하기
return 안의 코드를 모두 삭제하고 react-router-dom basic example를 참고해서 작성한다.
Router로 라우터를 불러온다.<Routes>로 컴포넌트들을 감싸줄 부모요소를 만든다.
이게 아니라.
이것이다. Routes는 route를 감싸준다. <route>가 가지라면 <routes>는 나무다. 현재 위치에서 가장 알맞은 가지(요소)를 렌더링한다.
참고로 이렇게 자동완성시켜야 자동으로 import 코드를 작성해서 가져다준다.
Route도 추가하면 알아서 import에 route도 추가된다.
마찬가지로 베이직 샘플코드를 참고하여
<Route path="/" element= {<LandingPage />}></Route>
로 홈페이지에 접속했을때 (/) 랜딩페이지(LandingPage) 컴포넌트로 연결되도록 설정한다.
/src/pages/LandingPage 에 LandingPage.js를 생성해준다.
LandingPage() 함수 (펑셔널 컴포넌트)를 만들어준다.
그리고 외부에서도 쓸 수 있게 export default LandingPage로 내보내준다.
vscode 익스텐션에서 ES7 React/Redux/GraphQL/React-Native snippets를 설치하면 rfce스니펫으로 간단하게 할 수 있다.
reactFunctionalExportComponet의 약자인걸 알 수 있다.
자동으로 함수이름까지 잡아준다.
이제 App.js로 돌아가서 이 함수형 컴포넌트를 데려와준다.
import LandingPage from './pages/LandingPage/LandingPage'; 로 가져와주는데
import La까지만 쳐도 저렇게 알아서 가져와준다.
라우트를 두개 더 복사해서 로그인 페이지(/login)와 회원가입 페이지(/register)를 만든다.
마찬가지로 각각의 페이지폴더에 login.js register.js 파일을 만들고 펑셔널컴포넌트를 생성하고 export를 해주고, 다시 App.js로 돌아와 import하면 된다.
각각 폴더에 js파일을 만들어준다.
rfce로 만들어주고 간단한 텍스트를 집어넣는다.
컴포넌트를 import해준다.
CSS Framework
CSS 작성시간 단축, 기능구현에 집중하기 위해 사용
- Material UI
- React BootStrap
- Sample io UI
- Ant Design
- Materialize
React BootStrap 설치
npm install react-bootstrap bootstrap@5.1.3 --save
마찬가지로 --save를 붙여줘야 dependency에 부트스트랩 항목을 추가해준다.
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';위 코드로 부트스트랩 요소를 가져올 수 있다.
App.js 혹은 index.js 아무곳에나 넣어도 된다.
앱 구조
예) 리액트를 이용해서 로그인 페이지를 작업 -> 로그인 시 아이디와 비밀번호를 Server에 보냄(요청 request) -> 서버는 아이디와 비밀번호가 DB에 있는지 확인 -> 맞다면 결과값을 클라이언트에 보여줌(응답 response)
서버는와 데이터베이스는 Clayful이라는 서비스를 통해 미리 구축된 걸 사용
