react-router-dom URL parameter

URL parameter react-router-dom URL parameter를 이용하면 URL에 입력한 파라미터 값을 가져올 수 있다. 상품페이지 3개를 만든다고 생각해보자. 아래와 같이 Route를 3개 만드는 방법을 쓸 수 있다. 하지만 상품이 100만개라면..? URL parameter 문법을 사용하자! 링크걸기 페이지를 여러개 만들고 싶으면 URL parameter 문법을 사용할 수 있다. path 작명할 때 /:작명 이렇게 사용하면 /detail/작명 으로 접속했을때 해당 컴포넌트를 보여준다. URL parameter 가져오기 (참고) path 작명시 url 파라미터는 몇번이고 사용가능합니다. detail/:어쩌구/:저쩌구 가능 // 주소/detail/3 으로 접속한 경우 import { u..

2022.11.11

react router dom

/detail 로 접속하면 상세페이지를, /cart 로 접속하면 장바구니 페이지를 보여주자. 1. React에서 페이지를 나누는 방법 1. 컴포넌트를 만들어서 상세페이지 내용을 만든다. 2. /detail 로 접속하면 그 컴포넌트를 보여준다. 3. React-router-dom 라이브러리로 쉽게 구현할 수 있다. 2. React-router-dom 설치 https://v5.reactrouter.com/web/guides/quick-start 해당 사이트에서 제공하는 문서를 보고 설치하자. 찾기가 어렵다 npm install react-router-dom npm install react-router-dom@6 3. 셋팅하기 src/index.js 파일로 가서 로 을 감싸면 된다. // src/index.j..

2022.11.11

public, src 이미지 사용 시 경로, 사용법

React 에서 이미지 파일 사용하기 JSX에서 src폴더 내의 이미지를 사용하려면 상단에서 미리 import 해야 한다. public 폴더 내의 자료들은 절대경로로 자유롭게 사용할 수 있다. CSS 내에서 사용할때는 기존처럼 JSX 안에서 src 폴더의 이미지 사용 미리 import 해야 한다 import bg from './bg.png' function App () { return ( ) } JSX 안에서 public 폴더의 이미지 사용 절대 경로로 사용한다. 권장방법 하지만 아래와 같은 방식이 권장된다. 왜냐하면 배포 시 root가 아닌 특정 폴더 내에 배포할 경우 경로에 문제가 발생할 수 있다.

2022.11.11

react Bootstrap

React-Bootstrap 라이브러리 https://react-bootstrap.github.io/ React-Bootstrap을 사용하면 HTML CSS로 직접 디자인하지 않고, 예제코드를 복사/붙여넣기 하여 레이아웃을 쉽게 생성할 수 있다. 설치 1. npm 명령어 각종 라이브러리들은 해당 라이브러리 공식 홈페이지에서 사용방법을 보고 설치하면 된다. https://react-bootstrap.github.io/getting-started/introduction 위 사이트에서 제공하는 방법대로 터미널을 열고, 경로 확인 후 명령어를 입력한다. 명령어는 바뀔 수 있으니 사용할 때마다 사이트에 들어가서 확인하도록 하자. npm install react-bootstrap bootstrap 설치 2. 추가 ..

2022.11.11

build & GitHub Pages로 배포

build는 왜해? 우리가 만든 react 프로젝트를 웹에 배포하려면 build용 파일을 생성 후 그걸 웹에 올려야 한다. 왜냐면, 브라우저는 HTML, CSS, JS 3개의 언어만 해석할 수 있다. 리액트의 이상한 state, JSX 같은 문법은 해석할 수 없다. 그래서 react 프로젝트 build라는걸 하게 되면 브라우저 친화적인 HTML, CSS, JS파일로 바꿔준다. 이것을 컴파일 또는 build라고 한다. GitHub Pages 배포를 위해 GitHub 계정을 만들도록 하자! 배포하기 전 체크사항 1. npm start 로 미리보기 시 콘솔창, 터미널에 에러가 있으면 안된다. 2. 경로문제 사이트를 배포할 때 http://sitename.com/에 에 배포하는 경우엔 따로 설정이 필요하지 않지..

2022.11.11

Component 만드는 또 다른 문법 class

Component 만드는 또 다른 문법 class 현재는 컴포넌트를 만들 때 function을 사용하지만 예전에는 class문법도 사용했다. 그냥 알아두자 1. class 에 component 이름을 작명한다. 2. constructor, super, render 함수 3개를 채워 넣는다. (기본 템플릿 같은 것) 3. render return () 안에 JSX를 작성한다. class Modal extends React.Component { constructor(){ super() } render(){ return ( Class문법이다 ) } } class가 뭔가요? class는 변수, 함수를 보관하는 장소다. extends는 기존 class안에 있던 변수, 함수를 복사해주는 문법이다. React.Com..

2022.11.11