[코딩애플] React 리액트 기초부터 쇼핑몰 프로젝트까지! (3/6)

Part2 : 쇼핑몰 프로젝트

1. 새로운 프로젝트 생성 & Bootstrap 사용하기

 

먼저 프로젝트를 생성해줘야 하므로 폴더를 만들어서 powershell 창을 열고 npx create-react-app으로 리액트 프로젝트를 만들어 줍니다.

npx create-react-app

프로젝트를 vscode로 열어서 필요없는 것들 지워주고 

react bootstrap 라이브러리를 설치해줍니다.

*bootstrap은 레이아웃을 복사붙여넣기식으로 편하게 개발가능한 라이브러리 입니다. 예를들어 버튼같은 것들!

react bootstrap 홈페이지

react bootstrap 홈페이지에서 Get started를 눌러줍니다.

중간에 npx install react-bootstrap bootstrap을 터미널에서 설치해줍니다.

*tip 미리보기를 종료하고 싶을땐 ctrl + c 를 통해 미리보기를 종료하고 위에 npm install react-boorstrap bootstrap 을 입력해줍니다. 라이브러리는 bootstrap 뿐만 아니라 mui 등등이 있습니다.

 

또한 css 파일도 넣어야 하므로 홈페이지에서 찾아서 넣어줍니다(내리다보면 나옵니다!)

위에꺼는 App.js파일에 밑에꺼는 index.html 헤더 안에 넣어주면 됩니다. 저는 밑에꺼를 했습니다.

 

만약 버튼을 쉽게 넣어주고 싶으면 react-bootstrap에서 버튼을 찾아줍니다.

이런식으로 버튼을 복사해서 손쉽게 사용이 가능합니다. 그리고 이 버튼 컴포넌트를 사용하고 싶으면 중간에 버튼 컴포넌트를 import해줘야 합니다.

App.js

실제화면

 

Navbar(상단바)를 추가하고 싶으면 원하는 Navbar를 찾아서 똑같이 추가해주면 됩니다.!

*위에가 지저분하면

이런식으로도 가능합니다! 또한 꼭이대로만 쓰지 않아도 되므로 css로 커스터마이징도 가능합니다!

저는 일단 밑처럼 필요한것만 작성했습니다.

밑에처럼 작성할것입니다.

 

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

대문 사진 추가하기

우선은 대문사진을 넣어 주겠습니다.

코드는 밑에 div 태그를 추가해서 main-bg라는 이름으로 지정해주고 준비한 사진을 src 폴더에 넣어주고 

App.css폴더에 가서 css를 설정해줍니다.

url 안에 계층도는 .은 현재 src폴더를 가르켜서 .을 하면 src/shoe.jpg를 가르킨다는 말입니다. ..은 한칸 밖의 폴더로 나가서 SHOP을 가르키게 되고 ../src/shoe.jpg 로 사진파일을 가르킬 수 있습니다.

 

만약 css 파일에서 하는게 아니라 js파일 안에서 하고 싶으면 이것을 통해 import를 해주고 밑에서 쓰면 됩니다.

 

상품 레이아웃 3개 만들기

부트스트랩 홈페이지에서 Grid를 이용하여 만들어줍니다. 필요한것을 복사 붙여넣기 한다음

필요한 상품 이미지와 설명을 넣어줍니다.

그리고 만약 public 폴더 이미지 사용하고 싶을때는 그냥 / 슬래시 후에 이미지경로를 쓰면됩니다 .ex) /logo192 .jpg 

 

 

3. 코드 길어지면 import export 하면 됩니다

먼저 서버에서 상품데이터 가져와서 집어넣을 것이기 때문에 useState를 통해서 저장해줍니다.

하지만 오른쪽처럼 서버에서 가져올 데이터가 엄청 길기 때문에 data.js처럼 파일을 따로 만들어줍니다.

 

예를들어 let a 라는 변수를 App.js에서 사용하고 싶으면

이렇게 data.js를 만들어서 export default를 통해 내보내고 App.js에서 사용하기 위해서 import를 통해 사용하면 됩니다.

이런식으로 import 작명 from "파일경로" 를 통해서 만들어 줍니다. 그러면 작명 안에 data에서 내보낸 데이터들이 모여있습니다.

 

여러개 변수로 보내주고 싶으면 export{변수1, 변수2} 처럼 해주면 됩니다.

