react 기법 1 - 한 component 로 모으기

<x> </x> 이를 컴포넌트라 지칭.

https://www.youtube.com/watch?v=N3AkSS5hXMA 

 

그럼, 어떻게 깔끔하게 코딩이 가능할까.

 

우선 당장 import 부분을 깔끔하게 하는 법에 대해 기록해보겠다.

 

src > App.js

import React from "react";

import Home from './pages/Home.js';
import Skills from './pages/Skills.js';
import Projects from './pages/Projects.js';
import About from './pages/About.js';
import Contact from './pages/Contact.js';

function App() {
  return (
    <div>
      <h1>Hello!</h1>
        <Home />
        <Skills />
        <Projects />
        <About />
        <Contact />
    </div>
  );
}

export default App;

분명 이성은 '저걸 깔끔하게 분명 할 수 있는데...방법을 모르겠네' 였는데, 우연찮게 정리가 된 코드를 발견했다.

그렇게 적용 한 것이 다음의 코드이다.

import React from "react";

import { Home, Skills, Projects, About, Contact } from './pages';

function App() {
  return (
    <div>
      <h1>Hello!</h1>
        <Home />
        <Skills />
        <Projects />
        <About />
        <Contact />
    </div>
  );
}

export default App;

자세히 보면 './pages'; 로, designated directory가 한 곳으로 일괄 적용되어 가리키고 있다.

이를 위해 선행 되어야 할 작업이 필요하다. 무엇일까?

 

pages 폴더 내부에, index.js 라는 파일을 추가로 생성해서, 이를 묶어주는 코딩 작업을 하는 것이었다.

index.js 를 그렇게 쓰도록 react 라이브러리 내부에서 설계가 되어 있으리라고는 몰랐으니, 할 수 없었던 것이었다.

 

바로 이렇게.

src > pages > index.js

import Home from './Home';
import Skills from './Skills';
import Projects from './Projects';
import About from './About';
import Contact from './Contact';

export { Home, Skills, Projects, About, Contact };

알고나면 허무한 react 의 그룹핑. 그래도 이젠 할 수 있지 않겠는가? 적용 해 보길 바란다.