Import와 Export

내가 쇼핑몰페이지를 제작할때 상품의 이름과 가격 등 정보들의 데이터를 서버에서 받아온다고 하면 이것들을 일일이 HTML에 넣기 힘들것이다. 이럴때는 데이터를 다른 파일 등에 넣고 Import해올 수 있다.

export default [
  {
    id: 0,
    title: "[1+1]오버핏 맨투맨 후드티 세트",
    price: "38,500원",
  },

  {
    id: 1,
    title: "크루넥 루즈핏 스웨터",
    price: "32,900원",
  },

  {
    id: 2,
    title: "MA-1 후드 항공 점퍼",
    price: "79,200원",
  },
];

예를 들어 data.js라는 파일안에 위와 같은 정보들을 담고(변수명, 함수명, 자료형 등도 배출가능) App.js에서 아래와 같이 Import해올수 있다.

import products from "./data.js";

그 다음에 State에다가 이 데이터들을 담고 HTML에 데이터바인딩을 하여 활용할 수 있다. 이를 통해, 확실히 일일이 State에 모든 데이터를 일일이 넣고, HTML을 작성하며 수정하는것보다 (데이터양이 엄청 많을 경우)깔끔하고 쉽게 활용가능하겠다는 생각이 들었다.

function App() {
let [product, product변경] = useState(products);
return(
         <div className="row">
          <div className="col-md-4">
            <img src="~~"width="100%"/>
            <h4>{product[0].title}</h4>
            <p>{product[0].price}</p>
          </div>
     		 )}

상품목록 Component화 + Map사용하기

상품이 3개밖에 없는 경우는 위처럼 순서를 일일이 적어줄 수 있지만, 더 많아진다면 상품목록들을 Componet화하고 Map을 사용하여 반복할 수 있다.

function App() {
let [product, product변경] = useState(products);
return(
          <div className="row">
           {product.map((a, i) => {
            return <Card product={product[i]} key={i} />;
           })}
         </div>
     		 )}
             
function Card(props) {
  return (
    <div className="col-md-4">
      <img src={props.product.src} width="100%" />
      <h4>{props.product.title}</h4>
      <p>{props.product.price}</p>
    </div>
  );
}

이렇게 되면 i번째 Card에는 product[i]의 데이터를 전송하기 때문에 일일이 순서를 적지 않더라도 데이터의 갯수만큼 상품목록들을 보여줄 수 있게 되어 코드도 짧아지고 수정이 많이 일어나는 경우에 편리하겠다는 생각이 들었다.

Route

이전까지는 여러개의 페이지를 만든다고 하면 여러개의 HTML파일을 생성했지만, React-Router를 통해 각각의 페이지마다 다른 HTML 파일을 보여주는게 아니라 HTML 내부의 내용을 갈아치워서 다른 페이지처럼 보여줄 수 있게 된다. 사용법은
1. react-router-dom이라는 공식 라이브러리를 설치하고
2. index.js에 아래 코드 입력 (HashRouter도 있음.)

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

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

3. App.js에 Route를 Import하고 페이지 나누기

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

function App(){
  return (
    <div>
      HTML 잔뜩있는 곳 
      <Route exact path="/"> 
        <div>메인페이지</div> (Component도 들어갈 수 있음.)
      </Route>
      <Route path="/detail">
        <div>상세페이지</div>
      </Route>
    </div>
  )
}

뒤로가기 버튼 만들기

페이지 나누는것 말고도 Link, History, Switch등을 통해서 다양한 동작들을 구현할 수 있었다. 그러면 쇼핑몰에서 상세페이지로 이동 후 뒤로가기 버튼을 만들려면 어떻게 해야될까.

import { Route, Link, Switch } from 'react-router-dom';
import { useHistory } from 'react-router-dom';

function App(){
let history = useHistory();
  return (
    <div>
      HTML 잔뜩있는 곳 
      <Route exact path="/"> 
        <div>메인페이지</div> (Component도 들어갈 수 있음.)
      </Route>
      <Route path="/detail">
        <div>상세페이지</div>
        <button className="btn" onClick={()=>{ history.goBack() }}>뒤로가기</button> 
      </Route>
    </div>
  )
}

위와 같이 useHistory(useState와 비슷한 일종의 Hook이라고 한다.)라는 함수를 Import하고 history라는 변수안에 저장하여 사용할 수 있다. 그러면 이 history라는 변수 안에는 페이지 이동내역과 유용한 함수 등이 Object{} 자료안에 담기게 된다. 유용한 함수중 하나는 goBack()이라는 함수인데 이 함수를 실행하면 이전 페이지로 갈 수 있다고 한다. 만약 내가 이전페이지가 아니고 커스텀 페이지로 이동하고 싶다면 push()라는 함수로 위치를 지정해 줄 수 있다.
이런 라이브러리 사용법은 찾아서 읽거나 검색해봐야 알 수 있다고 하니 궁금증을 갖고 자주 검색하여 학습하는 습관을 가져야겠다.