import 를 해줄때는 import{변수1,변수2} from "경로" 형식으로 쓰시면 됩니다.

 

그렇다면 data를 통해서 많은 데이터를 넣어봅시다.

data에 리스트 형식으로 필요한 값들을 넣어주고, import해서 가져온뒤에 useState에 넣어줍니다.

그리고 여기서 가져온 data에 상품명, 내용,가격들을 밑에 서 설정한 html 코드에 넣어봅시다.

 

 

*추가설명 array 자료형 , Object 자료

array자료형

array 자료형을 꺼내 쓸꺼면 a[0] 처럼 뽑아서 쓰면 됩니다.

Object 자료형

Object 자료형을 꺼내 쓰려면 b.name으로 쓰시면 됩니다.

array + Object 자료형

이런식으로 되있다면 그럼 어떻게 써야 할까? (밑에서 설명드리겠습니다.)

이 상품명에 0번 인덱스에 원하는 데이터들을 뽑을것입니다. 그래서 밑처럼 하면 데이터를 잘 뽑아낼 수 있습니다.

 

4. 밑의 Card 부분 중복된 부분 컴포넌트로 만들기

1. 먼저 function을 만들고

2. props를 통해 자식 컴포넌트로 데이터 넘겨주고

 

하지만

이렇게 만들면 3개의 컴포넌트가 똑같다. 그렇다면

이런식으로 보내면 되지만 jpg사진이 똑같으므로

이런식으로 i를 추가하여 props를 통해 보내줄 수 있습니다. 그리고 위의 Card는 같은 애들이므로 map을 통해 반복문을 통해 써봅시다.

이런식으로 할 수 있습니다.

 

5. 리액트 라우터 1 : 셋팅이랑 기본 라우팅

 먼저 react-router-dom 라이브러리를 쓰면 SPA방식의 리액트에서 라우트 시스템을 구축할 수 있습니다.(라우트 시스템 : 사용자가 요청한 링크주소 즉, URL에 맞는 페이지를 찾아서 보여주는것)

 

React-router-dom 설치하기

1. Terminal에 npm install react-router-dom@6 입력하기 

2. npm start 로 시작해보기 -> 오류가 발생하지 않는다면 

3. index.js에 BrowserRouter 넣기

App.js에  react-router-dom import와 Routes로 상세페이지, 어바웃 페이지 입력하기!

 

이렇게 하면

이런식으로 나오게 된다.!

만약 상품목록은 메인페이지에만 보여주고 싶다면 이 밑처럼 작성하시면 됩니다.

그래서 페이지 전체들도 컴포넌트로 만드는 것이 좋습니다. 또한 이용자가 주소를 모르기 때문에 버튼을 클릭하여 이동하게 만들어 봅시다. 페이지 이동버튼은 <Link>로 만들면됩니다.

밑줄이 성가시면 a태그로 작성하면 됩니다!

 

6. 리액트 라우터 2 : navigate, nested routes, outlet

먼저 상세페이지를 작성해봅시다.

상세페이지를 작성한 후 이것을 App.js에서 가져다 쓰려면

import 와

이렇게 Route로 작성해 주시면 됩니다.

 

 

*폴더구조는 비슷한 파일끼리 폴더로 묶으시면 됩니다. ex)일반 컴포넌트들은 컴포넌트폴더에 페이지들은 pages 폴더나 routes 폴더에 묶기!

 

 

오늘은 useNavigate와 Outlet 기능을 배워보겠습니다.

 

 

useNavigate 기능 알아보기

 

useNavigate(); 처럼 함수형으로 되어있는 것들을 훅이라 하는데 유효한 것들이 들어있는 함수라고 생각하시면 됩니다. 

useNavigate는 페이지 이동을 도와주는 함수입니다.!

이런식으로 onClick 이벤트로 함수 실행할 수 있게 해주시면 됩니다.

이렇게 -1로 작성하시면 뒤로가기 버튼이 됩니다.

 

404 페이지 만들기

404 페이지를 만드는 이유는 만약 이용자들이 다른 주소로 잘못 들어갈 수 있기 때문에 만들어 줍니다. (없는 페이지라고 명시해주시기 위해)

이런식으로 작성해 줄 수 있는데 이 *가 뜻하는 것은 이 외에 모든것이란 뜻입니다.

Nested Routes 

about 페이지를 만들어 보겠습니다.

