react 스터디에서 리액트를 다루는 기술이라는 책을 선정했고 이 책을 읽고 배운 것을 바탕으로 작성되었다.

📌 컴포넌트란?

• 렌더링할 React element를 반환하는 재사용 가능한 선언체이다.
• props와 state를 관리하며 화면에 보여지는 기본 단위
• 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에 생김새와 기능들을 정의한다.

📙 컴포넌트 종류

• 컴포넌트를 선언하는 방식에 두 가지가 있다. -> 함수 컴포넌트, 클래스 컴포넌트

클래스형 컴포넌트

• 클래스형 컴포넌트는 함수 컴포넌트와 달리 state기능 및 life cycle method를 사용할 수 있다.
• render 메서드가 꼭 있어야 하고 그 안에서 보여줘야 할 JSX를 반환해야 한다.

함수형 컴포넌트

• 클래스형 컴포넌트보다 선언하기 편하다.
• 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.
• 주요 단점은 state와 life cycle method를 사용하지 못하는 점이지만, v16.8 업데이트 이후 Hooks이라는 기능이 도입되면서 해결되었다.
• 완전히 클래스 컴포넌트와 똑같이 사용할 수 있는 것은 아니지만, 조금 다른 방식으로 비슷한 작업을 할 수 있게 되었다.
• 리액트 공식 매뉴얼에서는 함수 컴포넌트와 Hooks를 사용하도록 권장하고 있다.

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

모듈 내보내기

export

const MyComponent = () => {
    return <div>new component</div>;
}
export default MyComponent;

모듈 불러오기

import

import MyComponent from "./MyComponent";

const App = () => {
    return <MyComponent/>;
}

export default App;