기본 튜토리얼 - React와 JSX 간단히 이해하기
이전 문서: 기본 튜토리얼 - React와 JSX 간단히 이해하기 게시일: 2023-7-9 마지막 수정: 2025-4-25 원래 분류: ⌨ 개발 튜토리얼 태그: ReactJS
서문
프론트엔드 개발자라면 Vue, AngularJS, React를 자주 들어봤을 것입니다. 특정 프레임워크 비교는 여기서 자세히 다루지 않습니다. 관심이 있다면 여러 기술 프레임워크의 차이를 따로 찾아보면 됩니다.
이 글은 React 개발이 전통적인 HTML 개발과 어떻게 다른지에 초점을 맞춥니다. 기본 차이를 이해하면 개발 과정에서 많은 실수를 줄일 수 있습니다.
React의 JSX와 일반 HTML 웹페이지 개발에는 다섯 가지 차이가 있습니다. 문법, 동적 렌더링, 컴포넌트화, 데이터 바인딩, 생태계입니다.
1. 문법 차이
JSX는 JavaScript의 문법 확장입니다. JavaScript 코드 안에서 HTML과 비슷한 마크업을 직접 사용해 UI 컴포넌트를 설명할 수 있습니다. 반면 일반 HTML은 독립적인 마크업 언어입니다.
JSX 코드 예시:
const element = <div style={{backgroundColor:"black"}} className="my-class">Hello, world!</div>;HTML 코드 예시:
<div style="background-color:black;" class="my-class">Hello, world!</div>2. 동적 렌더링
React에서는 JSX를 통해 UI 컴포넌트를 동적으로 생성할 수 있습니다. 일반 HTML에서는 페이지 구조가 정적이며 동적 렌더링을 직접 지원하지 않습니다.
JSX 코드 예시:
function App(props) {
return <h1>Hello, {props.name}!</h1>;
}
ReactDOM.render(
<App name="Alice" />,
document.getElementById('root')
);HTML 코드 예시:
<!-- Static HTML code -->
<h1>Hello, Alice!</h1>3. 컴포넌트화
React에서는 UI 컴포넌트를 작고 재사용 가능한 컴포넌트로 나누고, 이를 조합해 복잡한 UI를 구성할 수 있습니다. 일반 HTML에는 컴포넌트와 비슷한 개념이 없으며, 페이지 구조는 보통 정적 HTML 파일 형태로 존재합니다.
JSX 코드 예시:
/**
* Button component
**/
function Button(props) {
return <button onClick={props.onClick}>{props.label}</button>;
}
/**
* Root node layout
**/
function App() {
return (
<div>
<Button label="Click me" onClick={() => alert('Clicked!')} />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);이 Button 컴포넌트는 다른 레이아웃이나 컴포넌트 안에서 원하는 만큼 반복해 사용할 수 있습니다.
HTML 코드 예시:
<!-- HTML code without components -->
<div>
<button onclick="alert('Clicked!')">Click me</button>
</div>4. 데이터 바인딩
React에서는 데이터 바인딩을 통해 컴포넌트 상태와 UI 표시를 연결하고 UI를 자동으로 갱신할 수 있습니다. 일반 HTML에서는 DOM 노드를 수동으로 업데이트해야 UI가 변경됩니다.
JSX 코드 예시:
/**
* Counter component
*/
function Counter() {
const [count, setCount] = useState(0);
/**
* Handle click
*/
function handleClick() {
setCount(count + 1);
}
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Increment</button>
</div>
);
}
ReactDOM.render(
<Counter />,
document.getElementById('root')
);HTML 코드 예시:
<!-- HTML code without data binding -->
<div>
<p id="count">Count: 0</p>
<button onclick="increment()">Increment</button>
</div>
<script>
function increment() {
const countElement = document.getElementById('count');
const count = parseInt(countElement.innerText.split(':')[1].trim());
countElement.innerText = 'Count: ' + (count + 1);
}
</script>5. 생태계
React는 방대한 생태계를 가지고 있습니다. 많은 서드파티 라이브러리와 도구를 통해 컴포넌트 개발, 상태 관리, 라우팅 제어 등을 편리하게 처리할 수 있습니다. 일반 HTML 개발에서는 이런 기능을 구현하려면 많은 JavaScript 코드를 직접 작성해야 할 수 있습니다.
정리하면 React의 JSX는 일반 HTML 웹페이지 개발보다 더 유연하고 효율적이며 유지보수가 쉽습니다. 크고 복잡한 웹 애플리케이션을 구축하는 데 적합합니다.