컴포넌트(Component)- 사용자 정의 태그

컴포넌트 (Component): 사용자 인터 페이스(UI) 구축하는  기본 요소 

      -사용 방법-

1.  컴포넌트 내보내기 - export default
2. 컴포넌트 가져오기  - 불러오는 환경에서 상대경로를 지정                                                                                                >> 기존의 컴포넌트 함수명에서 변경가능 

       -특징 -

• 파일명이 대문자로 시작해야 된다!!!(UpperCamelCase 사용)
• >> JS의 일반 함수 형태와 구분한다
• >> 파일명이 함수명으로 구현한다 
• >> 각 폴더의 메인이 되는 파일 :index.tsx -> Index.tsx로 수정해야 된다.
• 코드 양이 줄어든다 
• 유지 보수하기가 쉽다 

컴포넌트 에 대한 사진

Props : 속성  -즉 쉽게 말해서 지시사항이라고 생각하면 좋겠다  -l일기 전용이라서 수정 안된다.

State : 컴포넌트의 state객체에 대한 업데이트를 실행한다

 

 

종류 : 클래스형 컴포넌트, 함수형 컴포넌트

 

클래스  컴포넌트- 주로 사용하지 않는다.  왜냐하면 extends (상속)을 해줘야 하니깐

import React, { Component } from "react";

class AppClass extends Component {// 클래스 컴포넌트 선언 
  render() {
    return <div>Class</div>;
  }
}

export default AppClass;

 

함수형 컴포넌트 :  자수사용하고, 함수 호출으로 인해 재사용 간편한다.

function Component01() {//함수형 컴포넌트 
  // 컴포넌트 사용 시 함수 컴포넌트 명으로 태그 작성
  // : 대문자로 시작!
  
  //? JSX 컴포넌트 사용 시
  // 마크업(태그)이 한 개인 경우 () 소괄호 생략 가능
  // , 여러 개일 경우 반드시 소괄호로 감싸서 사용

  return (
    <div>
      <h1>Component01 컴포넌트의 시작</h1>
      {/* img 태그 - HTML 기본 태그 */}
      {/* <img src={puppy01} alt="강아지" width={100} /> */}

      {/* Img 컴포넌트 - 사용자 정의 태그 */}
      <Img />
    </div>
  )
}

export default Component01

클래스처럼 굳이 상속을 할 필요 없다.