React를 사용할 때 필수로 알아야 할 몇 가지 개념이 있습니다.
이번 글에서는 JSX 사용 시 React의 역할과 함께 알아야 할 중요한 포인트를 정리해봤습니다.
JSX를 사용할 때 React를 import해야 하는 이유
React를 사용할 때는 JSX를 작성하기 위해 React를 import해야 합니다.
재미있는 점은, 코드에서 React 객체를 직접 사용하지 않더라도 반드시 import를 해야 한다는 것입니다.
이유는 JSX가 JavaScript의 확장 문법이기 때문인데요,
결국 이 문법은 React.createElement 를 호출하는 형태로 변환되기 때문에 React 가 필요합니다.
import React from 'react';
const MyComponent = () => {
return <h1>Hello, React!</h1>;
};위 코드에서 React를 직접 사용하지 않지만, JSX를 변환하는 과정에서 React가 필요하기 때문에 import가 반드시 포함되어야 합니다.
syntactic sugar란?
위에서 언급한 JSX는 JavaScript의 syntactic sugar(문법적 설탕)입니다.
쉽게 말하면, 코드를 더 읽기 쉽게 만들어주는 문법적 도구라는 뜻이죠.
JSX를 사용하면 HTML처럼 직관적으로 UI 구조를 작성할 수 있습니다.
예를 들어 아래 두 코드는 같은 기능을 하지만, JSX가 훨씬 간단하고 이해하기 쉽습니다.
JSX 사용
const element = <h1>Hello, World!</h1>;JSX를 사용하지 않은 경우
const element = React.createElement('h1', null, 'Hello, World!');React의 역할
React는 우리가 작성한 JSX나 React.createElement로 정의한 내용을 브라우저가 이해할 수 있는 DOM 명령어로 변환해줍니다.
이렇게 React는 어떤 요소를 렌더링할지 알려주는 역할을 합니다.
예를 들어, JSX로 작성한 코드가 실제 브라우저 화면에 표시되기까지의 과정은 다음과 같습니다.
- 개발자가 JSX로 작성한 UI 구조를 React가 읽는다.
- React는 이를 브라우저가 이해할 수 있는 DOM 요소로 변환한다.
- 변환된 DOM 요소가 브라우저에 렌더링된다.
속성 예시: title 속성과 tool tip
React에서 JSX를 사용할 때, HTML의 속성을 그대로 작성할 수 있습니다.
예를 들어, title 속성을 추가하면 tool tip(툴팁) 효과를 사용할 수 있습니다.
사용자가 해당 요소 위에 마우스를 올리면 간단한 설명이 표시됩니다.
예제
const MyTooltip = () => {
return <h1 title="Hello, this is a tooltip!">Hover over me</h1>;
};위 코드를 실행하면, 화면에 <h1> 태그가 표시되고,
마우스를 올리면 "Hello, this is a tooltip!"이라는 작은 팝업이 나타납니다.
React의 핵심은 우리가 직관적으로 UI를 설계하고,
나머지 복잡한 작업은 React에 맡길 수 있다는 점입니다.
JSX와 React의 역할을 명확히 이해하면 더 깔끔하고 효율적인 코드 작성을 할 수 있습니다.
이 글을 통해 JSX와 React의 역할을 좀 더 명확히 이해할 수 있을 거예요.
추가로 포함하고 싶은 내용이나 수정 사항이 있다면 말씀해주세요!
