03.react 활용

---

초기 react setting 방법

1. yarn package 설치

• 기존 npm 대비 package 설치 속도가 빠르기 때문에 react 에서 package 설치시 yarn 을 사용하는것이 유리 합니다

• Ubuntu 기준 설치 code

$ curl -o- -L https://yarnpkg.com/install.sh | bash

2. react-react-app

• react 에서 필수로 필요한 package 를 하나로 묶어서 설치 합니다

$ npx create-react-app 설치할폴더명

3. react bootstrap

• react 에 맞는 bootstrap 을 설치해서 사용합니다

$ yarn add react-bootstrap bootstrap

• bootstrap 의 모든 기능을 사용하기 위해서 project 에 있는 index.html 에 아래의 code 를 붙여 넣기 해야 됩니다

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>

react-bootstrap

• react 에서 bootstrap 사용할 때는 기존 bootstrap 방식으로도 사용할 수 있으나, react-bootstrap 를 import 해서 component 식으로 사용해야 합니다.

import { Navbar, Container, Nav, NavDropdown, Jumbotron, Button, Row, Col } from 'react-bootstrap'

• 아래의 사이트에서 참고해서 react 상에서 bootstrap 을 사용해야 합니다.

react-bootstrap 자세한 사용법..

react official page

Data binding (with export / import)

export default 문법

// in data.js 파일 

let 중요데이터 = 'Kim';
export default 중요데이터;

// 이 파일에서 중요한 변수를 export하고 싶을 땐 export default라는 문법을 쓰시고 우측에 배출을 원하는 변수를 담아줄 수 있습니다.

// -  변수명, 함수명, 자료형 전부 배출가능합니다.

// -  파일마다 export default 라는 키워드는 하나만 사용가능합니다.

import 문법

// in App.js 파일

import 변수명 from './data.js';

// 이런식으로 중요 데이터를 data.js 에서 가져와서 사용할 수 있음

// - 변수명이라는 부분은 자유롭게 작성 할 수 있음 
// - 경로 쓸때 ./ 라는 것은 현재 경로를 가리킴

Component / Props / Map

// App.js

//  Component 만들기

function Card(props) { // 상위 데이터를 가져오려면 props parameter 해줘야함
  return (
    <div className="col-md-4">
      <img src={ `https://codingapple1.github.io/shop/shoes${props.i+1}.jpg`} alt='' width="100%" /> // src 안에 {} 넣어 주고, props.i 는 0 부터 시작하니까 +1 부터 하는것으로 해주기
      // 밑애 코드는 props.shoes.title 이라고 하면 위에서 가지고 사용함 
      <h4>{props.shoes.title}</h4> 
      <p>{props.shoes.content} & {props.shoes.price}</p>
    </div> 
  )
}

function App () {
  <Container>
  <Row>
    { // map 함수를 사용해서 반복문 사용
      shoes.map((a, i) => {  // a 는 처음부터 하나씩의 data, i 는 index 번호
        return <Card shoes={shoes[i]} i={i} key={i}/> // shoes={a} 를 해도 같은 데이터를 하는것, i={i} 는 props 를 사용하기 위해서 데이터 바인딩 하는것,  key={i} i 인수를 사용하려면 key 값으로 하고 있음 
      })
    }
  </Row>
</Container>
}

FE 개발자로서 react 를 사용하는 이유

• 서버에서 사이트 구성에 필요한 데이터 받아온 후

• HTML 로 보여주는것을 만들어 주는것이 프로트엔드 개발자의 역활임

굳이 반복문을 사용하는 이유?

• 서버에서 가져오는 데이터가 미리 몇개인지, 소수 일경우는 직접 하드코딩해서 코드를 만들 수 있지만, 갑자기 데이터가 추가되면 하드코딩으로 만든것이 동작하지 않기 때문에 그것을 대응 하고자 하면 무조건 반복문을 사용해서 코드를 작성해야 합니다

🔶 🔷 📌 🔑

Reference

• react official page- https://reactjs.org/docs/getting-started.html

• coding apple - https://www.youtube.com/watch?v=LclObYwGj90&list=PLfLgtT94nNq1e6tr4sm2eH6ZZC2jcqGOy