Component

• 화면에 표시되는 하나의 요소 단위
• 각각의 독립적인 상태와 로직을 가지고 있음
• 클래스형 컴포넌트, 함수형 컴포넌트
• 클래스형 컴포넌트는 이제 사용되지 않음

Component 선언 방법

1. Class Component

- class로 컴포넌트 작성
- 반드시 첫글자는 대문자
- react 패키지의 component 클래스를 상속하여 구현
- render()메서드의 반환값으로 렌더링 하고자 하는 요소를 반환

Syntax

//경로 src/component/component.tsx
import React from "react";

export class 클래스명 extends React.Component{
	render(): React.ReactNode{
		return(
			<h1>클래스형 컴포넌트</h1>
		)
	}
}

//경로 src/App.tsx
import React from 'react';
import './App.css';
import { ClassComponent } from './component/Component' [component.tsx 추가]
function App() {
	return (
		<div className="App">
			<ClassComponent /> [component에서 클래스를 호출 < 클래스명 />]
		</div>
	);
}

export default App;

• 클래스로 생성하다 보니 생성자로 생성하고 변수에 담아줘야 하고 귀찮음과 여러 가지 문제가 발생

2. function component

-  함수로 컴포넌트를 작성
- 반드시 첫글자를 대문자로 작성해야 컴포넌트 함수로 인식
- 함수의 반환값으로 렌더링 하고자 하는 요소를 반환   

Syntax

//경로 src/component/component.tsx
export function FuctionComponent(){
	return(
		<h1>함수형 컴포넌트</h1>
	)
}

//경로 src/App.tsx
import React from 'react';
import './App.css';
import { ClassComponent, FunctionComponent } from './component/Component'
function App() {
	return (
		<div className="App">
			<ClassComponent />
			<FunctionComponent />
		</div>
	);
}

export default App;

vscode 확장 React-Native snippets를 이용하면 좀 더 편리하게 생성 가능

---

함수형 컴포넌트의 return()

• 함수형 컴포넌트의 return은 해당 컴포넌트가 렌더링할 요소를 반환

• HTML 처럼 보이지만 HTML이 아님

• 여러가지 자바스크립트 연산자를 사용할 수 있음

• 반드시 하나의 요소만 반환 가능(0개 X, 2개 이상 X)

• 반드시 return 바로 뒤에 반환값이 있어야 함

• 한 개의 요소만 반환 할 때 밑에 처럼도 가능하고 ( )를 이용하여 작성도 가능

export default function Component(){
	return <div>Function Component</div>
	}

• 다수의 요소를 반환 할 때 최상단에 부모 요소로 묶어줘야함

//Error div라는 요소가 두개를 반환 하기 때문에 부모요소가 필요하다라고 오류 발생
export default function Component(){
	return (
		<div>Function Component</div>
		<div>Function Component</div>
	)
	}

-> 해결

//Error div라는 요소가 두개를 반환 하기 때문에 부모요소가 필요하다라고 오류 발생
export default function Component(){
	return (
		<div>
			<div>Function Component</div>
			<div>Function Component</div>
		</div>
		)
	}

But div라는 태그가 감싸고 있기 때문에 추후 레이아웃을 잡거나 작업중 원하지 않는 결과를 유발
-> 의미 없는 태그를 추가 해서 해결

//Error div라는 요소가 두개를 반환 하기 때문에 부모요소가 필요하다라고 오류 발생
export default function Component(){
	return (
		<>
			{/* <input className= ' '/>*/}
			<div>Function Component</div>
			<div>Function Component</div>
		</>
		)
	}

• 해당 "<> </>" 를 추가할 시 의미 없는 태그가 생성되어 추후 구문을 작성 하는데 문제가 없다