[React] 컴포넌트 만들기

1. 컴포넌트

---

컴포넌트는 리액트의 필요 핵심 요소다.

사용자 인터페이스(UI)를 기반하는 블록이라고 생각하면 편리하다.

 

<article>
	<h1>Minda<h1>
    <ul>
    	<li>Markup represets<li>
        <li>Table of contents<li>
        <li>Your markup<li>
    </ul>
</article>

본래의 vanilla JS는 이런 식의 마크업을 통해 JS는 사이드바, 아바타, 모달 등을 구현할 수 있었다.

마크업
규칙을 정의한 언어로, 태그로 둘러 싸여 있는 언어들을 일컬음.
HTML 역시 마크업 언어의 한 종류

---

반면 리액트는 마크업, CSS, JS를 모두 커스텀하여 재사용 가능한 UI 요소인 컴포넌트를 사용할 수 있다.

내부적으로는 여전히 <article>, <h1>과 같은 HTML 태그를 사용한다.

 

vanilla JS의 경우 개발자는 JavaScript를 덧입혀 상호작용을 추가했으나

React는 컴포넌트는 마크업을 흩뿌린 자바스크립트 함수 그 자체다.

 

2. 필요성

---

이러한 컴포넌트의 재사용성은 개발의 규모가 커질 수록 빛을 발한다.

수많은 오픈 소스로 프로젝트를 바로 시행할 수 있을 뿐 아니라, 개발 속도에도 엄청난 진척을 준다.

 

UI의 부분 요소를 통해 개별적으로 생각할 수 있는 점 역시 편리함을 상승시킨다.

 

그러다보니 vanilla JS로는 개발을 못하는데 리액트로는 가능한 경우도 종종 있다고...

 

3. 사용법

---

컴포넌트는 클래스도 지원되지만, 함수로 만드는 것이 좋다.

컴포넌트는 UI를 독립적이고 재사용 가능하게 만든다.

 

React는 소문자로 시작하는 컴포넌트는 DOM tag로 인식한다. <div />
따라서 사용자 정의 컴포넌트는 모두 대문자로 시작해야한다. <Avatar />

컴포넌트는 출력에서 다른 컴포넌트를 참조할 수 있다.

이 경우, 리액트에서 사용할 수 있도록 export default를 붙여주어야한다.

export default function Minda() {
	return ( 
    <>
    
    </>
    );
}

컴포넌트를 사용하려는 컴포넌트 안에서는 그 의미를 명시해주어야한다.

function AddMinda() {
	return (
    <>
    	<Minda />
    </>
    );
}

export default AddMinda;

이를 통해 버튼, 양식, 대화상자 등 React 앱의 모든 것을 컴포넌트로 표현할 수 있다.

export default는 function 앞에 붙여도 되고 말미에 붙여도 된다.

 

4. 주의

---

컴포넌트는 다른 컴포넌트에 반환 형식으로 중첩될 수 있다.

function Minda() {
	return (
    	<img
        	src="https://cdn.pixabay.com/photo/2023/01/26/10/46/cat-7745585_1280.jpg"
            alt="pixabay"
        />
    );
}

export default function AddMinda() {
	return (
    	<div>
  		  <Minda />
  		  <Minda />
  		  <Minda />
    	</div>
    );
}

하지만, 정의 자체를 중첩해서는 안된다.

export default function AddMinda() {
	// ❌❌❌ 절대 정의 중첩 금지 ❌❌❌
	function Minda() {
    
    }
}

---

cf. 

Components and Props – React