[React] Component 추가하기

이전에 만든 거에 이어서 Component 추가하려고 함.

 

1. Components 폴더 내에 NavComponents.js 파일 만들기

import React from "react";

const pathList = [
    {name: 'Main', linkName: 'MainView'},
    {name: 'Sub', linkName: 'SubView'}
]

let nowLink = 'MainView';

const NavComponent = () => {
        return (
            <div id="nav">
                {
                    pathList.map((el, index) =>
                    <div className={nowLink === el.linkName ? 'nav-path-none-click' : 'nav-path'}
                        key={index} onClick={()=>{ console.log(`Click Page's Index : ${index}`) }}
                    >
                        {el.name}
                    </div>)
                }
            </div>
        )
}

export default NavComponent;

 

2. App.js에 Component 추가

import './styles/App.scss';
import NavComponent from './components/NavComponent'

function App() {
  return (
    <div className="App">
      <NavComponent/>
    </div>
  );
}

export default App;

 

완성!

다음엔 라우터 추가해야함.

끝!