• 목차

3.1 클래스형 컴포넌트

• 컴포넌트를 선언하는 방식은 두가지야
  • 클래스형 컴포넌트
  • 함수형 컴포넌트
• 함수형 컴포넌트의 장점은
  1. 클래스형 컴포넌트에 비해서 선언하기가 편해
  2. 메모리 자원도 덜 사용해
  3. 빌드하고 배포할 때도 결과물의 파일 크기가 더 작아 (별로 차이나진 않지만)
• 함수형 컴포넌트의 단점은
  • state와 라이프사이클 API의 사용이 불가능하다는 점이야
    • 하지만 Hooks라는 기능이 도입되면서 해결되었어
• 리액트 공식 매뉴얼에서는 함수형 컴포넌트와 Hooks를 사용하도록 권장하고있어

3.2 첫 컴포넌트 생성

• 컴포넌트 생성 순서
  1. 파일 만들기
  2. 코드 작성하기
  3. 모듈 내보내기 및 불러오기

3.2.1 src 디렉터리에 MyComponent.js 파일 생성

• MyComponent.js 파일

import React from "react";

const MyComponent = () => {
  return <div>나의 새롭고 멋진 컴포넌트</div>;
};

export default MyComponent;

3.2.3 모듈 내보내기 및 불러오기

• 모듈 내보내기(export)

  • 위 코드를 살펴보면 export default MyComponent라는 부분이 보이는데 이 코드가 다른 파일에서 이 파일을 import 할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정해줘

• 모듈 불러오기 (import)

  import React from "react";
  import MyComponent from "./MyComponent";
  
  function App() {
    return <MyComponent />;
  }
  
  export default App;
  

  • 두번째 라인이 MyComponent 컴포넌트를 불러오는 부분이야
    • 불러와서 저렇게 HTML 태그처럼 사용해주면 돼

3.3 props

• props의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있어

3.3.1 JSX 내부에서 props 렌더링

• MyComponent 컴포넌트에서 name이라는 props를 렌더링 하도록 설정해보자
• props 값은 컴포넌트 함수의 파라미터로 받아와서 사용하면 돼

import React from "react";

const MyComponent = (props) => {
  return <div>제 이름은 {props.name}입니다.</div>;
};

export default MyComponent;