React : 쇼핑몰 프로젝트

SongE·2022년 8월 10일
1

(KDT FE2) Study Note 🧾

목록 보기
10/10
post-thumbnail

Bootstrap 사용하기


  1. react bootstrap 검색 후
    사이트에 있는 설치 명령어를 터미널에서 입력해준다.
    npm install react-bootstrap bootstrap

  2. 1) css, import로 복사해서 App.js에 붙여넣기
    2) css, link로 복사해서 index.html에 붙여넣기

  3. 사이트에서 UI 복사 붙여넣기로 사용가능 * import까지 해줘야 잘 작동됨

이미지 넣는법 & public 폴더 이용하기


  • css 파일에서 src 폴더의 이미지 넣을 땐 ./이미지경로

  • html에서 src 폴더의 이미지 넣을 땐

    • import 작명 from '이미지경로'
    • 그리고 필요한 곳에 작명한거 쓰기
      ex) style = {{ backgroundImage: 'url('+bg+')' }}
  • html에서 public 폴저 이미지 사용할 땐 그냥 /이미지경로

    • 리액트는 사이트 발행 전에 html/js/css 파일을 압축함 (bundling)
      public 폴더에 있던 건 압축 안됨
    • {process.env.PUBLIC_URL+'/이미지경로'} << public 폴더 이미지 쓰는 권장 방식

코드가 길어지면 import export


다른 파일에 있던 자료를 가져오려면 import/export 문법을 쓴다.

export 하려면

export default 변수명

import 하려면

import 작명 from '파일경로'

다른 파일에 있던 변수 가져오기

  1. 변수를 export 하고
  2. import 하면 끝 (변수 쓰는 곳에서)
(data.js 파일)

let a = 10;
export default a;
(App.js 파일)

import a from './data.js';
console.log(a) // 10

export 여러개 하려면

export {변수1, 변수2}
import {변수1, 변수2} from '경로'

참고

함수도 export 가능하다.

리액트 라우터


셋팅과 기본 라우팅


페이지 나누는 법 (리액트 미사용)

  1. html 파일 만들어서 상세페이지 내용 채움
  2. 누가 /경로로 접속하면 html 파일 보내줌

페이지 나누는 법 (리액트 사용)

  1. 컴포넌트 만들에서 상세페이지 내용 채움
  2. 누가 /경로로 접속하면 그 컴포넌트 보여줌

npm install react-router-dom@6

(index.js 파일)

import { BrowserRouter } from "react-router-dom";

root.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>
);

페이지 이동 버튼

<Link>


폴더 구조?

  • 비슷한 파일끼리 폴더로 묶는게 끝이다.

페이지 이동 도와주는 useNavigate()

import { useNavigate } from "react-router-dom";

let navigate = useNavigate();

<Nav.Link
	onClick={() => {
	navigate("/");
	}}
>

404 페이지

<Route path="*" element={<div>404 페이지</div>} />

Nested Routes

  • 장점1: route 작성이 약간 간단해진다.
  • 장점2: nested route 접속시엔 element가 2개 보이게 할 수 있다.
  • 어디에 보여줄지 정하려면 <Outlet></Outlet>
function App() {
	return (
    	<>
        	<Route path="/about" element={<About />}>
          		<Route path="member" element={<div>멤버임</div>}></Route>
          		<Route path="location" element={<div>위치정보임</div>}></Route>
        	</Route>
        </>
 	)
}
        
function About() {
  return (
    <div>
      <h4>회사정보임</h4>
      <Outlet></Outlet>
    </div>
  );
}

nested routes 언제 쓸까?

  • 여러 유사한 페이지가 필요할 때

URL 파라미터로 상세페이지 100개 만들기


페이지 여러개 만들고 싶으면

  • URL 파라미터 사용. (여러개 가능)
<Router path="/detail/:id" />
<Router path="/detail/:id/:param2/:param3" />

유저가 URL 파라미터에 입력한거 가져오려면

  • useParams() 사용.
import { useParams } from "react-router-dom";

let { id } = useParams();

find 함수

배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 값을 즉시 반환한다.
조건을 일치하는 경우가 없다면, undefined를 반환한다.
find(callback(element, index, array)

  • element : 현재 배열의 요소
  • index : 현재 배열 요소의 인덱스 (생략 가능)
  • array : filter 함수를 호출한 배열 (생략 가능)
profile
front-end developer dreamer

0개의 댓글