[ 코딩애플 ] React 리액트 기초부터 쇼핑몰 프로젝트까지! part.2

안영우·2020년 12월 14일
React코딩애플

[ 코딩애플 ]

목록 보기
3/5
post-thumbnail

✏️ 서론

part.1: 블로그 제작 & 기초문법 까지 React의 기본적인 사용방법들을 알아왔다면,
part.2 쇼핑몰 프로젝트에서는 React를 이용해 쇼핑몰을 만드는 간단한 프로젝트를 만들어본다.

part.2를 완강하는데 시간이 조금 걸렸지만, React의 활용성에 알아볼 수 있어서 좋았다. part.3까지 듣고나면 나만의 프로젝트로 만들어 이전 프로젝트였던 지금 뉴스!보다 더 예쁘게 꾸며보거나, 간단한 쇼핑몰을 구현해보고싶다.

강의 중간에 JavaScript, React 문법을 공부하고 싶어 JS에서 자주 쓰이는 배열 함수 10가지, npm, npx 차이점 등등을 공부했다. 도움이 많이 되었다.

이번 수업도 CSS의 늪에서 벗어나기위해 BootStrap 라이브러리를 사용해서 만들었다.
(CSS는 너무 어렵다)
BootStrap을 이용하면 메뉴, 버튼, 3분할 레이아웃등 원하는 UI들을 쉽게 생성할 수 있다.

BootStrap은 원조라이브러리고,
React 환경에서 사용하려면 React bootStrap을 설치해야한다. 이점, 참고하자

react bootstrap 설치는 다음 코드만 작성하면 된다.

  1. terminal - npm install react-bootstrap bootstrap
  2. index.html 파일의 <head> 태그 안에 복붙하자.
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"/>
  3. app.js 상단에 import { Navbar, Nav, NavDropdown, Button, Jumbotron } from 'react-bootstrap'; 을 꼭 붙여주자.

✏️ 본론

📍 쇼핑몰 Layout 설정

bootstrap을 이용해 navbar, Jumbotron을 만들어보자.
해당 기능은 이전 프로젝트 만들때에도 사용했기때문에 비교적 쉽게 만들 수 있었다.

다만, Jumbotron background image를 첨부하려는데 적용이 안돼서 애를 먹었다.

결론적으로, react 17버전이상에서는 public 폴더안의 이미지를 CSS파일에서 /image.jpg 같이 첨부 할 수 없다.

대신,src 폴더에 image를 넣어두고 다음과 같은 코드를 작성하면 된다. 

.background{
  background-image: url(./background.jpg);
}

다음은 상품 레이아웃을 만들어 보자.
레이아웃은 bootstrap grid를 이용하는데,
IE+11 이상 환경에서만 동작하니 참고하자.

BootStrap layout 에서 더 많은 grid를 지원하고 있다.
float, flex 어떤것을 사용할지 고민중이라면 당장 사용하자.

자신이 설정하고 싶은 grid를 선택하면되는데,
나는 design을 잘 몰라서 보통 개발자들이 많이 선택하는 col-md-4를 선택했다.

col-4: PC환경

col-md-4: PC + mobile 환경

크기를 줄이면 자동으로 grid도 조정되는것을 확인 할 수 있다.

📍 import / export 사용하기

Component를 다른 Component에서 선언할때 import / export를 선언한다.
예를 들어, 새로만든 Component가 data.js 파일이면, 하단과 같이 설정하면 된다.

// data.js
let name = 'Kim';

export default name;

----------------------

// app.js
//경로를 적을때는 `./` 사용
import name from './data.js';

{ 변수 }

// 변수가 2개 이상일때
// data.js
let name1 = 'An';
let name2 = 'Jung';
export { name1, name2 }

// 메인페이지
import { name1, name2 } from './data.js'
  1. export default name 은 data.js 맨 마지막 코드에 작성하고 default로 설정했으므로 app.js에서는 내가 원하는 변수로 네이밍(naming)이 가능하다.
  2. 파일 1개당 1번만 선언 가능하다.
  3. app.js에 import { 변수명 } from './data.s'를 명시하자.

📍 [ 예제 1 ] 해당 코드를 app.js 파일에 import 하시오.

let Data = 
[
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },

  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000
  },

  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000
  }
]

해당 파일을 import하려면 Data 폴더에 export 선언을 해줘야한다.
이후, app.js 폴더에 import 선언을 하자.

// data.js
export default Data;

----------------------
// App.js
import shoesData from './data.js'
let [shoes, shoes변경] = useState(Data);

이런식으로 Data를 useState에 담아서 변수로 사용가능하다.

💡 ESlint-disable

ESlint는 JavaScript, JSX의 오픈소스 프로젝트이다.
내가 작성한 코드에서 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다.
ESlint는 커스터마이징이 쉽고 확장성이 뛰어나 많이 쓰이고 있는 추세다.

