React :: Count App 2. 모듈 분리하기

1. JavaScript에서 각 파일은 모듈이라고 하고, 각 컴포넌트는 각자의 모듈에 있어야 한다 .

• app.jsx 에 있던 컴포넌트 들을 파일을 만들어 분리시켜줬다.

import './App.css';
import { Component } from 'react';
import FirstComponent from './components/learning-examples/FirstComponent';
import SecondComponent from './components/learning-examples/SecondComponent';
import ThirdComponent from './components/learning-examples/ThirdComponent';
import FourthComponent from './components/learning-examples/FourthComponent';

//컴포넌트는 각자의 모듈, 각자의 파일 안에 있는 게 이상적이다(하나의 자바스크립트 파일)
function App() {
  return (
    <div className="App">
      My Todo Application
      <FirstComponent></FirstComponent>
      <SecondComponent></SecondComponent>
      <ThirdComponent></ThirdComponent>
      <FourthComponent></FourthComponent>
    </div>
  );
}

export default App;

• 외부의 컴포넌트들을 import시켜주었다

export default function FirstComponent(){
    return(
      <div className='FirstComponent'>First Component</div>
    )
  }

• 외부에서 import 할 수 있게 export default를 써주어야 한다

import { Component } from 'react';

export default class ThirdComponent extends Component{ //클래스 컴포넌트
    render(){//렌더링 메서드 컴포넌트의 일부로 보여주고 싶은 텍스트를 반환 
            // 컴포넌트를 import하고 사용할 수 있음. 
    return(
      <div className='ThirdComponent'>ThirdComponent</div>
    )
  }
  }

• 클래스 컴포넌트는 react에서 임포트를 해주어야 에러가 나지 않는다.

export default function FirstComponent(){
    return(
      <div className='FirstComponent'>First Component</div>
    )
  }

  export function FifthComponent(){
    return(
      <div className='FirstComponent'>First Component</div>
    )
  }

• FirstComponent에 FifthComponent를 추가해주었다
• Default import 와 Named import라고 한다

• App.js에서 중괄호를 해주지 않으면 export default로 설정해준 firstComponent가 나온다

• 중괄호 안에 호출해야 내가 원하는 FifthComponent가 나옴