[React] 리액트의 꽃, 컴포넌트 - 함수형 컴포넌트, import&export

들어가기 전..

 

React의 컴포넌트에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 현재는 대부분 함수형 컴포넌트를 사용한다. 하지만 옛날에는 클래스형 컴포넌트를 사용해 개발했기 때문에 코드를 이해하기 위해서 알아둘 필요가 있다. 다음에 클래스형 컴포넌트에 대해 공부해보는 걸로 하고! 이번 글은 함수형 컴포넌트에 대한 것이다. 

 

---

 

 

기존의 웹 프레임워크는 MVC 방식으로 정보, 화면, 구동코드를 분리하여 관리했다. 

정보는 Model이 화면은 View가 구동은 Controller가 담당했다. 

이 방식은 코드 관리를 효율적으로 할 수 있지만 각 요소의 의존성이 높아 변경이 쉽지 않았다. 

 

웹 사이트의 화면은 각 요소가 비슷하고 반복적으로 사용한다는 점을 착안하여 컴포넌트가 등장하게 되었다. 

레고를 조립하듯이 컴포넌트를 조립하여 화면을 만든다. 

 

 

 

언제 컴포넌트를 사용하는가?

• 반복 출현하는 HTML 덩어리
• 자주 변경되는 HTML UI들 (재랜더링이 자주 일어나는 것들)
• 다른 페이지 만들 때

 

BUT

• state 쓸 때 복잡 → props 써야 함

 

컴포넌트 만드는 방법

1. 컴포넌트 함수 만들고 이름 짓기
2. 축약을 원하는 HTML 내용 넣기
3. 원하는 곳에서 <함수 명/>

function App(){
	return(
		<div>
			<h2>component 만들기</h2>
			<Modal></Modal>  //Modal 컴포넌트!!
		</div>
	)
}

//컴포넌트 함수 생성
function Modal(){
	return(
		<div>
			<p>나는야 컴포넌트</p>
		</div>
	)
}

 

⚠ component 유의사항

• 이름은 무조건 대문자    (기존의 html 마트업과 구분하기 위함)

 

 

---

 

 

위의 코드는 하나의 파일 안에서 함수형 컴포넌트를 작성하고 사용하는 예시이다. 

만약 다른 파일로 분리하고 싶다면 import와 export를 이용하여 컴포넌트를 주고 받을 수 있다. 

 

 

 

 

📌 import&export를 이용하여 파일 분리하기 

 

Modal.js 파일 생성 (src 안에 Modal.js와 App.js 존재)

 

Modal.js

function Modal(){
	return(
		<div>
			<h1> ^^ </h1>
		<div>
)}

export default Modal;  // Modal Component export

 

App.js

import Modal from './modal.js';  //Modal Conponent import

function App(){
	return(
		<Modal/>
)}

 

위와 같이 다른 컴포넌트에서 사용하고 싶은 컴포넌트 밖에 export로 컴포넌트를 넘겨주고,

사용하고 싶은 컴포넌트를 경로를 통해 import로 컴포넌트를 받아온 다음 자유롭게 사용할 수 있다. 

 

 

⚠ 이때도 마찬가지로 컴포넌트의 이름은 대문자로 작성한다!

 

 

 

 

 

 

 

 

 

 

 

📖📖

오늘 자기 전까지 React Hook (클로저, 렉시컬 스코프)에 대해서 공부하고

개발 블로그에 올린 뒤 인증하겠다고 선언해서 

이전 개념들 강제 공부 및 복습하는 중 ☢