React 기본 개념 이해하기, JSX의 개념과 HTML과의 차이점

1. 컴포넌트 기반 구조

React의 핵심 개념 중 하나는 ‘컴포넌트’입니다. 컴포넌트는 UI의 독립적이고 재사용 가능한 조각으로,
각 컴포넌트는 자신의 상태(state)와 속성(props)을 가질 수 있습니다. 이를 통해 UI를 작은 단위로
나누어 관리할 수 있으므로, 대규모 애플리케이션의 복잡성을 줄일 수 있습니다.

컴포넌트는 기본적으로 두 가지 유형으로 나눌 수 있습니다:

• 클래스 컴포넌트: ES6 클래스 문법을 사용하여 정의된 컴포넌트로, 상태를 가질 수 있습니다.
• 함수형 컴포넌트: 함수를 사용하여 정의된 컴포넌트로, React 16.8부터는 훅(Hooks)을 통해 상태와 생명주기 기능을 사용할 수 있습니다.

아래는 간단한 React 컴포넌트 예제입니다:

            
                import React from 'react';

                class Greeting extends React.Component {{
                    render() {{
                        return <h1>Hello, {this.props.name}!</h1>;
                    }}
                }}

                export default Greeting;
            
        

2. 상태와 속성

React에서는 두 가지 주요 개념인 상태(state)와 속성(props)이 있습니다. 두 개념은 컴포넌트의
동작을 조절하는데 중요한 역할을 합니다.

상태(state)

컴포넌트의 상태는 컴포넌트 내부에서 관리되는 데이터입니다. 상태가 변경되면 컴포넌트가 다시 렌더링되어 UI가
업데이트됩니다. 상태는 주로 클래스 컴포넌트에서는 this.state와 setState 메서드를
사용하여 관리합니다. 함수형 컴포넌트에서는 useState 훅을 사용하여 상태를 관리합니다.

            
                import React, { useState } from 'react';

                const Counter = () => {{
                    const [count, setCount] = useState(0);

                    return (
                        <div>
                            <p>Current Count: {count}</p>
                            <button onClick={() => setCount(count + 1)}>Increase</button>
                        </div>
                    );
                }};

                export default Counter;
            
        

속성(props)

속성은 컴포넌트 외부에서 전달된 데이터이며, 컴포넌트의 속성을 통해 부모 컴포넌트에서 자식 컴포넌트로
데이터를 전달할 수 있습니다. 속성은 읽기 전용이며, 자식 컴포넌트에서는 수정할 수 없습니다.

            
                import React from 'react';

                const UserProfile = (props) => {{
                    return <div>
                        <h2>Name: {props.name}</h2>
                        <p>Age: {props.age}</p>
                    </div>
                }}

                const App = () => {{
                    return <UserProfile name="John Doe" age={30} />;
                }};

                export default App;
            
        

3. JSX의 개념

JSX는 JavaScript XML의 약어로, React에서 UI를 정의하기 위해 사용하는 문법입니다.
JSX는 JavaScript 코드 안에서 HTML과 유사한 구조로 UI를 작성할 수 있게 해줍니다. JSX는
JavaScript ES6 문법을 활용하여 다양한 기능을 제공하며, React가 이를 이해하고 DOM에
렌더링할 수 있습니다. 단순한 텍스트로서는 코드를 제공하지 않기 때문에, HTML이나 XML에서는
문법 오류를 많이 발생할 수 있습니다.

JSX의 사용 예시는 다음과 같습니다:

            
                const element = <h1>Hello, World!</h1>;
            
        

위의 코드는 React.createElement를 호출하는 것과 동일합니다. 변환된 결과는
다음과 같은 형태가 됩니다.

            
                const element = React.createElement('h1', null, 'Hello, World!');
            
        

4. JSX와 HTML의 차이점

JSX와 HTML은 유사하지만 몇 가지 주요 차이점이 있습니다. JSX는 JavaScript의 일부이므로,
JavaScript 코드처럼 중괄호({})를 사용하여 동적으로 데이터를 삽입할 수 있습니다.
또한, HTML에서 사용하는 속성명과 JSX에서 사용하는 속성명이 다소 다르게 적용됩니다.

주요 차이점

• 클래스 속성: HTML에서는 class로 지정하지만, JSX에서는 className을 사용해야 합니다.
• for 속성: HTML의 for 속성은 JSX에서 htmlFor로 사용됩니다.
• Inline 스타일링: HTML의 스타일 속성은 문자열로 주어지지만, JSX에서는 객체 형태로 주어집니다.
• JavaScript 표현: JSX에서는 중괄호({})를 사용하여 JavaScript 표현식을 포함할 수 있습니다.

아래는 JSX와 HTML의 주요 차이점을 보여주는 예시입니다:

            
               // JSX 예시
               const element = <div className="container">
                    <label htmlFor="username">Username</label>
                    <input type="text" id="username" />
                </div>;
                
                / / 비슷한 HTML
                <div class="container">
                    <label for="username">Username</label>
                    <input type="text" id="username" />
                </div>
            
        

5. 결론

React는 현대의 웹 애플리케이션 개발에 매우 유용한 도구이며, 컴포넌트 기반의 구조와
상태 및 속성을 이해하는 것은 효과적인 개발을 위한 핵심 요소입니다. JSX는 UI를 더 간결하고
명확하게 표현할 수 있게 해줍니다. HTML과 JSX의 차이점을 이해하고 활용함으로써, 보다
효율적인 React 애플리케이션을 구축할 수 있습니다.

앞으로 더 깊이 있는 주제, 예를 들어 React Router, Redux, Context API 등을 다루어 볼 계획입니다.
계속해서 배우고 함께 성장해 나가길 기대합니다.