[React] 코딩애플 blog-part2-1 (import/export/Component화 + 반복문)

yarn을 이용한 새로운 프로젝트 설치

yarn이란?

npm이나 npx를 대체해서 이용할 수 있게 도와주는 라이브러리로 npm보다 속도와 안정성을 자랑한다.

npx create-react-app 실행 시 자동으로 yarn이 구동되어 빨라진다.

npm install ~ 보다 yarn add ~ 라고 사용하시면 더 빠르게 설치할 수 있으며, npm run start를 yarn start로 대체할 수 있다.

React Bootstrap 라이브러리 설치하기

https://react-bootstrap.github.io/

npm install react-bootstrap bootstrap

yarn add react-bootstrap bootstrap

둘중에 하나를 골라 설치해주면 된다.

특정 스타일을 사용할 때는 사이트에 있는 CSS 파일을 index.html 파일의 <head> 태그 안에 복붙해주시면 된다.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

이미지를 저장할 때 src폴더와 public폴더의 차이점?

src 폴더에 있는 파일들은 리액트 앱을 발행했을 때 저절로 압축이 되고 파일명이 변경되는데 public 폴더에 있는 파일은 리액트 앱을 발행했을 때 변경되지 않고사이트 루트경로에 그대로 남아있다.

public 폴더에 있는 이미지들은 <img src="/image.jpg" /> 이렇게 써도 된다.하지만 CSS파일에 작성할 이미지들은 src폴더 쓰는 것이 좋다.

<div className="container">
        <div className="row">
          <div className="col-md-4">안녕</div>
          <div className="col-md-4">안녕</div>
          <div className="col-md-4">안녕</div>
        </div>
      </div>

Bootstrap grid 문법으로, 사이트가 정확히 가로로 3분할이 되는 코드

React 이미지 img 추가하는 방법

1. import를 사용하여 이미지 추가하기

import <사용할 이름> from <이미지 파일 경로>;

import imgA from './images/testA.png';

<img src={ imgA} />

2. require()를 사용하여 이미지 추가하기

require(이미지 파일 경로)

<img src={require("./Sketch001.jpg")} />

데이터 바인딩

useState로 데이터를 보관하고 바인딩 시키자.

이때 사용해야할 것이 import / export이다.

export?

다른 파일로 빼고 싶을 때

var name = 'Kim'

export default name

하게 되면 다른 파일에서 변수를 자유롭게 쓸 수 있다.

import?

다른 파일에 변수를 가져다 쓸 때

import name from './data.js';

‘ . / ‘ 는 현재 경로라는 뜻이다.

이때, 내보낼 변수가 많다면?

export 라는 문법에다가 중괄호를 열고 사용 가능!

var name1 = 'Kim1'
var name2 = 'Kim2'

export {name1, name2}

import {name1, name2}  from './data.js';

import React,{ useState } from "react";

let [sticker, stickerChange] = useState([]);

useState를 사용하면 꼭 import를 해와야한다.

export default [
  {
    id: 0,
    title: "Cute Bear",
    content: "Born in France",
    price: 500,
  },

  {
    id: 1,
    title: "Shy squirrel",
    content: "Born in Seoul",
    price: 1000,
  },

  {
    id: 2,
    title: "Grey Cat",
    content: "Born in the States",
    price: 600,
  },
];

useState 데이터가 너무 길어져서 src/data.js 파일을 만들고 코드를 넣어준다!

여기서 문제1 !

import와 export를 활용해서 data.js에 있는 긴 데이터를 useState에서 간단하게 사용해보자!

import data from "./data.js";

function App() {
  let [sticker, stickerChange] = useState(data);
...}

<div className="container">
        <div className="row">
          <div className="col-md-4">
            <img src={require("./Sketch001.jpg")} width="100%" />
            <h4>{sticker[0].title}</h4>
            <p>
              {sticker[0].content} & {sticker[0].price}
            </p>
          </div>
          <div className="col-md-4">
            <img src={require("./Sketch002.jpg")} width="100%" />
            <h4>{sticker[1].title}</h4>
            <p>
              {sticker[1].content} & {sticker[1].price}
            </p>
          </div>
          <div className="col-md-4">
            <img src={require("./Sketch003.jpg")} width="100%" />
            <h4>{sticker[2].title}</h4>
            <p>
              {sticker[2].content} & {sticker[2].price}
            </p>
          </div>
        </div>
      </div>

문제 2

위 코드를 가지고

component화 시키기
데이터 바인딩으로 완료
컴포넌트를 반복문으로 돌리기

component화 시키기 ,
props로 데이터 전달하기

<div className="container">
        <Contents sticker={sticker[0]}></Contents>
				<Contents sticker={sticker[1]}></Contents>
				<Contents sticker={sticker[2]}></Contents>
</div>

function Contents(props) {
  return (
       <div className="col-md-4">
        <img src={require("./Sketch001.jpg")} width="100%" />

        <h4>{props.sticker.title}</h4>
        <p>
          {props.sticker.content} & {props.sticker.price}
        </p>
      </div>
  );
}

3. 컴포넌트를 반복문 처리 하기

<div className="row">
          {sticker.map((a,i) => {
            return <Contents sticker={a} i={i}></Contents>;
	          })
					}
        </div>

자료.map((a,i)=>{
return 
})

//a는 하나하나의 데이터들을 의미한다.
//i는 반복분 돌 때 마다 인덱스

map 함수는 파라미터 2개가 들어간다.

문제 3

추가로 반복문을 돌때마다 이미지 변수 1,2,3이 되는 변수를 넣고 싶을 때?

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

강의에서는 이와같은 방법으로 코딩을 하였다.

function Contents(props) {
  return (
    <div className="col-md-4">
      <img src={require(`./Sketch00${props.i + 1}.jpg`)} width="100%" />

      <h4>{props.sticker.title}</h4>
      <p>
        {props.sticker.content} & {props.sticker.price}
      </p>
    </div>
  );
}

하지만 나는 img를 직접 그려서 작업하기 때문에 src에 따로 저장하여 require로 이미지를 불러왔다.

require를 사용하면서 동적 변수를 넣고 싶어서 이와 같이 코드를 짰다.

실행 해보니 사이트는 잘 동작하는데 오류가 하나 떴다.

have a unique "key" prop.

이는 반복문에서 키를 설정 안해줘서 그런것!

<div className="container">
        <div className="row">
          {sticker.map((a, i) => {
            return <Contents sticker={a} i={i} **key={i}**></Contents>;
          })}
        </div>
 </div>

key={i}를 해주니 오류가 사라졌다.

'Front-end > React' 카테고리의 다른 글

[React] 코딩애플 blog-part2-3 (styled-components & SASS ) (0)	2021.12.28
[React] 코딩애플 blog-part2-2 (React Router) (0)	2021.12.27
[React] 코딩애플 blog -6 (0)	2021.12.09
[React] 코딩애플 blog -5 (0)	2021.12.09
[React] 코딩애플 blog -4 (0)	2021.12.06

yarn을 이용한 새로운 프로젝트 설치

React Bootstrap 라이브러리 설치하기

React 이미지 img 추가하는 방법

데이터 바인딩

'Front-end > React' 카테고리의 다른 글

검색 태그

티스토리툴바