개발 필기장

React 미디어쿼리 (@media)

화면의 너비가 500px이하가 되었을 때, asdf클래스 네임을 가진 부분의 배경색상 변화 (빨강색)

화면의 너비가 500px이상이 되었을 떄, asdf클래스 네임을 가진 부분의 배격생상 변화 (파랑색)

문제1) ~500px : red, 501 ~ 600px : green, 601px ~ : blue

max-width를 두가지 함으로써, 500px이하의 배경색상이 green 과 red가 겹친다.

우선순위의 문제를 해결하기 위해, 500px이하의 배경색을 설정하고 싶은 부분을 후순위로 배치한다.

문제 2) 화면 크기에 따라, 배치 순서 변경

main, nav, aside가 display: flex의 적용을 받고 있는 상태에서, order를 통해 배치 순서 설정 가능

display: none으로 아예 안보이게도 가능

https://www.w3schools.com/cssref/css3_pr_mediaquery.php : 더 많은 정보

TypeScript Literal types

Literal types : 해당 변수에 지정한 값의 타입만 들어오게(더 엄격) 한다

방법 : :'kim' = kim만 들어오게 한다 ( |(union type)를 사용하여 설정 가능 )

* 함수에도 사용 가능

literal types의 문제점 : 

해당 값을 가져오는게 아니라, 해당 값의 타입을 가져온다

해결방법 : 

가져오는 값 뒤에 as const를 붙여준다 = literal type 지정을 알아서 해준다

(속성들에 모두 readonly 적용)

var 자료 = {
    name : "kim"
} as const


function 내함수(a :'kim'){
}

내함수(자료.name);

TypeScript 함수, methods에 타입 지정

생성 방법 : type 함수타입 = (a: string) => number;

적용 방법 : let 함수 :함수타입 = function(a){ return 1; }

type 함수타입 = (a :string) => number;

let 함수 :함수타입 = function(a){
    return 1;
}

함수("123");

* object 안에 함수 만들수 있다

* 함수안에 함수를 넣으려면, 받은 함수를 ()를 붙여서 사용

TypeScript typescript로 HTML 변경 및 조작

tsconfig.json파일 - "strictNullChecks": true추가

* document.querySelector()를 쓰면, null이 아닌지 narrowing 해줘야한다

narrowing 방법 5가지

1. if (제목 != null) : 무난

2. if (제목 instanceof Element) : 자주 쓴다

3. document.querySelector() as Element : 웬만하면 쓰지 말것

4. if (제목?.innerHTML) : 제목이 있으면 출력, 없으면 undefined (if아니여도 인정해준다)

5. tsconfig.json파일 - "strictNullChecks": true 지우기 : 무식한 방법

* href를 바꿀 때, narrowing을 하려면 instanceof HTMLAnchorElement 사용

그 외 HTMLHeadingElement, HTMLButtonElement 등이 있다

TypeScript class 키워드(JS 문법)

<script>

    class Hero{
        constructor(구멍){
            this.q = 구멍;
            this.w = 'snowball';
        }
    }
    
    var nunu = new Hero("consume")
    var garen = new Hero("strike")

</script>

TypeScript prototype 문법(JS 문법)

prototype : 유전자

해당 클래스를 상속받은 객체들은 해당 클래스의 prototype을 설정해주면 모두 그 값을 받아올 수 있다

<script>

    class 기계{
        constructor(){
            this.q = "strike";
            this.w = 'snowball';
        }
    }
    
    기계.prototype.name = 'kim';

    var nunu = new 기계();
    var garen = new 기계();

    var 어레이 = [4, 2, 1];
    var 어레이 = new Array(4, 2, 1);

    Array.prototype.함수 = function(){}

</script>

TypeScript class 타입지정

constructor()는 필드값에 변수가 미리 있어야 this.변수명 이 가능하다

class Person{
    name :string;
    constructor(a :string){
        this.name = a;
    }
    함수(a :string){
        console.log('안녕' + a);
    }
}

let 사람1 = new Person("kim");
let 사람2 = new Person("park");

사람1.함수("안녕");

TypeScript interface

object 타입지정시 interface 사용가능

interface의 장점 : extends로 복사가능

interface Student {
    name : string
}
interface Teacher extends Student{
    age : number
}

let 학생 :Student = {name : 'kim'}
let 선생 :Teacher = {name : 'kim', age : 20}

type alias도 &로 extend기능 사용 가능

type Animal = {
    name : string
}
type Cat  = {
    age : number
} & Animal

let 고양이 :Cat = {name : 'kim', age : 20}

type vs inteface

interface는 중복선언 가능

type은 중복선언 불가능

interface Student {
    name : string
}
interface Student {
    score : number
}
interface Teacher extends Student{
    age : number
}

let 학생 :Student = {name : 'kim', score : 23}
let 선생 :Teacher = {name : 'kim', age : 20, score : 100}

TypeScript 설치 셋팅

이미 있는 React프로젝트에 설치 방법 : 

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

React 프로젝트를 새로 만들어 설치 방법 :

npx create-react-app my-app --template typescript

그냥 vscode에서 typescript 실행 방법 : 

npm install -g typescript

tsconfig.json파일(ts -> js컴파일시 옵션 설정 가능) 생성 후

{

"compilerOptions":{

"target": "es5",

"module": "commonjs",

}

}

그 후 ts파일을 js로 인식하게 하려면 terminal창에 tsc -w 입력

그러면 코드를 입력하면 js파일이 생성된다

이제 .js 파일을 .ts 파일로 바꿔서 이용가능

TypeScript 타입 지정 

javascript는 Dynamic Typing이 가능하다

typescript는 타입을 엄격히 검사해준다

변수를 만들 때 타입을 지정하는 방법 : let 변수명 :string = 'kim'

해당하는 변수에는 string 타입만 들어올 수 있게 설정

