강의 듣다가 12시가 넘은 걸 알고 부랴부랴 벨로그로 왔다.
오늘은 리액트의 가장 기본적인 개념인 컴포넌트와 JSX에 대해 글쓰고자 한다.
리액트 개발자들과 얘기하다 보면 요런 얘기를 심심찮게 듣는다.
"이건 컴포넌트 안에 컴포넌트를 넣고..."
"children으로 컴포넌트 레이아웃을 짜고 props를 넣고..."
"컴포넌트가... 어쩍저쩍..."
듣다보면 컴포넌트는 리액트의 구조를 짤 때 필요한, 기본적인 틀과 같은 느낌이 드는데..
컴포넌트란 무엇인가?
What is "Component"?
앞선 글에서 우리는 리액트가 "HTML"을 만들어주는 라이브러리라는 것을 배웠다.
그렇다면 컴포넌트도 HTML과 관련이 있을 것이다.
컴포넌트의 정의는 아래와 같다.
HTML을 생성하는 자바스크립트 함수의 모음집
그렇다. 컴포넌트는 함수이다!
다만 HTML을 직접적으로 리턴하지는 않고 보통 JSX라는 HTML과 유사한 문법을 리턴한다.
결국 HTML과 관련이 있다.
("보통"이라는 건 꼭 JSX를 리턴해야해!!!! 는 아니라는 뜻이다)
아니, 그렇다면 JSX라는 문법은 뭐길래 컴포넌트 함수가 그걸 리턴한단 말인가?
What is "JSX"?
JSX는 리액트만의 거의 유일한 문법이다.
정의는 아래와 같다.
변형된 자바스크립트로, 자바스크립트 안에 HTML처럼 보이는 소스 코드를 사용할 수 있게 해줌
JSX에는 중괄호를 사용할 수 있는데, 그 안에는 모든 자바스크립트 표현식을 넣을 수 있다.
JSX를 사용하는 목적은 다음과 같다.
자바스크립트 코드를 HTML로 만들기 위함
글을 읽으면 읽을수록 뭔 소린가 싶을 것이다.
저 목적을 이해하기 위해서는 리액트 작동 흐름을 알아야 한다.
React's Working Flow
JSX 작동 흐름은 이렇다.
- 컴포넌트가 JSX를 리턴하면
- 바벨과 웹팩이 JSX 코드를 바닐라 스크립트로 변환한다.
- 변환된 코드는 HTML로 변환되고 나서
- 컴포넌트를 렌더링 할 때 DOM으로 삽입되어 페이지에 실제로 보여진다.
- 그러면 사용자는 네이버, 다음과 같은 페이지를 볼 수 있는 것이다.
JSX의 목적은 ... 작동 흐름 1, 2, 3번 즈음과 맞물린다.
그렇다면 합리적인(!) 의문이 든다.
"아니 그럼 컴포넌트 리턴값을 그냥 바닐라 자바스크립트로 하셈. 왜 굳이 중간에 JSX가 껴?"
그 의문은 아래에서 풀린다.
간단한 예시를 들어보자.
홈페이지에 "Hi" 문구를 뜨게 해보쇼
JSX 코드는 이렇다.
export default function App() {
return (
<div>Hi</div>
)
}바닐라 자바스크립트 코드는 이렇다.
var _temporalUndefined = {};
var App = _temporalUndefined;
App = function App() {
return React.CreateElement(
"div",
null,
"Hi!"
);
};둘을 비교하였을 때 어느 쪽이 더 가독성이 좋은가?
그리고 코드양은 어느 쪽이 더 적은가?
압도적으로 JSX쪽이다.
리액트가 JSX를 만든 이유 중 하나이기도 하다.
컴포넌트는 JSX 뿐만 아니라 바닐라 자바스크립트도 리턴할 수 있다.
다만, 가독성도 안 좋고 코드양도 많아서 다들 안 쓸 뿐이다.
개발자들은 게으르기 떄문에 어떻게든 더 편리한 방법을 찾지 않는가?ㅋㅋ
오늘의 포스팅은 여기까지!
문의, 오류 지적 언제나 환영합니다 :)