대표적으로 Airbnb Style Guide, Google Style Guide가 있다.

상단과 같은 warning창이 보기 싫은 개발자분들은
App.js 파일 상단에 /* eslint-disable */을 입력하면 된다.

출처: https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/

📍 props

props는 상위(부모) Component에서 하위(자식) Component로 데이터를 전송할때 사용하는 기능이다.

props 사용 방법은 2가지만 지키면된다.

상위 Component: < 컴포넌트이름 props 이름 = '값' >
하위 Component: function Card(props)에 props 작성하기

// 상위 Component
<div className="row">
   {
    shoes.map(function (n, i) {
      return (
        <Card shoes={shoes[i]} i={i} key={i} />
        )
      })
  }
</div>

// 하위 Component
function Card(props) {
  return (
    <div className="col-md-4">
      <img src={'https://codingapple1.github.io/shop/shoes' + [props.i + 1] + '.jpg'} width="100%" />
      <h3> {props.shoes['title']} </h3>
      <p> {props.shoes['content']} & {props.shoes['price']}</p>
    </div>
  )
}

📍 [ 예제 2 ] 각각의 Card 컴포넌트마다 다른 데이터를 전송해보세요.

다른 데이터를 전송하면 다른 상품명, 가격, 상세 내용을 넣을 수 있으니까 필요하다.
각각의 Card에 {shoes[0]}, {shoes[1]}, {shoes[2]} 이런 식으로 전송하면 된다.

Card 컴포넌트에 작성했던 Data-binding 방법을 바꾸면 된다.
위에서 shoes[0] 데이터를 shoes라는 이름으로 props로 전송했기 때문에, props.shoes[0].['title'] 이 아니라 props.shoes['title'] 이렇게 쓰면 제목 등이 정상적으로 출력된다.

예제 1을 풀면서 느낀점은

  1. 같은 컴포턴트라고 항상 같은 내용만 보여주는게 아니다.
  2. props 등을 이용해 각각 다른 내용을 전송 할 수 있다.
  3. 같은 Component를 이용하여 각각 다른 내용이 출력되는 Component를 만들 수 있다.

📍 [ 예제 3 ] Card 컴포넌트를 반복문을 이용하여 구현하세요.

똑같은 기능을 구현하더라도 더 짧은 코드로 구현한다면, 얼마나 효율적인가 🧐 🧐
진정한개발자는 반복되는 코드를 봤을 때 반복문을 돌리고 싶어 안달나 있어야 한다고 생각한다.

반복문은 데이터 갯수만큼 HTML을 보여 줄 수 있기때문에 꼭 필요하다.
만약, shoes라는 data가 항상 3개로 고정되어있다면, 굳이 사용하지 않아도 되지만, data가 매번 달라질때 반복문을 사용하게 된다면 유지보수할 소요가 줄어들기 때문이다.

map 함수를 사용하여 반복문을 작성할 때 key = { 변수 } 값을 꼭 넣어줘야 Warning이 뜨지 않는다.

나름 반복문으로 줄인다고 생각했는데 그게 쉽지 않았다.
계속 연습하며 감을 익혀야겠다.

// 상위 Component
<div className="row">
   {
    shoes.map(function (n, i) {
      return (
        <Card shoes={shoes[i]} i={i} key={i} />
        )
      })
  }
</div>

📍 [ 예제 4 ] 상품 이미지를 데이터바인딩해보세요.

예제 2, 3번보다 개인적으로 이 문제를 빨리 풀었다.
상품 src 에서 [1], [2], [3]... 이런식으로 1씩 더해서 증가시키면 금방 풀 수 있었다.
상품 이미지가 1부터 시작되기때문에 i + 1 값을 줬다.

<img src={'https://codingapple1.github.io/shop/shoes' + [props.i + 1] + '.jpg'} width="100%" />

✏️ 결론

지금까지 간단한 data를 이용해서 반복문, data-binding, props 등을 이용해 쇼핑몰의 전체적인 Layout을 꾸며보았다.

React를 사용하면 할 수록 점점 흥미가 붙는걸 몸소 느끼고있는데,
React가 확실히 쌩 JavaScript를 사용할때보다 더 편하고 효율적이라는 생각이 든다.

React의 고수가 되기위해 더 노력해야겠다.

다음시간에는 react-router-dom을 이용해 router, switch, Link를 배워 연결 페이지를 만들어보는 시간을 가져보자.

profile
안영우
YW_Tech
이전 포스트

[ 코딩애플 ] React 리액트 기초부터 쇼핑몰 프로젝트까지! part.1 (두번째이야기)

다음 포스트

[ 코딩애플 ] React 리액트 기초부터 쇼핑몰 프로젝트까지! part.2 - 1

0개의 댓글