이렇게 하면 간단하게 만들 수 있지만 /about/member , /about/location 페이지도 만들고 싶습니다. 그렇다면 Route를 여러게 만들어 주면 됩니다. 하지만 이런식으로 짜는게 아니라 Nested Routes 문법을 통해 만들어 보겠습니다.

 

이렇게 간단하게 Route태그 안에 member, location을 통해 /detail/member 페이지, location 페이지로 이동이 가능합니다.

 

Nestedroute 장점

1. route 작성이 약간 간단해 집니다.

2. nested route 접속시엔 element 2개나 보여줄수있습니다.

이런식으로 <Detaill>안에 <div>멤버임</div> 를 보여줍니다. nested routes의 element 보여주는 곳은 <Outlet>입니다.!

 

Nested routes을 그럼 언제 쓰냐? 라고 말한다면 여러 유사한 페이지가 필요할 때 사용합니다. route의 또 다른 장점은 페이지 이동이 쉽습니다.

 

7. 리액트 라우터 3 : URL 파라미터로 상세페이지 100개 만들기

먼저 Detail 페이지에서 상품명들이 보여야 하므로 props를 해줍니다.

 

이런식으로 작성하면 상세페이지에 0번에 해당하는 신발의 제목이 나오게 됩니다. 만약 props를 한 것을 하위 컴포넌트에서 useState에 담아서 다시 작성하면 두 군데를 수정해야 하므로 그렇게 쓰지는 않습니다.

이렇게 상세페이지 100개 필요하다면  계속해서 route를 만들 수 없으므로 url parameter를 통해서 간단하게 만들 수 있습니다.

이렇게 detail:id 처럼 : 이걸 사용하시면 됩니다.

하지만 이렇게 작성하면 페이지가 여러개인데 보이는 내용이 같으므로 id 값을 이용해서 id값에 따라 다르게 나오도록 해줘야 합니다.

 

useParams(); 사용하기

이런식으로 Detail.js에 useParans()로 id 를 가져온 뒤 사용할 수 있습니다.

파라미터는 이런식으로 여러개도 사용 가능

 

*응용문제 : 자료의 순서가 변경되면 상세페이지도 고장나는 문제는 어떻게 해결할 수 있을까요?

상품 순서를 가나다순으로 변경하는 버튼을 만들어버렸다고 가정합시다.

그거 누르면 shoes라는 state 안의 상품이 가나다순으로 정렬됩니다. 

그럼 Grey Yordan이 0번 상품이 되겠군요. 

 

그럼 평소엔 /detail/0으로 접속하면 0번째 상품을 보여주니까 White and Black 이 뜰텐데

버튼 누른 후엔 /detail/0으로 접속하면 0번째 상품을 보여주니까 Grey Yordan 이 뜨겠군요.

이처럼 상세페이지가 불규칙해지는 문제는 어떻게 해결하면 좋을까요?

이런식으로 find를 통해서 id랑 일치하는 고유 id를 갖고와서 하시면 됩니다.

 

8. styled-components 쓰면 CSS 파일 없어도 되는데

리액트나 리액트 네이티브를 쓰면  npm install styled-components 라이브러리를 많이 사용하는데 한번 사용해봅시다!

그리고 Detail.js가서 한번 체험해 봅시다.

이것을 사용하는 이유는 예를들어 버튼을 하나 만드려면 버튼 태그 만들어서 className으로 css를 지정해 줘야 하는데 이것이 귀찮다 라는 이유로 사용합니다.

이 styled-components의 장점은 스타일이 다른 js 파일로 오염되지 않습니다. 그리고 App.css 가 아니라 App.module.css로만들면 다른 css랑의 오염을 방지 할 수 있습니다. (App.js) 에 종속  , 그리고 <style><style>로 넣어주기 때문에 페이지 로딩시간이 향상됩니다. 만약 오렌지색 버튼이 필요하다면 ? -props 문법을 쓰면 됩니다.

이건 라이브러리 문법이기 때문에 그냥 쓰시면됩니다. (이해 안해도 됩니다) 

 

단점

1. js파일이 매우 복잡해짐

2. 중복스타일은 컴포넌트간 import 할텐데 css와 다를 바가 없습니다.

3. 협업시 css 담당의 숙련도 이슈

저는 그래서 그냥 따로 module.css 쓰는걸 더 좋아합니다.