[React] 컴포넌트

JavaScript XML(JSX)

- HTML 보다 엄격함

- 닫는 태그가 필수

- 하나의 최상위 태그만 있어야 함

- Babel 덕분에 리액트 프로젝트에 사용 가능

    - JSX -> JS 로 변환

- 괄호를 사용하면 JSX값을 반환하기 쉬움

    return ()

- 컴포넌트 이름은 대문자로

- className을 사용

 

모든 컴포넌트는 components 폴더 아래 각각 저장하는게 모범 사례

components

- FirstComponents.jsx

- SecondComponents.jsx

...

각각 jsx 파일로 만들 때는 export를 해줘야 다른 경로에서 사용 가능 당연하게 사용하고자 하는 위치에서는 import 해야한다.

export default function FirstComponent(){
    return (
      <div className="FisrtComponent">
        FirstComponent
      </div>
    )
} 

 

 

 

import {ComponentName} -> 해당 컴포넌트에서 원하는 컴포넌트를 사용

import ComponentName -> 해당 컴포넌트에서 기본 컴포넌트를 사용

export default function FirstComponent(){
    return (
      <div className="FisrtComponent">
        FirstComponent
      </div>
    )
}

export function FifthComponent(){
  return (
    <div className="FifthComponent">
      FifthComponent
    </div>
  )
}

import FirstComponent from './components/FirstComponent'
import {FifthComponent} from './components/FirstComponent'