[React] 컴포넌트(Component)

컴포넌트(Component)

• 사용자 인터페이스(UI)를 구축하는 기본 요소

컴포넌트 사용 방법

1) 컴포넌트 내보내기(export default)

 

2) 컴포넌트 가져오기

• 불러오는 환경에서 상대 경로를 지정
• 기존의 컴포넌트 함수명에서 변경 가능 (default)

 

특징

• 파일명이 대문자로 시작 (UpperCamelCase 사용)
• JS의 일반 함수 형태와 구분
• rfc, rfce 스니펫 아용시 → 파일명이 함수명으로 구현
• 각 폴더의 메인이 되는 파일: index.tsx(소문자) → 컴포넌트명은 대문자로 수정

 

컴포넌트 생성

• HTML 코드 내에서 JS 문법 사용 시: 중괄호 내에 작성
• JS 코드 내에서 HTML 코드 작성 시 : 소괄호 내에 작성

(예제 코드)
export function Img() {

  return(
    <div>
      <img src={puppy01} alt="강아지" width={300} />
    </div>
  )
}