[리액트] 공부일지-3

React-router-dom

오늘은 리액트 라우터 돔에 대해서 공부를 했다.

현재 버전은 v6까지 나왔으며, v5와 비교했을 때 바뀐 점이 꽤나 있다.

코딩애플 강의에서는 v5를 사용하고 있어서 혼란이 있었다.

 

index.js

import 어쩌구 많은곳;

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>
  document.getElementById('root')
);

app.js

import 많은 곳;
import { Link, Route, Switch } from 'react-router-dom';

function App(){
  return (
    <div>
      HTML 잔뜩있는 곳 
      <Route path="/"> 
        <div>메인페이지 코드</div>
      </Route>
      <Route path="/detail">
        <div>상세페이지 코드</div>
      </Route>
    </div>
  )
}

이 코드는 코딩애플에서 쓴 react-router-dom인데 v5이다. 나한테 install된 버전은 v6여서 그런지

이런식으로 코드를 짜면 빈 화면만 송출이 되었다. 그래서 v6버전에 맞춰 코드를 수정해보았지만

다른 확장프로그램들이랑 버전이 꼬였는지(?) 똑같이 빈 화면이 송출이 되어서

아예 react-router-dom을 v5로 다시 설치하였다. 그리고 다시 위의 코드로 실행을 해보니 다행히도

화면이 송출되었다.

 

위의 코드를 조금 더 간편화하기 위해 상세페이지에 있는 코드를 컴포넌트화 시켜 외부에서 불러오도록

설정해보았다.

 

detail.js

import React, {useState} from 'react';

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 mt-4">
                <h4 className="pt-5">상품명</h4>
                <p>상품설명</p>
                <p>120000원</p>
                <button className="btn btn-danger">주문하기</button> 
              </div>
            </div>
      </div> 
    )
  }
export default Detail

detail.js라는 파일을 새로 만드어 거기에 세부사항 코드를 넣었다.

그리고 export default를 이용하여 외부에서 import할 수 있게 해주었다.

  <Route path="/detail">
    <Detail />
  </Route>

위의 코드 하나로 코드가 굉장히 줄어들었다.

앞으로 프로젝트를 하면서는 아마도 v6를 써야할 것 같아서

조만간 v6의 사용법을 제대로 이해해야겠다.