array 타입 지정 방법 : let 변수명 :string[] = ['kim', 'park']

object 타입 지정 방법 : let 변수명 :{name : string} = {name : 'kim'}

* let 변수명 :{name? : string} = {name : 'kim'} = ?를 통해 name이 없어도 에러 발생안하게 설정

object에 타입지정해야할 속성이 너무 많으면

* let 변수명: {[key :string] : string} = {name : 'kim', age : '123'} = 글자로 된 모든 object속성의 타입은 string

여러가지 타입의 데이터를 들어올 수 있게 하는 방법 : let 변수명 :string | number = 123;

* 타입을 따로 변수로 사용하면 만들수 있다

type 타입 = string | number;

let 변수명: 타입 = 123;

함수에 타입지정 하는 방법 : 

function 함수(x :number) :number{

return x * 2;

}

해당 함수는 파라미터로 number, return값으로 number

* class는 미리 타입을 지정해야한다

Tip : 타입지정은 원래 자동으로 된다. 타입지정 문법 생략 가능

TypeScript 타입 지정 (union, any, unknown)

Union type(|)을 통해 두개 이상 타입 지정이 가능하다

array 타입 : let 회원들 :(number | string)[] = [1,'2',3];

object 타입 : let 오브젝트 :{a :(string | number)} = {a : 123};

* union타입은 두가지 타입을 합쳐서 새로운 타입을 만드는 것이다. 

any타입(타입 실드 해제 문법)을 통해 모든 자료형을 허용해줄 수 있다

let 이름 :any;
이름 = 123;
이름 = [];

unknown타입 : 기능은 any와 같으나, 조금 더 안전하다

이유 : any는 다른 곳에서 불러와도 타입실드를 해제한다 (오염)

TypeScript 타입 지정 (함수, void)

타입 지정하는 함수 만드는 방법 :

function 함수(x :number) :number{

return x * 2;

}

함수(6);

함수에서 void타입 활용 방법 : 

function 함수(x :number) :void{

x + 1;

}

함수(2);

:void = return을 했을 경우 error나게 설정

* 함수에서 파라미터값을 설정하면 typescript에서는 무조건 보내줘야한다

이것을 막기 위해서는 파라미터변수 뒤에 ?를 붙이면 된다

* 변수? :number는 변수 :number | undefined와 같다

TypeScript Narrowing & Assertion

type이 아직 하나로 확정되지 않았을 경우(string | number) Type Narrowing을 써야한다

대표적인 Narrowing 방법 : typeof

if문 등으로 Narrowing 해줘야 조작가능

assertion 문법 : 타입 덮어쓰기(확정되지 않은 타입을 변경, 확정된 타입은 변경 불가)

아직 확정되지 않은 변수 뒤에 as type명 = 해당 변수가 지정한 type으로 덮어 써진다

* assertion 문법의 용도 : 

1. Narrowing할 때 쓴다

2. 무슨 타입이 들어올지 100% 확실할 때 쓴다

웬만하면 Narrowing 쓰삼

TypeScript type alias & readonly

type alias : 타입 변수

만드는 방법 : type 변수명(첫번째 대문자) = 내용;

* const 변수명 = 값 : 해당 변수의 값을 바꿀수 없다(const이기 때문에)

하지만 object는 바꿀 수 있다.

따라서, object여도 바꿀수 없게 하는 방법 : 

type을 지정해줄 때, 해당 obejct의 키값 앞에 readonly를 붙여준다 

type girlfriend = {
    readonly name : string
}

* 타입스크립트 에러는 에디터 & 터미널에서만 존재

실제 변환된 js파일은 에러 없음

type변수도 union type으로 extend(합치기) 가능

type Name = string;
type Age = number;
type Person = Name | Age;

object type 변수도 &로 extend(합치기) 가능

type PositionX = {x : number};
type PositionY = {y : number};
type NewType = PositionX & PositionY;

* type변수는 재정의 불가능하다

React 개발자 도구 & lazy import 

개발자 도구

https://chromewebstore.google.com/ - react delveloper tools 검색 - 다운로드 

* react로 만들어진 페이지만 확인 가능

F12 - Components = Element보다 좀더 편하게 확인 가능

F12 - Profiler = 성능저하되는 컴포넌트 범인 찾기

lazy import

Single Page Application 특징 : js파일 하나에 모든 코드를 다 쑤셔 넣는다. (사이즈가 크다)

따라서, 해당 페이지를 로딩할 때 필요하지 않는 import부분이 있으면, 

그 부분은 lazy import()로 묶어준다

로딩 중일 때, 흰색 화면이 뜨기 때문에 그것을 방지하기 위해 

Suspense를 import해주고, lazy import한 컴포넌트 부분을 <Suspense>로 감싸준다

