[React] 조각조각 땃따따 컴포넌트 만들어보기

앞서 리액트의 장점이 컴포넌트화라는 포스팅을 했다. 재사용 하기위해 컴포넌트가 중요하다고하는데 

그래서 그 컴포넌트화가 대체 무엇인지 어떻게 하는지 정리해보려고 한다. 

 

리액트에서 컴포넌트로 만들 때 이 3가지 방법을 사용한다. 

본인이 마음에 드는걸 써도 되고 회사 컨벤션을 따라가면된다. 

const Section =()=>{}
const Section = function(){}
function Section(){}

 

컴포넌트를 어디까지 해야할까??

import './App.css'

function Menu () {
  return (
      <div>
          menu
      </div>
  )
}

function Header(){
    return (
        <div>
            header
            <Menu/>
        </div>
    )
}

function Main(){
    return (
        <div>
            section
        </div>
    )
}

function Footer(){
    return (
        <div>
            footer
        </div>
    )
}

function App() {
    return (
        <div>
            <Header/>
            <Main/>
            <Footer/>
        </div>
    );
}

export default App;

이렇게 main, header, footer로 영역만 구분되어있는 것들을 파일로 분리하는 작업해보자. 

파일이 분리될때 가장 중요하다고 생각하는게 흐름이기에 정리를 꼭 해놔야 기억에 남는다. 

 

 

1. 폴더 구조부터 나누고 폴더 안에 필요한 파일들 생성

 

2.  파일명.jsx에 함수로 만들어둔 것들을 각 파일에 분리하기 

예시) Header

import './header.css'
import Menu from '../menu/Menu.jsx'

export default function Header(){
    return (
        <div>
            header
            <Menu/>
        </div>
    )
}

2-1) Main, Footer 전부 동일하게 함수를 넣은 뒤 앞에 export default 를 붙여준다. 

export default는 리액트의 문법이 아니라 자바스크립트 모듈 문법으로 밖으로 빼내서 사용할 때 쓰는 것이다. 

자세한건 아래 참고

https://ko.javascript.info/import-export

 

2-2) import가 필요한 경우 추가한다. 

 

3. pages 만들기

pages 라는 폴더 안에

hompage 폴더 만들어서 파일 추가

 

 

 

import Header from '../../components/header/Header'
import Main from '../../components/main/Main'
import Footer from '../../components/footer/Footer'
import './homepage.css'

export default function Homepage() {
  return (
    <>
        <Header/>
        <Main/>
        <Footer/>
    </>
  )
}

Homepage.jsx에 들어가야하는 파일들 import하기

이렇게 작업해주고 나면 App.jsx에서는 Homepage.jsx 하나만 연결해주면 된다.

 

4. App.jsx 가장 윗줄에 import React from 'react' 입력

명시적으로 'react를 사용하겠다'고 선언하는 것이다. 

import './App.css'
import Homepage from './pages/homepage/Hompage';

function App() {
    return (
        <div>
            <Homepage />
        </div>
    );
}

export default App;

 

이렇게 설정하고 나면 컴포넌트화 끝!

 

컴포넌트 구분하는 예제라 단순하게 표현되었지만

앞으로 코드가 늘어나고 기능 구분하기 어려워지면 굉장히 꼬일거라 예상이 된다.🤔

 

번거롭지만 컴포넌트 해야하는 이유

- 작게 쪼개면 유지보수할 때 쉽다

- 변하는 변수는 밖에 두지 말고 컴포넌트로 만들어서 가둔다

 

컴포넌트 할때 주의사항

1함수 1기능!! 기억해!! 

컴포넌트화 하다보면 하나의 함수에 여러 기능이 들어가는 즉, 크게 쪼개는 일이 생길 수 있는데 꼭 1함수 1기능을 기억해두자

 

 

소소한 정보 TMI)

컴포넌트하고 나서 node module도 지웠다. 왜?!?

node module은 해당 폴더를 실행하지 않을때 지우는거다.

만약 실행하려면 npm i로 하면된다.

 

아직 맘편하게 웃을정도로 아는건 아니지만 위의 짤들 처럼 많은 파일들이 있어서 이대로 GitHub에 올리면 절대 안된다는 정도만 알고있다. 

수업 때 지웠던 이유는 파일로 공유할 때 저 부분들을 지워야하기때문이고

대부분 GitHub에 올릴때는 .gitignore로 걸러져있다. 

 

걸러지지 않은채 올리는 사람들이 많은지 이런 짤도 돌아다닌다. 

 

 

 

 

오늘의 결론

컴포넌트화는 너무 중요하다!! 빠르게 만들 수 있도록 익혀두기!