웹개발/React
[React] 컴포넌트
뎁쭌
2023. 12. 12. 17:44
728x90
반응형
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'