Simple React Shopping Mall 만들기(2)
Prerequisites
Simple React Shopping Mall 만들기(1)
Component 생성
Component들을 생성할 때는, 하나의 폴더를 생성하고 그 안에 js파일, css파일을 생성하여 진행하도록 한다.
- src
`- components/
- App/
- Nav/ // 네비게이션 역할
- Nav.js
- Nav.css
- Cart/ // 장바구니 역할
- Cart.js
- Cart.css - Main/ // 전체 제품 rendering
- Main.js
- Main.css
- Item/ // 제품별 rendering
- Item.js
- Item.css
전체 구조를 위와 같이 잡는다. 우선 간단한 Nav Component를 만들도록 한다.
보다시피 별다른 기능이 없이 Routing 기능만을 구현한 Navigation이다. 각각의 코드를 살펴보도록 하겠다.
1 line: React의 Component를 생성하기 위해서는 우선 React Library를 불러온다.
2 line: React-Router에서 Routing기능을 생성하기 위해, React-Router의 내장 Component인 Link Component를 불러온다. 물론 a tag로도 Routing 이동을 할 수 있다. 하지만, Link를 사용하면 a태그 사용시 전체 페이지의 reloading을 막을 수 있게 된다.
5 line: es6의 형태로 작성된 stateless functional component, 혹은 dumb component라고 한다. Class Component처럼 render함수, Javascript의 this등을 사용하지 않고 좀 더 간단히 작성할 수 있다. 이름 그대로 함수형태로 Component를 생성하는 것이며, state나 lifecycle method가 필요없을 경우에 사용한다. 좀 더 자세한 내용은 차후 기회가 있으면 작성하도록 하겠다.
8, 9 line: to코드 이후, 이동을 원하는 url을 작성하면 된다.이렇게 만든 Navigation을 실제로 사용하기 위해서는, App.js 파일에서 이를 불러와야 한다.
2 line: Switch와 Route 내장 Component를 불러온다. Switch로 Component를 감싸게 되면 처음 매칭되는 Component만을 렌더링하게 된다. Route는 임의의 url로 이동할 경우 어떤 Component를 렌더링할지 정해준다.
3,4,5line: 렌더링하기 원하는 Component를 불러온다. NODE_PATH를 지정하였기 때문에 절대경로로 import 하였다.
14, 15 line: path로 원하는 url, 그리고 렌더링 하길 원하는 Component를 지정한다. exact는, 정확한 url을 입력해야만 렌더링을 하게 된다.7번째 줄을 보면, array형태로 component를 작성한 것을 볼 수 있다. 본래 component는 하나의 element(예를 들어 div)로 묶인 것만을 렌더링 할 수 있다. 만약 다수의 component를 렌더링 하기 원할 경우, 이처럼 array형태로 구성을 하면 된다.
Dummy Data 생성
실제로는 Server에서 데이터를 받아와야하나, Front 작업만으로 Project를 진행할 때는 사실상 불가능하다. 이럴 경우 Dummy Data를 임의로 생성해서 진행하면 된다.
해당 site에서는 여러가지 형태(JSON, SQL 등)으로 dummy를 제작하게 도와준다. JSON으로 생성된 dummy data를 root폴더에 놓아준다.
dummy data를 포함한 지금까지의 결과물을 보고 싶을 경우, 아래 명령어들을 실행하면 된다.
git clone https://github.com/Joe1220/project.git
cd project
git reset --hard d945a1ea80675eb493e41c9b1ef2e193f808e10adummy data를 불러오기 위해서는 기존에 있던 App.js 파일을 수정해야 한다.
App.js 파일에서 dummy data파일을 불러오는 이유는 App.js을 최상단 component로 잡고 state를 결정, 다른 Component에게 props를 주고자 함이다. dummy data를 불러온 App.js의 코드는 다음과 같다.
기존 App.js 파일에서 많은 부분이 바뀌었다.
7 line: dummy data를 불러오고 있다. 이 때 data라는 이름으로 import 하였는데, 이 이름은 다른 이름, 즉 potato라고 변경하여도 작동한다.
9 line: component를 dumb component에서 class component로 변경하였다. state를 다루기 위해서는 class 형태의 component가 필요하다. constructor(생성자)안에서 state를 지정할 수 있다.
12 line: dummy data를 App.js의 state로 지정하였다.
17 line: componentDidMount는 React의 life cycle과 관련있는 Method이다. 간략하게 설명하면 App Component가 실행될 때 어떠한 기능을 실행할지 정하는 것이다. 이 부분 역시 밑에 부분에서 자세히 다루도록 하겠다. 이곳에선 console.log()를 통해 dummy data를 제대로 불러왔는지 확인하는 용도로 사용하였다.
23 line: 기존 Routes Component에서 switch를 다시 div element로 감쌌다. 이유는 Nav Component는 항상 routing 되지 않고 항상 고정시키기 위함이다.state의 초기 값을 설정 할 때는 constructor(생성자) 메소드에서 this.state= { } 를 통하여 설정하도록 한다.
React Life Cycle
React의 Component들은 위 사진처럼 4단계의 Life Cycle(생명주기)를 가지게 된다. 각 Life Cycle와 주로 사용되는 Method를 설명하도록 하겠다.
- Initilization: 이 단계에서 component는 초기 상태설정을 하게 된다. 초기 state와 default props를 준비하는 단계.
- Mounting: 기본 준비단계이후, browser DOM에서 실행되는 단계이다. 이 단계를 세분화하여 설명하자면
- componentWillMount: React Component가 Dom에 mounting 되기 직전에 실행되는 메소드이다. 이 method이후 Component는 mounting(실행) 된다. 실행되기 이전에 정의하고 싶은 기능을 이 Method에 정의하면 된다.
- render : broswer상에서 실제로 Component를 렌더링합니다.
- componentDidMount: Component가 dom에 마운트 된 후 실행되는 Method이다. 이 메서드에서는 구성 요소의 수명주기와 첫 번째 렌더링 후에 한 번 실행된다.
3. Updation: 이 단계는 state의 변경 같은 반응 구성 요소가 Browser에서 생성되어 새로운 업데이트를 수신하여 업데이트 될 때 실행된다.
- componentWillReceiveProps(nexProps): props가 새로 변경이 될 때에 실행되는 Method이다. 이 안에서는 nextProps라는 매개변수가 사용 가용하여 기존의 props와 비교가능한 기능을 작성할 수 있다.
- componentWillUpdate: shouldComponentUpdate가 true를 반환 한 후에 만 실행된다. 이 메서드는 componentWillMount 또는 생성자와 비슷한 다가올 렌더링을 준비하는 데 사용된다.
4. Unmounting: 이 단계에서는 구성 요소가 필요하지 않게 되면 Component가 DOM에서 제거되는 단계이다.
다음 블로그에서는 state와 props를 이용하여 제품 rendering, 그리고 장바구니 기능을 구현하도록 하겠다.
Simple React Shopping Mall 만들기(3)
.
