React Component 생성 및 활용(export / import)

컴포넌트의 가장 큰 장점은 재사용성이다. 또한, 이 재사용성을 바탕으로 유지보수까지 편리해진다는 장점이 있다.

여러 페이지에서 유사한 형태와 기능을 가진 요소를 하나의 컴포넌트로 관리하면 더욱 간결하게 코드를 작성할 수 있으며, 공통 수정사항이 발생했을 때 수정하기 쉬워진다.

 

컴포넌트 생성 방법

html 대신 사용되는 컴포넌트는 아래와 같은 규칙을 가지고 생성된다.

1. 파일명: 파스칼 케이스(PascalCase)로 생성
2. 확장자: .js, .jsx, .tsx 중 선택
3. 컴포넌트를 export 하기 위한 컴포넌트명은 일반적으로 파일명과 동일하게 한다. 
4. 함수 안에 return (); 을 작성하고, 소괄호 안에 JSX 문법을 작성하는데, 이때 주의할 점은 최상위에는 딱 하나의 태그만 올 수 있어 보통 div로 묶어주거나 <></>와 같은 pragment라 불리는 빈 태그로 묶는다.
5. export 필수
   • export default 함수명 : 하나의 컴포넌트만 내보낸다는 의미
   • export { 함수1명, 함수2명 } : 여러개의 컴포넌트를 내보낸다는 의미

[예시]

// Component.tsx
const Component = () => { // 화살표 함수 혹은 함수 선언문으로 작성
	retunr (
    	<div>Component</div> // JSX 작성
    );
};

export default Component; // 함수명(컴포넌트명)

 

 

 

컴포넌트 사용 방법 (import)

css, img 등을 연결하듯 import를 해주면 된다.

export 방식에 따라 import도 달라진다.

• export default로 내보낸 컴포넌트: import 컴포넌트명 from "파일경로";
• export {}로 내보낸 컴포넌트: import { 함수1명, 함수2명 };

연결한 컴포넌트는 필요에 따라 <컴포넌트명 /> 혹은 <컴포넌트명></컴포넌트명> 중 선택하여 사용 가능하다.

// App.tsx에 Component.tsx import
import Component from "./Component";

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

export Default App;