개발일기#1 메인페이지 및 메뉴

블로그 개발을 앞서 어떤 메뉴들을 생성하고 어떤 내용들을 다룰지 한참을 고민했다.

뭐 내용이 알차고 나뿐만 아니라 많은이들에게 도움이 될만한 사이트라면 꼼꼼히 만들겠지만 지금은 넘나 머릿속에서 뒤죽박죽+혼돈의카오스인 내용들을 정리하면서 포트폴리오에 넣어볼만한 작은 사이트를 만드는거라 한시간 넘게 고민했는데 겨우 메뉴 두개 생각해냈음 \^0^/

 

나는 우선 메인페이지 포함 세 개의 메뉴를 다루려고 한다.

 

맨 처음 대문에 들어서면 대략 이런 식의 디자인으로 보여지게 하고 싶었고, 이 내부는 왼쪽 헤더는 고정인 상태로 우측에서만 스크롤이 가능하게 하려고 했다.

 

따라서 컴포넌트 폴더를 따로 만들고 드디어 컴포넌트를 각각 나눠서 사용해보는 것이 내 첫 번째 목표라고 할 수 있다.

리액트로 넘어오면서 맨 처음에 헷갈렸던 것이 바로 컴포넌트, 스테이트 이런 개념들이었는데 하나의 html 파일에서 메인 페이지를 다 짜는 것만 연습했던터라 모든 내용을 쿠키 조각내듯 다 쪼개고 그걸 각각의 파일에서 관리한 다음 하나의 js 파일에서 합친다는 개념이 너무 헷갈렸다.

 

특히 어떤 인강을 듣더라도 이거 하다가 저거 하다가 좀 그런 편이라서 (개념마다 설명을 해야하는 부분이 다르니까!) 

내 머릿속도 계속해서 내용이 팝콘 튀듯 이리저리 튀어다니는 느낌이었다. 

적절한 때에 잘 써야하는데 그 때도 잘 모르겠공 ㅠㅠ

 

물론 컴포넌트 많이 만들면 관리 힘들고 어쩌구 꼭 그렇게 안해도 되는데 어쩌구 이럴 수 있겠다만..

기왕 배운거 배운 개념 잘 활용해서 써먹어보자는게 목표였기 때문에 (그리고 너무 어려워서 하기 싫다는 생각을 넘 많이 했음) 나와의 싸움이다 생각하고 하는 중이다.

 

components라는 폴더 생성 후 그 안에 Diary라는 컴포넌트와 Works라는 컴포넌트를 만들었다.

import React from 'react';

function Works(){
    return(
        <>

        </>
    )
}

export default Works

 

까먹지 않고 export도 잘 했공..

App.js파일에서 

 

import Diary from './compononets/Diary';
import Works from './compononets/Works';

function App() {
  return (
    <div className="App">
      
      ...헤더 및 배경 등등

      <Route path="/diary">
        {Diary}
      </Route>

      <Route path="/works">
        {Works}
      </Route>
    </div>
  );
}

요렇게 연결을 해주었다.

 

그 다음 메뉴 이동을 위해 index.js에 가서 

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

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

BrouwserRouter를 데꼬왔음!

 

라우팅을 하기 위해서 데꼬온거고 App.js에서 사용할거라 App.js를 <BrowserRouter>로 감싸주었다.

후에 다시 App.js에서 페이지 이동을 하고 싶은 애들한테 다 <Route>로 감싸주면 된다. 

Route에서 path는 어떤 주소를 입력하면 그 페이지가 보이게 하고 싶느냐 라고 하는건데 나는 가라로 걍 아무렇게나 지어줬다.

 

그런데 페이지 이동할때 누가 주소쳐서 가...?

를 해결하기 위해 메뉴 버튼에다가도 무언가를 해주어야 하는데 이 때 <Link>를 사용하면 된다.

 

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

function App() {
  return (
    <div className="App">
      
        <ul class="dMenu">
          <li><Link to="/">Uptated</Link></li>
          <li><Link to="/diary">Diary</Link></li>
          <li><Link to="/works">Works</Link></li>
        </ul>

상단에 Link를 데꼬와주고, 원하는 곳에 Link to=""로 주소랑 연결해주면 된다.

원래 html 짤 때 ul>li*3>a[href="#"] 이렇게 짰었는데 이제는 a태그를 다 Link로 쓰면 된다니..!