ReactJS - React Without JSX

JSX는 무엇인가요?

React Without JSX에 대해 탐구하기 전에 먼저 JSX이 무엇인지 이해해보겠습니다. JSX, 또는 JavaScript XML은 JavaScript의 문법 확장으로 HTML과 유사한 모양을 가지고 있습니다. JSX는 React와 함께 자주 사용되어 UI가 어떻게 보여야 하는지 설명하는 데 사용됩니다. 그러나 JSX는 React를 사용하기 위한 필수 조건이 아닙니다. JSX 없이도 React를 사용할 수 있으며, 이번 튜토리얼에서는 그 방법을 탐구해보겠습니다.

JSX 없이 React를 사용하는 이유는 무엇인가요?

JSX가 널리 사용된다고 해서, 왜 JSX 없이 React를 사용하고 싶을까요? 좋은 질문입니다! 몇 가지 이유가 있습니다:

1. 핵심 개념 학습: JSX 없이 React가 어떻게 작동하는지 이해하면 라이브러리에 대한 깊은 이해를 얻을 수 있습니다.
2. 빌드 도구 제한: 일부 빌드 환경은 JSX 컴파일을 지원하지 않을 수 있습니다.
3. 개인 선호: 일부 개발자는純粋한 JavaScript를 작성하는 것을 더 선호합니다.

React.createElement()를 사용하여 요소 생성

React Without JSX의 핵심은 React.createElement() 함수입니다. 이 함수는 JSX가 컴파일된 결과이므로, 우리는 중간말을 제거하는 것입니다!

간단한 예제로 시작해보겠습니다:

const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);

이 예제에서 우리는 h1 요소를 생성하고, 클래스 이름을 'greeting'으로 지정하며, 텍스트 내용을 'Hello, world!'로 설정합니다. 인자들을 하나씩 설명해보겠습니다:

1. 첫 번째 인자 ('h1')는 생성하고 싶은 요소의 유형을 지정합니다.
2. 두 번째 인자 ({className: 'greeting'})는 요소의 속성을 포함하는 객체입니다.
3. 세 번째 인자 ('Hello, world!')는 요소의 내용입니다.

이를 JSX로 작성하면 다음과 같습니다:

const element = <h1 className="greeting">Hello, world!</h1>;

JSX는 이렇게 더 간결하지만, 연습을 통해 JSX 없이 요소를 생성하는 것도 자연스워지겠습니다!

요소의 중첩

이제 약간 더 복잡한 예제를 시도해보겠습니다. div 요소에 두个子 요소를 생성해보겠습니다:

const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Welcome'),
React.createElement('p', null, 'This is a paragraph.')
);

이는 다음과 같은 구조를 생성합니다:

<div>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</div>

자식 요소를 생성하기 위해 createElement 호출을 중첩하는 것을 주목해보세요. null 인자는 필요할 경우 속성을 넣는 곳입니다.

컴포넌트 생성

컴포넌트는 React 애플리케이션의 구성 요소입니다. 간단한 기능 컴포넌트를 JSX 없이 생성해보겠습니다:

function Welcome(props) {
return React.createElement(
'h1',
null,
'Welcome, ' + props.name
);
}

이 컴포넌트를 사용하려면 다음과 같이 합니다:

const element = React.createElement(Welcome, {name: 'Alice'});

이는 다음과 같은 JSX와 동일합니다:

const element = <Welcome name="Alice" />;

이벤트 처리

React에서 이벤트 처리는 JSX와 무관하게 매우 유사합니다. 클릭 시 메시지를 로그하는 버튼을 생성해보겠습니다:

function handleClick() {
console.log('Button clicked!');
}

const button = React.createElement(
'button',
{onClick: handleClick},
'Click me'
);

여기서 우리는 handleClick 함수를 버튼 요소의 onClick 속성으로 전달하고 있습니다.

조건부 렌더링

조건부 렌더링은 JSX 없이는 약간 더 길어질 수 있지만, 여전히 가능합니다:

function Greeting(props) {
if (props.isLoggedIn) {
return React.createElement('h1', null, 'Welcome back!');
} else {
return React.createElement('h1', null, 'Please sign up.');
}
}

const element = React.createElement(
Greeting,
{isLoggedIn: true}
);

목록과 키

목록을 렌더링하려면 Array.map()을 명확히 사용해야 합니다:

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
React.createElement('li', {key: number.toString()}, number)
);

const list = React.createElement('ul', null, listItems);

여기서 우리는 여전히 key 속성을 사용하고 있으며, 이는 React의 조정 과정에 매우 중요합니다.

메서드 표

이 튜토리얼에서 다룬 주요 메서드를 요약한 표입니다:

메서드	설명	예제
React.createElement()	React 요소 생성	React.createElement('div', null, 'Hello')
Array.map()	배열 요소 변환	numbers.map(n => React.createElement('li', null, n))
React.render()	React 요소를 DOM에 렌더링	ReactDOM.render(element, document.getElementById('root'))

결론

JSX는 React 코드를 더 직관적이고 가독성 있게 만들지만, JSX 없이 React를 사용하는 것을 이해하면 하드웨어와 동일하게 더 많은 제어와 이해를 얻을 수 있습니다.

기억해 두세요, JSX를 사용하건 사용하지 않건, React의 핵심 원칙은 동일합니다. 컴포넌트, 속성, 상태, 가상 DOM 모두 동일하게 작동합니다. JSX는 단지 코딩 과정을 약간 더 달콤하게 만드는 문법 설탕일 뿐입니다!

그래서 다음 번에 React 애플리케이션을 디버깅할 때 컴파일된 코드에서 React.createElement()를 본다면, 정확히 무엇이 일어나고 있는지 알 것입니다. 행복하게 코딩하시고, React 요소가 항상 참으로 렌더링되길 바랍니다!

Credits: Image by storyset