import { Container, Nav, Navbar } from 'react-bootstrap';
import './App.css';
import bg from './img/bg2.jpg';
import { createContext, lazy, Suspense, useEffect, useState } from 'react';
import data from './data.js';
import { Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom'
import axios from 'axios'
import { useQuery } from 'react-query';

//import Detail from './routes/Detail.js'
// import Cart from './routes/Cart.js'

const Detail = lazy(() => import('./routes/Detail.js'));
const Cart = lazy(() => import('./routes/Cart.js'));


export let Context1 = createContext()

function App() {

  let obj = {name : 'kim'}

  let [shoes, setShoes] = useState(data)
  let [재고] = useState([10, 11, 12])
  
  let navigate = useNavigate();

  useEffect(() => {
    localStorage.setItem('watched', JSON.stringify([]))

  }, [])

  let result = useQuery('작명', () => {
    return axios.get('https://codingapple1.github.io/userdata.json').then((a) => {
      console.log('요청됨')
      return a.data;
    })
  })

  return (
    <div className="App">
      
      <Navbar bg="light" data-bs-theme="light">
        <Container>
          <Navbar.Brand href="#home">ShopShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={() => { navigate('/')}}>Home</Nav.Link>
            <Nav.Link onClick={() => { navigate('/cart') }}>cart</Nav.Link>
          </Nav>
          <Nav className='ms-auto'>
            {result.isLoading && '로딩중'}
            {result.error &&'에러남'}
            {result.data && result.data.name}
          </Nav>

        </Container>
      </Navbar>
      <Suspense fallback={<div>로딩중임</div>}>
      <Routes>
        <Route path='/' element={
          <>
          <div className='main-bg' style={{backgroundImage:'url(' + bg + ')' }}></div>
            <div className='container'>
              <div className='row'>
                {
                  shoes.map(function(a, i){
                    return(
                      <Card shoes = {shoes[i]} i = {i}></Card>
                    )
                  })
                }
              </div>
            </div>
            <button onClick={() => {
              axios.get('https://codingapple1.github.io/shop/data2.json')
              .then((data) => {
                console.log(data.data);
                let copy = [...shoes, ...data.data];
                setShoes(copy)
              })
              .catch(() => {
                console.log('실패함')
              })

            }}>더보기</button>
          </>
        } />
        <Route path='/detail/:id' element={
          <Context1.Provider value={{재고}}>
            
              <Detail shoes={shoes}/>
            
          </Context1.Provider >
        } />
        <Route path="/cart" element={<Cart></Cart>}></Route>
      </Routes>
      </Suspense>
      
    </div>
  );
}

function Card(props){
  let navigate = useNavigate();
  return(
    <div className='col-md-4'>
      <img onClick={() => {navigate('detail/' + (props.i))}} src={"https://codingapple1.github.io/shop/shoes" + (props.i+1) + ".jpg"} width="80%"></img>
      <h5>{props.shoes.title}</h5>
      <p>{props.shoes.price}</p>
    </div>
  )
}

export default App;

React memo & useMemo

자식 컴포넌트 재렌더링 막기

자식 컴포넌트 무거울 경우 계속 재렌더링 할 경우 속도가 저하될 수 있으므로, 

재 렌더링 필요없는 경우면, memo(import 해줘야함)로 해당 컴포넌트를 감싸준다

* memo 원리 : memo로 된 함수의 props가 변할 때에는 재렌더링 된다

useMemo(함수) : 해당하는 페이지가 처음 로드 될때만 실행하고, 나머지는 실행하지 않는다

하지만 useEffect처럼 , [state] 를 통해 state가 변경될때도 실행 가능

import { Table } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { increase, changeName} from "./../store/userSlice";
import { addCount } from "./../store.js";
import { memo, useMemo, useState } from "react";

function 함수(){
    return 반복문 10억번;
}

let Child = memo( function(){
    console.log("재렌더링됨")
    return <div>자식임</div>
})

function Cart(){

    let result = useMemo(() => {return 함수()}, [state])

    let state = useSelector((state) => { return state })
    let dispatch = useDispatch()
    let [count, setCount] = useState(0)

    return(
        <div>
            <Child count={count}></Child>
            <button onClick={() => {setCount(count+1)}}>+</button>
            <h6>{state.user.name} {state.user.age}의 장바구니</h6>
            <button onClick={() => {dispatch(increase(10))}}>버튼</button>
            <Table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>상품명</th>
                        <th>수량</th>
                        <th>변경하기</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        state.cart.map(function(a, i){
                            return(
                                <tr key={i}>
                                    <td>{a.id}</td>
                                    <td>{a.name}</td>
                                    <td>{a.count}</td>
                                    <td>
                                        <button onClick={() => {
                                            dispatch(addCount(a.id))
                                        }}>+</button>
                                    </td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </Table> 
        </div>
    )
}

export default Cart;

React useTransition & useDeferredValue

useTransition

계산이 많아서 성능이 저하될 때, 해당하는 함수에 useTransition을 사용

동작 원리 : 코드 시작을 뒤로 늦춰서, 한꺼번에 코드를 처리할 때의 성능저하를 막아줌

사용 방법 : useTransition을 import 한다

계산이 복잡한 부분에 startTransition을 감싸준다

계산중(로딩중)일 때 true를 반환한다

useDeferredValue

useTransition과 마찬가지로 느린 컴포넌트 성능을 향상시켜줌

useDeferredValue(state명) : 복잡한 state가 변할때 성능 향상

React if문 작성 패턴

1. 컴포넌트 안에서 쓰는 if/else

2. JSX안에서 쓰는 삼항연산자 

3. && 연산자로 if 역할 대신하기

4. switch / case 조건문

5. object/array 자료형 응용

React localStorage

LocalStorage : 브라우저에서 제공하는 데이터 저장소 (키, 밸류 형식)

* 브라우저를 청소하면 삭제됨

* 새로고침하면 state가 초기값으로 돌아간다

따라서, localStorage에 저장한다(반영구적 저장가능)

localStorage 확인법 : F12 - application - Local Storage

localStorage 데이터 저장법 : localStorage.setItem('이름', '값')

localStorage 데이터 출력법 : localStorage.getItem('이름')

localStorage 데이터 삭제법 : localStorage.removeItem('이름')

* 수정은 따로 명령어가 없음

* sessionStorage로도 사용 가능

* localStorage에는 array/object로 저장하려면 JSON형식으로 변환 후 저장

JSON형식 변환 방법 : JSON.stringify(변수명)

JSON에서 array/object형식 변환 방법 : JSON.parse(변수명)

* array에서 중복제거를 쉽게하려면 Set자료형써도 된다

array -> Set(중복 없앤 array) -> array

Set으로 바꾸는 방법 = new Set(array명)

array로 바꾸는 방법 = Array.from(array명)

실행 결과

React react-query (실시간 데이터)

react-query 설치 : npm install react-query

세팅 방법 : index.js - 

* QueryClient, QueryClienProvider import 하기

사용 방법 : useQuery('작명', () =< {return axios.get('url').then((data) => {retrun data})}

위에서 받아온 result.data = 데이터 

위에서 받아온 result.isLoding= 로딩 중일 때 true

위에서 받아온 result.error = 에러가 났을 때 true

* 틈만나면 자동으로 refetch 해줌

따라서 staleTime으로 refetch 간격 조절 가능

* 요청 실패시 알아서 retry 해준다

* ajax-query가 같은 요청을 다른 컴포넌트에서 해도 한번에 잘 보내주기 때문에 굳이 props 사용안해도 됨

React PWA셋팅해서 앱으로 발행

PWA 장점 

1. 설치 마케팅 비용이 적음

2. 아날로그 유저들 배려

3. html css js 만으로 앱까지

4. 푸시 알림, 센서 등

* 기존 프로젝트를 PWA로 만드려면, 새 프로젝트를 만들고 기존 프로젝트 복붙

세팅 방법 : 

작업 폴더 열기 - terminal창 - npx create-react-app 프로젝트명 --template cra-template-pwa

- 해당 프로젝트 열기 - index.js - register로 변경

terminal창 - npm run build - build폴더가 생긴다(PWA에 필요한 것들이 생성)

* service-worker.js = 오프라인에서도 사이트 열 수 있게 도와줌

실행 방법 : 

vscode로 build 폴더 열기 - view - Extensions - Live Server 설치 

- index.html 우클릭 - Open with Live Server

우측 상단에 앱으로 연결하는게 새로 생김

해당 버튼을 누르면 위와 같이 뜬다

React async

async함수는 오래걸리면 제껴두고 다음 줄 코드부터 실행한다.

따라서 순차적으로(sync 스럽게) 순차적으로 실행하고 싶으면, useEffect를 사용한다

React Context API

context = state 보관함

context 가져오는 법 : let 변수명 = createContext() (createContext는 import해줘야 한다)

state공유를 원하는 것을 감싸준다 = <변수명.Provider>

value{} 안에 보내고 싶은 state명을 쓴다

보내고 싶은 state를 export해준다 

받고싶은 파일에서 import 해준다

해당 파일에서 보관함을 해체(state들이 남는다)

* 위와 같이 받아오면 useContext(변수명)을 통해 해당 파일의 어느 위치에서든 사용 가능

React Redux (Redux toolkit 설치)

Redux = 보관함

Redux 설치 : npm install @reduxjs/toolkit react-redux

따라서 파일(store.js)을 생성

해당 파일에

import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
  reducer: { }

})

입력

index.js 파일에서 <Provider>태그 묶고, store에 해당 store.js 넣기

* Provider과 store 모두 import

React Redux 보관 및 사용

Redux 쓰는 이유 : 컴포넌트간 state공유가 편해짐

store에 state 보관(생성)하는 방법 : 

store에 state 등록하는 방법 : 

store에 있는 state 가져오는 방법 : 

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
    name : 'user',
    initialState : 'kim'
})

let stock = createSlice({
    name : 'stock',
    initialState : [
    {id : 0,
    name : 'White and Black',
    count : 2}, 
    {id : 2,
    name : 'Grey Yordan',
    count : 1}
    ]
})

export default configureStore({
  reducer: { 
    user : user.reducer,
    stock : stock.reducer
  }
})

import { Table } from "react-bootstrap";
import { useSelector } from "react-redux";

function Cart(){

    let a = useSelector((state) => { return state })
    console.log(a.stock)

    return(
        <div>
            <Table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>상품명</th>
                        <th>수량</th>
                        <th>변경하기</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        a.stock.map(function(a, i){
                            return(
                                <tr>
                                    <td>{a.id}</td>
                                    <td>{a.name}</td>
                                    <td>{a.count}</td>
                                    <td>asdf</td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </Table> 
        </div>
    )
}

export default Cart;

실행 결과

React Redux state 변경

state 변경하는 방법

state 변경 함수 만들기 : 

1. reducer : {} 을 통해 함수를 만든다. (여러함수 생성 가능)

2. 만든 함수를 export 한다

해당 state명.actions를 하고, 안에 있는 변경 함수들을 작성해 export 한다

3. 만든 함수 import해서 사용

* useDispatch() = store.js로 요청보내주는 함수다.

import { configureStore, createSlice } from '@reduxjs/toolkit'

let user = createSlice({
    name : 'user',
    initialState : 'kim',
    reducers : {
        changeName(state){
            return 'john ' + state;
        }
    }
})

export let {changeName} = user.actions

let cart = createSlice({
    name : 'cart',
    initialState : [
    {id : 0,
    name : 'White and Black',
    count : 2}, 
    {id : 2,
    name : 'Grey Yordan',
    count : 1}
    ]
})

export default configureStore({
  reducer: { 
    user : user.reducer,
    cart : cart.reducer
  }
})

import { Table } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { changeName } from "./../store.js";

function Cart(){

    let state = useSelector((state) => { return state })
    let dispatch = useDispatch()

    return(
        <div>
            {state.user}의 장바구니
            <Table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>상품명</th>
                        <th>수량</th>
                        <th>변경하기</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        state.cart.map(function(a, i){
                            return(
                                <tr key={i}>
                                    <td>{a.id}</td>
                                    <td>{a.name}</td>
                                    <td>{a.count}</td>
                                    <td>
                                        <button onClick={() => {
                                            dispatch(changeName())
                                        }}>+</button>
                                    </td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </Table> 
        </div>
    )
}

export default Cart;

실행 결과

React Redux state가 object/array일 경우 변경하는 방법

object/array일 경우 아래와 같이 변경 가능

* 변경함수에서 파라미터값을 받아올 수도 있다. (대신 .payload 사용)

store에 있던 파일이 길어질 경우 분할관리하는 방법

위와 같이 새로운 파일에 해당 처럼 작성해주고, 

store.js에서 import로 불러와준다

findIndex 란?

* 해당 조건식을 통해, 알아서 지정한 배열에서 반복문을 돌려 맞는 인덱스 번호를 가져온다.

import { configureStore, createSlice } from '@reduxjs/toolkit'

import user from './store/userSlice.js'

let cart = createSlice({
    name : 'cart',
    initialState : [
    {id : 0, name : 'White and Black', count : 2}, 
    {id : 2, name : 'Grey Yordan', count : 1}
    ], 
    reducers : {
        addCount(state, action){
            let num = state.findIndex((a) => {return a.id == action.payload});
            state[num].count++;
        },
        addItem(state, action){
            state.push(action.payload)
        }
    }
})

export let {addCount, addItem} = cart.actions

export default configureStore({
  reducer: { 
    user : user.reducer,
    cart : cart.reducer
  }
})

import { Table } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { increase, changeName} from "./../store/userSlice";
import { addCount } from "./../store.js";

function Cart(){

    let state = useSelector((state) => { return state })
    let dispatch = useDispatch()

    return(
        <div>
            <h6>{state.user.name} {state.user.age}의 장바구니</h6>
            <button onClick={() => {dispatch(increase(10))}}>버튼</button>
            <Table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>상품명</th>
                        <th>수량</th>
                        <th>변경하기</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        state.cart.map(function(a, i){
                            return(
                                <tr key={i}>
                                    <td>{a.id}</td>
                                    <td>{a.name}</td>
                                    <td>{a.count}</td>
                                    <td>
                                        <button onClick={() => {
                                            dispatch(addCount(a.id))
                                        }}>+</button>
                                    </td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </Table> 
        </div>
    )
}

export default Cart;

실행 결과

React Styled-component 

* Styled-component를 사용하면 css파일이 없어도 된다

Styled-component 설치 : npm install styled-components

import styled from 'styled-components'

사용법 : let 변수명 = styled.button `내용` = 버튼을 만든것이고, 백틱으로 내용 설정

끌어와서 쓰려면 <변수명 />으로 사용

장점 : 다른 js파일에 관섭을 하지 않는다. 페이지 로딩 시간 단축

해당하는것도 props를 이용해서 특정 부분만 변경 가능

단점 : js파일이 복잡해짐. 

React Lifecycle & useEffect

Lifecycle : 컴포넌트의 주기(장착, 업데이트, 삭제 시 실행 가능)

쓰는 방법 : useEffect(() => { 실행할 내용 }) 

* 페이지가 모두 렌더링 된 후 useEffect()안에 내용이 실행된다

쓰는 이유 : 연산이 오래 걸리는 경우, 같이 쓰게 될 경우, 페이지 로딩이 느려질 수도 있다

* 보통 시간이 오래걸리는 어려운 작업, 서버에서 데이터를 가져오는 작업 등을 useEffect()안에 사용

useEffect(() => { 실행할 내용 }, [변수]) : 변수가 변할때만 실행 하도록 설정  

변수 없이 []만 쓸 경우, mount될때는 실행되지만, update가 될때는 실행안된다

* useEffect안에 return () => {실행할 내용} : 해당 내용은 useEffect가 실행되기 전에 실행

return을 쓰는 이유 : react는 재렌더링이 많기 때문에, 재렌더링 되었을때 기존의 것을 제거 등을 할 때 사용(충돌 방지)

* return은 mount될 때 실행 x, unmount 될 때 실행

setTimeout(함수, 시간) : 해당 시간이 지난후, 함수 실행

clearTimeout(타이머 변수명) : 해당 타이머를 제거

총정리 

1. 재렌더링마다 코드 실행 하고 싶으면 : useEffect(() => {코드})

2. mount시 1회 코드 실행 하고 싶으면 : useEffect(() => {코드}, [])

3. unmount시 1회 코드 실행 or useEffect 실행 전 코드 실행 하고 싶으면 : useEffect(() => { return () => {코드} })

4. 특정 state 변경시에만 실행 하고 싶으면 : useEffect(() => {코드}, [변수])  

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

function Detail(props){
  let {id} = useParams();
  let 찾은상품 = props.shoes.find(function(x){
    return x.id == id
  });
  let [count, setCount] = useState(0);
  //let [alert, setAlert] = useState(true)
  let [num, setNum] = useState('');

  useEffect(()=>{
    if (isNaN(num) == true){
      alert('그러지마세요')
    }
  }, [num])

  // useEffect(() => {
  //   let a = setTimeout(() => {setAlert(false)}, 2000)
  //   console.log(2)
  //   return () => {
  //     console.log(1)
  //     clearTimeout(a);
  //   }
  // }, [])

  return(
    <div className="container">
      {
        alert == true 
        ? <div className="alert alert-warning">
          2초 이내 구매시 할인
          </div>
        : null
      }
      
      {count}
      <button onClick={() => {setCount(count+1)}}>버튼</button>
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6">
          
          <input onChange={(e) => {setNum(e.target.value)}} />
          
          <h4 className="pt-5">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>

          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
    </div> 
  )
}

export default Detail;

실행 결과 

React ajax

ajax로 GET/POST요청하려면 방법 3가지 = XMLHttpRequest, fetch(), axios

axios 라이브러리 설치 : npm install axios - import axios from 'axios'

axios.get('url') : url에 해당하는 데이터 불러옴

.then() : 해당하는 데이터 가져옴

.catch() : 가져오는데 실패하였을 때 

* 여러개의 url에게 get요청을 보내고 싶을 때 : Promise.all([axios.get('url'), axios.get('url') , ...]).then()

* fetch()를 쓰게되면, json형식을 변환하는 과정이 필요하지만, axios는 자동으로 해준다

import { Container, Nav, Navbar } from 'react-bootstrap';
import './App.css';
import bg from './img/bg2.jpg';
import { useState } from 'react';
import data from './data.js';
import { Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom'
import Detail from './routes/Detail.js'
import axios from 'axios'

function App() {

  let [shoes, setShoes] = useState(data)

  let navigate = useNavigate();

  return (
    <div className="App">
      
      <Navbar bg="light" data-bs-theme="light">
        <Container>
          <Navbar.Brand href="#home">ShopShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={() => { navigate('/')}}>Home</Nav.Link>
            <Nav.Link onClick={() => { navigate('/detail') }}>Detail</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <Routes>
        <Route path='/' element={
          <>
          <div className='main-bg' style={{backgroundImage:'url(' + bg + ')' }}></div>
            <div className='container'>
              <div className='row'>
                {
                  shoes.map(function(a, i){
                    return(
                      <Card shoes = {shoes[i]} i = {i}></Card>
                    )
                  })
                }
              </div>
            </div>
            <button onClick={() => {
              axios.get('https://codingapple1.github.io/shop/data2.json')
              .then((data) => {
                console.log(data.data);
                let copy = [...shoes, ...data.data];
                setShoes(copy)
              })
              .catch(() => {
                console.log('실패함')
              })

            }}>더보기</button>
          </>
        } />
        <Route path='/detail/:id' element={<Detail shoes={shoes}/>} />
      </Routes>
      
    </div>
  );
}

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

export default App;

실행 결과

React 탭 UI 

* if문을 쓰고 싶다면, 컴포넌트 사용

import React, { useEffect, useState } from "react";
import { Nav } from "react-bootstrap";
import { useParams } from "react-router-dom";

function Detail(props){
  let {id} = useParams();
  let 찾은상품 = props.shoes.find(function(x){
    return x.id == id
  });

  let [alert, setAlert] = useState(true)
  let [탭, 탭변경] = useState(0);

  useEffect(() => {
    let a = setTimeout(() => {setAlert(false)}, 2000)
    console.log(2)
    return () => {
      console.log(1)
      clearTimeout(a);
    }
  }, [])

  return(
    <div className="container">
      {
        alert == true 
        ? <div className="alert alert-warning">
          2초 이내 구매시 할인
          </div>
        : null
      }
  
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6">
          
          <h4 className="pt-5">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>

          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>

      <Nav variant="tabs" defaultActiveKey="link0">
        <Nav.Item>
          <Nav.Link onClick={() => {탭변경(0)}} eventKey="link0">버튼0</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link onClick={() => {탭변경(1)}} eventKey="link1">버튼1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link onClick={() => {탭변경(2)}} eventKey="link2">버튼2</Nav.Link>
        </Nav.Item>
      </Nav>
      <TabContent 탭={탭}></TabContent>

    </div> 
  )
}

function TabContent(props){
  // if (props.탭 == 0) {
  //   return <div>내용0</div>
  // } else if (props.탭 == 1) {
  //   return <div>내용1</div>
  // } else if (props.탭 == 2) {
  //   return <div>내용2</div>
  // }
  return [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][props.탭]
}

export default Detail;

실행 결과

React transition (전환 애니메이션)

전환 애니메이션 만드는법 

1. 애니메이션 동작 전 className 만들기

2. 애니메이션 동작 후 className 만들기

3. className에 transition 속성 추가

4. 원할 때 2번 className 부착

* className은 여러개 넣고 싶을 때는 띄어쓰기로 구분한다

* automatic batching기능때문에, 효과를 주려면, setTimout() 사용

import React, { useEffect, useState } from "react";
import { Nav } from "react-bootstrap";
import { useParams } from "react-router-dom";

function Detail(props){
  let {id} = useParams();
  let 찾은상품 = props.shoes.find(function(x){
    return x.id == id
  });

  let [alert, setAlert] = useState(true)
  let [탭, 탭변경] = useState(0);
  let [fade2, setFade2] = useState('')

  useEffect(() => {
    let a = setTimeout(() => {setAlert(false)}, 2000)
    console.log(2)
    return () => {
      console.log(1)
      clearTimeout(a);
    }
  }, [])

  useEffect(() => {
    setFade2('end')
    return () => {
      setFade2('')
    }
  })

  return(
    <div className={"containe start " + fade2}>
      
      {
        alert == true 
        ? <div className="alert alert-warning">
          2초 이내 구매시 할인
          </div>
        : null
      }
  
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6">
          
          <h4 className="pt-5">{찾은상품.title}</h4>
          <p>{찾은상품.content}</p>
          <p>{찾은상품.price}원</p>

          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>

      <Nav variant="tabs" defaultActiveKey="link0">
        <Nav.Item>
          <Nav.Link onClick={() => {탭변경(0)}} eventKey="link0">버튼0</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link onClick={() => {탭변경(1)}} eventKey="link1">버튼1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link onClick={() => {탭변경(2)}} eventKey="link2">버튼2</Nav.Link>
        </Nav.Item>
      </Nav>
      <TabContent 탭={탭}></TabContent>

    </div> 
  )
}

function TabContent(props){

  let [fade, setFade] = useState('')

  useEffect(() => {
    let a = setTimeout(() =>{setFade('end')}, 100)
    return () => {
      clearTimeout(a)
      setFade('')
    }
  }, [props.탭])

  return (<div className={"start " + fade }>
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][props.탭]}
    </div>)
}

export default Detail;

실행 결과

React Bootstrap 설치

Bootstrap 라이브러리 설치 : react bootstrap 검색 (https://react-bootstrap.netlify.app/) - Get Started - npm ~~ 복사

- terminal창 붙여넣기 

CSS 부분 복사 - App.js 상단에 붙여넣기

또는 

이 부분 복사 - public/index.html - head태그 안쪽에 붙여넣기

React Bootstrap 사용

https://react-bootstrap.netlify.app/ - GetStarted - (ctrl + k)로 검색창 열기 - 검색

필요한 것(button) 검색 - 복사 - App.js 붙여넣기 

* 가져온 컴포넌트는 import 해줘야 한다

* import 부분은 from 'react-bootstrap' 이다.

실행 결과

React 이미지 및 public폴더 이용

이미지 넣는법1 : css파일 - background-image: url('이미지 경로');

이미지 넣는법2 : App.js파일 - import 작명 from '경로'; - backgroundImage: 'url(' + 이미지 경로 + ')';

* <img src="경로"> 할 때, 다른 웹사이트에서도 가져와도 된다.

* 하지만, 저장한 사진을 가져올 때는, import를 해야하지만 public 폴더 안에 있는 사진을 가져올 때에는

* (./이미지 이름) 으로만 가져올 수 있다. 

대신 process.env.PUBLIC_URL + '경로' 로 작성해야 효과적이다

import { Container, Nav, Navbar } from 'react-bootstrap';
import './App.css';
import bg from './img/bg2.jpg';

function App() {
  return (
    <div className="App">
      <Navbar bg="light" data-bs-theme="light">
        <Container>
          <Navbar.Brand href="#home">ShopShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <div className='main-bg' style={{backgroundImage:'url(' + bg + ')' }}></div>

      <div className='container'>
        <div className='row'>
          <div className='col-md-4'>
            <img src='https://codingapple1.github.io/shop/shoes1.jpg' width="80%"></img>
            <h4>상품명</h4>
            <p>상품설명</p>
          </div>
          <div className='col-md-4'>
            <img src='https://codingapple1.github.io/shop/shoes2.jpg' width="80%"></img>
            <h4>상품명</h4>
            <p>상품설명</p>
          </div>
          <div className='col-md-4'>
          <img src='https://codingapple1.github.io/shop/shoes3.jpg' width="80%"></img>
            <h4>상품명</h4>
            <p>상품설명</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

실행 결과

React import & export 

export 

보낼 변수가 하나일 경우 = export default 변수명 

보낼 변수가 여러개일 경우 = export {변수명, 변수명, ...}

import

받을 변수가 하나일 경우 = import 변수명 from '경로'

받을 변수가 여러개일 경우 = import {변수명, 변수명, ...} from '경로'

* 함수도 export, import 가능

import { Container, Nav, Navbar } from 'react-bootstrap';
import './App.css';
import bg from './img/bg2.jpg';
import { useState } from 'react';
import data from './data.js';

function App() {

  let [shoes] = useState(data)
  let [img] = useState(['https://codingapple1.github.io/shop/shoes1.jpg', 'https://codingapple1.github.io/shop/shoes2.jpg', 'https://codingapple1.github.io/shop/shoes3.jpg'])

  return (
    <div className="App">
      
      <Navbar bg="light" data-bs-theme="light">
        <Container>
          <Navbar.Brand href="#home">ShopShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <div className='main-bg' style={{backgroundImage:'url(' + bg + ')' }}></div>

      <div className='container'>
        <div className='row'>
          {
            shoes.map(function(a, i){
              return(
                <Shoes shoes={shoes} num={i} img={img}></Shoes>
              )
            })
          }
        </div>
      </div>
    </div>
  );
}

function Shoes(props){
  return(
    <div className='col-md-4'>
      <img src={props.img[props.num]} width="80%"></img>
      <h4>{props.shoes[props.num].title}</h4>
      <p>{props.shoes[props.num].price}</p>
    </div>
  )
}

export default App;

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
    }
]

export default data;

실행 결과

React 라우터 셋팅 및 기본

페이지 나누는 법 

1. 컴포넌트 만들어서 상세페이지내용 채움

2. 누가 /detail 접속하면 그 컴포너트를 보여줌

react-router-dom 라이브러리 사용

라이브러리 설치 : npm install react-router-dom@6

index.js - <BrowserRouter>태그 안에 <App> 넣기

* BrowerRouter도 import를 해준다

App.js - import { Routes, Route, Link} from 'react-router-dom' 입력

* 페이지 이동 버튼 : <Link>태그 사용, to로 경로 지정

import { Container, Nav, Navbar } from 'react-bootstrap';
import './App.css';
import bg from './img/bg2.jpg';
import { useState } from 'react';
import data from './data.js';
import { Routes, Route, Link} from 'react-router-dom'
//import Detail from './test.js'

function App() {

  let [shoes] = useState(data)
  let [img] = useState(['https://codingapple1.github.io/shop/shoes1.jpg', 'https://codingapple1.github.io/shop/shoes2.jpg', 'https://codingapple1.github.io/shop/shoes3.jpg'])

  return (
    <div className="App">
      
      <Navbar bg="light" data-bs-theme="light">
        <Container>
          <Navbar.Brand href="#home">ShopShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Cart</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <Link to="/">홈</Link>
      <Link to="/detail">상세페이지</Link>

      <Routes>
        <Route path='/' element={
          <>
          <div className='main-bg' style={{backgroundImage:'url(' + bg + ')' }}></div>
            <div className='container'>
              <div className='row'>
                {
                  shoes.map(function(a, i){
                    return(
                      <Shoes shoes={shoes} num={i} img={img}></Shoes>
                    )
                  })
                }
              </div>
            </div>
          </>
        } />
        <Route path='/detail' element={<Detail></Detail>} />
      </Routes>
      
    </div>
  );
}

function Detail(){
  return(
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">상품명</h4>
          <p>상품설명</p>
          <p>120000원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
    </div> 
  )
}

function Shoes(props){
  return(
    <div className='col-md-4'>
      <img src={props.img[props.num]} width="80%"></img>
      <h4>{props.shoes[props.num].title}</h4>
      <p>{props.shoes[props.num].price}</p>
    </div>
  )
}

export default App;

실행 결과

React 라우터 (navigate, nested routes, outlet)

App.js - import { Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom' 입력

useNavigate() : 페이지 이동을 도와주는 역할

let navigate = useNavigate() 로 변수 지정 - navigate('경로') = 해당 경로로 이동

* 경로대신 -1을 적으면, 전페이지로 이동

404페이지 설정

: <Route path='*' element={<div>없는 페이지</div>} />

nested Routes : 경로 안에 경로를 설정할 때, route태그 안에 route태그를 넣어서 설정

* 하지만, 이상태로 실행하면 /about/member를 들어가도 /about내용만 보인다

(/about 안에 /about/member내용을 넣는 방식, 하지만 /about만 보인다)

따라서 <About>컴포넌트 내용에 <Outlet>을 입력한다.

그러면 <Outlet>을 입력한 곳에 /about/member 내용이 들어간다

nested routes 사용 시기 : 페이지는 이동되지만, 몇가지만 변할 때 사용

import { Container, Nav, Navbar } from 'react-bootstrap';
import './App.css';
import bg from './img/bg2.jpg';
import { useState } from 'react';
import data from './data.js';
import { Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom'
import Detail from './routes/Detail.js'

function App() {

  let [shoes] = useState(data)
  let [img] = useState(['https://codingapple1.github.io/shop/shoes1.jpg', 'https://codingapple1.github.io/shop/shoes2.jpg', 'https://codingapple1.github.io/shop/shoes3.jpg'])

  let navigate = useNavigate();

  return (
    <div className="App">
      
      <Navbar bg="light" data-bs-theme="light">
        <Container>
          <Navbar.Brand href="#home">ShopShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={() => { navigate('/')}}>Home</Nav.Link>
            <Nav.Link onClick={() => { navigate('/detail') }}>Detail</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <Routes>
        <Route path='/' element={
          <>
          <div className='main-bg' style={{backgroundImage:'url(' + bg + ')' }}></div>
            <div className='container'>
              <div className='row'>
                {
                  shoes.map(function(a, i){
                    return(
                      <Shoes shoes={shoes} num={i} img={img}></Shoes>
                    )
                  })
                }
              </div>
            </div>
          </>
        } />
        <Route path='/detail' element={<Detail />} />

        <Route path='/about' element={<About />}>
          <Route path='member' element={<div>멤버임</div>} />
          <Route path='location' element={<div>위치정보임</div>} />
        </Route>
        <Route path='/event' element={<Event />}>
          <Route path='one' element={<div>첫 주문시 양배추즙 서비스</div>} />
          <Route path='two' element={<div>생일 기념 쿠폰 받기</div>} />
        </Route>
      </Routes>
      
    </div>
  );
}

function Event(){
  return(

    <div>
      <h3>오늘의 이벤트</h3>
      <Outlet></Outlet>
    </div>
    
  )
}

function About(){
  return(
    <div>
      <h4>회사정보임</h4>
      <Outlet></Outlet>
    </div>
  )
}

function Shoes(props){
  return(
    <div className='col-md-4'>
      <img src={props.img[props.num]} width="80%"></img>
      <h4>{props.shoes[props.num].title}</h4>
      <p>{props.shoes[props.num].price}</p>
    </div>
  )
}

export default App;

실행 결과

React 라우터 (URL 파라미터)

* 경로 뒤에 :변수명 = URL 파라미터

받은 파라미터값은 useParams()로 받는다 (import 해야한다)

사용할 때는 {}를 벗기고 사용

* find() : array 자료안에서 원하는 항목만 찾아올 수 있습니다. 

array자료.find(()=>{ return 조건식 })  이렇게 쓰면 조건식에 맞는 자료를 찾아서 이 자리에 남겨줍니다.

import { Container, Nav, Navbar } from 'react-bootstrap';
import './App.css';
import bg from './img/bg2.jpg';
import { useState } from 'react';
import data from './data.js';
import { Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom'
import Detail from './routes/Detail.js'

function App() {

  let [shoes] = useState(data)
  let [img] = useState(['https://codingapple1.github.io/shop/shoes1.jpg', 'https://codingapple1.github.io/shop/shoes2.jpg', 'https://codingapple1.github.io/shop/shoes3.jpg'])

  let navigate = useNavigate();

  return (
    <div className="App">
      
      <Navbar bg="light" data-bs-theme="light">
        <Container>
          <Navbar.Brand href="#home">ShopShop</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link onClick={() => { navigate('/')}}>Home</Nav.Link>
            <Nav.Link onClick={() => { navigate('/detail') }}>Detail</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <Routes>
        <Route path='/' element={
          <>
          <div className='main-bg' style={{backgroundImage:'url(' + bg + ')' }}></div>
            <div className='container'>
              <div className='row'>
                {
                  shoes.map(function(a, i){
                    return(
                      <Shoes shoes={shoes} num={i} img={img}></Shoes>
                    )
                  })
                }
              </div>
            </div>
          </>
        } />
        <Route path='/detail/:id' element={<Detail shoes={shoes}/>} />


      </Routes>
      
    </div>
  );
}

function Shoes(props){
  return(
    <div className='col-md-4'>
      <img src={props.img[props.num]} width="80%"></img>
      <h4>{props.shoes[props.num].title}</h4>
      <p>{props.shoes[props.num].price}</p>
    </div>
  )
}

export default App;

import { useParams } from "react-router-dom";

function Detail(props ){

    let {id} = useParams();
    let 찾은상품 = props.shoes.find(function(x){
      return x.id == id
    });

    return(
      <div className="container">
        <div className="row">
          <div className="col-md-6">
            <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
          </div>
          <div className="col-md-6">

            
            <h4 className="pt-5">{찾은상품.title}</h4>
            <p>{찾은상품.content}</p>
            <p>{찾은상품.price}원</p>

            <button className="btn btn-danger">주문하기</button> 
          </div>
        </div>
      </div> 
    )
  }

export default Detail;

실행 결과