안녕하세요, Will입니다.
오늘은 React의 컴포넌트에 대해 파헤치는 시간입니다.
컴포넌트가 무엇인지, 왜 중요한 지에 대해 이론적으로 접근해보고
그걸 가능하게 해주는 리액트의 기능은 무엇인지에 대해 알아보겠습니다.
다음 포스팅에선 실제 컴포넌트를 사용하는 방법에 대해 설명해보겠습니다.
컴포넌트란?
왜 리액트는 컴포넌트라는 핵심 개념 하나로 설명이 될까요?
그건 리액트로 개발하는 모든 것이 컴포넌트이기 때문이에요.
모든 것이 컴포넌트다
아래 TodoList 이미지를 봐주세요.
위 예제는 제가 React로 만들어본 TodoList 예제입니다.
포스트 잇이 붙어있는 학교 게시판을 모티브로 만들었어요.
맨 위에 제목이 있고, 아래엔 포스트 잇이 다닥다닥 붙어있는 모습이에요.
혹시 이미지에 표시한 빨간 박스가 보이시나요??
빨간 박스 친 부분은 하나의 포스트 잇을 나타내고, 비록 담겨있는 텍스트는 다르지만
이러한 포스트 잇이 동일한 모습으로 반복해서 화면에 표시되고 있죠??
일반적으로 위와같이 반복적으로 사용되는 부분을 컴포넌트로 만들게 됩니다.
저는 포스트잇 하나를 Post.jsx라는 컴포넌트로 만들었습니다.
저는 포스트잇을 하나의 컴포넌트로 개발하였으나
위 이미지의 게시판 전체를 하나의 컴포넌트로 만들 수도 있고,
작게는 버튼 하나, 문구 하나를 컴포넌트로 만들 수도 있습니다.
즉 모든 개발 단위를 컴포넌트로 만들 수 있고,
그래서 리액트에서 개발한 모든 것은 컴포넌트라고 할 수 있게 됩니다.
좀 더 자세히 살펴보겠습니다.
컴포넌트는 재사용 가능한 웹 프론트 덩어리이다
모든 컴포넌트는 재사용이 가능합니다.
재사용이 가능하면 코드를 더 작은 단위로 관리할 수 있게 됩니다.
프로그래밍에서는 작은 코드 단위로 재사용하는 것들이 기존에도 이미 존재하고 있었어요.
자바스크립트에서는 함수, 변수 등이 있습니다. 물론 그 외에도 어마어마하게 많습니다.
리액트는 이러한 함수, 변수 등의 재사용 개념을 웹 프론트에 적용시킨 겁니다.
그것도 아주 쉽게 사용할 수 있게 말이죠.
예시에서는 Post 컴포넌트라는 웹 덩어리를 재사용하고 있습니다.
웹 덩어리..? 갑자기 이상한 표현이 나왔는데요,
웹 덩어리를 표현해줄 다른 단어를 아래에서 더 살펴보도록 할게요.
컴포넌트는 사용자 지정 HTML이다
아까 예시로 들었던 코드를 다시 보겠습니다.
위 예제에서 Post 컴포넌트는 Post라는 하나의 함수(function)로 구성되어 있는데요,
(그래서 위와같이 개발된 컴포넌트를 함수형 컴포넌트라고도 합니다. 참고로 컴포넌트는 자바스크립트의 클래스를 사용해서도 개발이 가능하고 그러한 컴포넌트를 클래스형 컴포넌트라고 부르는데요, 요즘은 함수형 컴포넌트로 개발하는 것이 대부분이에요. 개발이 좀 더 쉽거든요.)
Post 함수의 Return 값을 보면 HTML과 비슷한 코드가 들어가 있죠? 이러한 코드를 JSX라고 합니다.
JSX는 Javascript 내부에 작성된 HTML로, 리액트 팀에서 고안한 리액트 개발 문법이에요.
위에서 언급한 '웹 덩어리'는 사실 JSX 덩어리인 것이죠.
JSX의 문법 등에 대해선 상세히 다룬 포스트가 있으니 참고해주시면 될 것 같고요,
2022.12.07 - [React] - [React] JSX란 대체 무엇인지? JSX 정의 및 문법 파헤치기
컴포넌트로 돌아와서,
결국 컴포넌트는 JSX라는 Javascript 코드에 포함된 HTML을 리턴하게 되므로,
컴포넌트는 사용자가 직접 만든 사용자 지정 HTML이라고 볼 수 있는 겁니다.
그래서 컴포넌트는 HTML 태그와 사용 방법이 비슷합니다.
아래에서 살펴보겠습니다.
컴포넌트를 가능하게 한 건 import, export이다.
예시를 통해 Post라는 컴포넌트를 보았는데요,
이러한 컴포넌트의 구체적인 사용방법에 대해 알아보겠습니다.
아래 코드는 기존에 보여드렸던 Post 컴포넌트와 Post 컴포넌트를 사용하고 있는 PostList 컴포넌트 입니다.
Post 컴포넌트를 보면 export default Post 라는 코드를 통해 Post 컴포넌트를 내보냈고,
PostList에서 import Post from './Post'라는 코드를 통해 Post 컴포넌트를 가져와 사용하고 있습니다.
import로 가져온 컴포넌트는 HTML 태그와 같이 사용할 수 있습니다. <Post /> 와 같은 형태입니다.
예시의 코드는 Post 태그에 key, id 등의 속성 등이 추가로 적혀있는데요, 이러한 컴포넌트의 속성을 props라고 하는데, HTML과 같은 속성이 아니고 Post 컴포넌트로 전달하는 데이터 입니다. 이 포스팅에서는 다루지 않을 거에요.
이와 같이 리액트는 export, import를 사용하여 컴포넌트를 재사용할 수 있게 해줍니다.
예를 들어 A라는 파일의 기능을 B라는 파일에서 사용하기 위해선
A 파일의 기능을 export하고, B라는 파일에선 해당 기능을 import해야 합니다.
즉 Post.jsx라는 파일에서 Post라는 함수형 컴포넌트를 export하고,
PostList.jsx라는 파일에서는 Post 컴포넌트를 import하여 사용할 수 있게 되는 거죠.
export를 사용하는 방법은 내보내고자 하는 함수, 객체 코드 앞에 export를 붙이면 되구요,
import는 import 'import 대상(함수, 객체 등)' from 'File 경로'와 같이 사용하시면 됩니다.
그런데 이러한 import, export 코드는 브라우저에서 직접 사용하면 에러를 유발하게 돼요.
그렇지만 리액트 앱을 실행시켜보면 크롬, 엣지 등의 브라우저에서 정상 동작하게 되는데요,
그건 import, export를 자유로이 사용하게 해주는 리액트 배후의 무언가가 있기 때문입니다.
아래에서 무언가가 뭔지 살펴보겠습니다.
import, export를 가능하게 한 건 번들러다
리액트 프로젝트 설치 방법으로는 대표적으로 CRA(Create-React-App)이 있습니다.
CRA 시 설치되는 기능들 중 webpack이 있는데요,
이 webpack이 import, export를 자유로이 사용할 수 있게 해주는 '배후의 무언가'입니다.
Webpack이란
webpack은 번들러라는 것인데요, 오늘 우리가 파헤쳐본 컴포넌트는 사실 하나의 모듈이에요.
webpack은 이러한 모듈을 하나의 파일로 묶어주는 역할을 해요. (bundle.js)
이렇게 파일을 하나로 묶는 것을 '번들링'이라고 하고,
번들링을 수행하는 webpack과 같은 도구들을 '번들러'라고 합니다.
이 포스팅에선 webpack이 하나의 파일로 묶어주기에 import, export를 통해 컴포넌트를 각각의 파일에서 자유로이 사용할 수 있구나~ 하는 정도로 이해하시면 됩니다.
정리
이번 포스팅에서는 컴포넌트의 핵심 개념을 알아보았습니다.
리액트에서 컴포넌트는 정말 중요한 개념이니 꼭 기억해두도록 합시다.
아래는 요약입니다.
1. 리액트로 개발한 모든 것이 컴포넌트가 될 수 있다.
2. 컴포넌트는 재사용 가능한 웹 덩어리(JSX)이다.
3. 컴포넌트는 사용자 지정 HTML이다.
4. 컴포넌트는 import, export를 통해 각각의 파일에서 자유로이 사용할 수 있다.
5. 4를 가능하게 해준 것은 webpack과 같은 번들러가 파일을 하나로 묶어준 덕분이다.
긴 글 읽어주셔서 감사합니다.
'React' 카테고리의 다른 글
| Create React App(CRA) 파헤치기. CRA 사용법과 폴더구조 총정리!! (1) | 2023.10.04 |
|---|---|
| [React] JSX란 대체 무엇인지? JSX 정의 및 문법 파헤치기 (0) | 2022.12.07 |