Component가 뭔데?
리액트에서 컴포넌트가 무엇인지 강의하는 리액트로 만들어진 udemy 사이트의 컴포넌트 예시
컴포넌트는 리액트에서 사용되는 하나의 단위로, 우리 생각하는 사이드바, 헤더, 모달 등 모든 영역을 나타낼 수 있는 하나의 개념이다.
보통 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘는데, 리액트 16.8 버전 부터는 Hook이라는 개념이 도입되면서 함수형 컴포넌트 사용을 권장한다고 한다.
Component 예시
import React from 'react';
const MyComponent = () => {
return (
<div>
<input type="text" />
<input type="number" />
</div>
);
}MyComponent라는 새로운 컴포넌트를 만들었다. 특별한 이유가 없으면 컴포넌트를 함수형으로 사용한다. 우리가 만든 컴포넌트는 자바스크립트 함수라는 점을 기억하도록 하자.
여기서 주의할 점은 함수의 반환형이 우리가 흔히 쓰던 객체나 값이 아닌, HTML태그라는 점이다. 이게 어떻게 된 일일까?
JSX? 그게 뭔데 씹덕아...
HTML과 자바스크립트가 독립적으로 존재하는 기존의 형태
웹의 발전으로 인해 각자의 관심사에 따라 영역을 분리한 형태
우리는 위 코드에서 html 태그를 반환하는 신기한 형태의 함수를 보았다. 이는 JSX라고 하는 자바스크립트 구문 확장으로, 자바스크립트를 이용하여 좀 더 효율적으로 마크업을 표현하고 컨트롤하기 위해 사용되었다.
이러한 형태는 개발자가 코드를 작성할 때 좀 더 편리할 수 있도록 하고 계층형 DOM을 다룰때 편하게 해준다. 하지만 이러한 JSX는 마법이 아니다.
JSX의 작동 원리
import React from 'react';
const NewComponent = () => {
return (
<div>안녕하세요.</div>
);
};위와 같은 JSX를 가진 컴포넌트는 실제로 아래와 같이 변경되어 사용된다.
import React from 'react';
const MyComponent = () => {
return React.createElement('div', null, '안녕하세요.');
};여기서 React.createElement(type, props, children) 함수가 사용되었다. 이 함수는 JSX를 파싱하여 리액트가 읽을 수 있는 형태로 변환된 것으로 아래 정리된 내용과 같다.
| 파라미터 | 내용 | 예시 |
|---|---|---|
| type | JSX에서 사용된 루트 태그 | 'div' |
| props | JSX로 입력받은 props | {id: 13, userName: 'sucream'} |
| children | JSX 태그 사이의 내용들 | [other1, other2] |
const Component = () => {
return (
<div id=13 userName='sucream'>
<other1 />
<other2 />
</div>
);
};이런식으로 리액트는 JSX 구문을 파싱하고 재귀적으로 엘리먼트를 생성한다. 위 JSX 예시에서 Component라는 컴포넌트가 처리되기 위해서는 other1과 other2 컴포넌트가 createElement로 변환되어야 할 것이다.
JSX의 몇가지 규칙
위에서 살펴본 JSX를 보면 몇가지 특징 및 규칙이 있다. 이를 지켜야만 올바르게 JSX가 파싱되어 자바스크립트로 변환될 것이다.
1. 하나의 단일 루트를 가질 것
JSX는 React.createElement로 변환된다고 했다. 여기서 첫번째 인자는 해당 컴포넌트의 태그를 넣어야 하는데, 만약 루트가 여러개라면 해당 함수를 생성할 수 없을 것이다. 따라서 반드시 하나의 루트만 존재해야 하며, 두개 이상을 필요로 할 경우엔 아래와 같이 <> </>나 <React.Fragment> </React.Fragment>로 감싸야 한다. 물론 div로 감싸도 문제는 되지않지만 실제 돔에 필요 이상의 태그가 생길 수 있으니 주의하도록 하자.
2. 모든 태그 닫기
위에서 <other1 />나 <input type="text" />를 보면 항상 뒤에 />로 닫혀있다. 노말 HTML은 종종 태그를 닫지 않아도 정상작동 하지만, JSX는 반드시 태그를 닫아줘야 한다.
3. JSX 내부에서 자바스크립트 표현식은 {} 사용하기
JSX는 향후 HTML로 변환될 것이며, 자체 파싱 룰이 있을 것이다. 따라서 JSX 내부에서 자바스크립트 표현식을 사용하기 위해서는 {}를 사용하여야 하며, {} 사이에 자바스크립트 표현식을 사용할 수 있다.
const dataList = [
{
id: 1,
name: 'sucream'
},
{
id: 2,
name: 'react'
}
];
const myText = '리액트 재밌어';
// items는 SubComponent가 필요로 하는 props이며, JSX 내부에서 자바스크립트 객체를 넘겨야 하기 때문에 {}를 사용했다.
// myText 역시 JSX 내부에서 자바스크립트 표현식을 사용할 것이기 때문에 {}를 사용한다.
const myComponent = () => {
return (<SubComponent items={dataList}>{myText}</div>);
}4. 카멜케이스 사용
위에서 props라고 하는 인자를 넘기는 모습을 볼 수 있는데, 일반적으로 내장된 props는 카멜케이스로 정의되어있으며 기존 HTML의 프로퍼티와 혼동하지 않도록 주의해야 한다. 예를 들어 <button>이라는 엘리먼트에서 우리가 onclick 이벤트를 추가하고 싶을때, <button onclick={myClickHandler}>라고 생각할 수 있지만, 카멜케이스를 사용하기 때문에 <button onClick={myClickHandler}>라고 해야 동작한다. 또한 -로 연결되어있는 속성도 카멜케이스로 변경해야 해서 처음에 약간 헷갈릴 수도 있다.
JSX는 리액트와 독립적인 존재이며, JSX는 구문의 확장, 리액트는 자바스크립트 라이브러리다.
Reference
