React는 사용자 인터페이스(UI)를 구축하기 위한 강력한 JavaScript 라이브러리로, JSX(JavaScript XML)를 사용하여 UI를 구성합니다. JSX는 JavaScript와 HTML의 조합으로, React 컴포넌트를 더 직관적으로 작성할 수 있게 해줍니다. 이 글에서는 JSX와 React 요소의 개념을 설명하고, JSX에서 조건부 렌더링을 활용하는 방법에 대해 알아보겠습니다.
1. JSX란 무엇인가?
JSX는 JavaScript XML의 약자로, JavaScript 코드 내에서 HTML과 유사한 문법을 사용할 수 있게 해줍니다. JSX는 React에서 UI를 생성하는 가장 기본적인 방법이며, HTML의 구조와 비슷한 구문을 사용하여 컴포넌트를 정의할 수 있습니다. JSX를 사용하면 UI를 작성하는 데 필요한 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다.
예를 들어, 아래와 같이 JSX를 사용하여 간단한 버튼 컴포넌트를 정의할 수 있습니다:
import React from 'react';
function MyButton() {
return <button>Click Me</button>;
}
export default MyButton;
위 예제에서 MyButton 컴포넌트는 HTML의 <button> 요소를 JSX 문법으로 정의하고 있습니다. 이렇게 정의된 컴포넌트는 다른 React 컴포넌트에서 호출하여 사용할 수 있습니다.
2. React 요소란 무엇인가?
React 요소는 React 애플리케이션의 기본 빌딩 블록입니다. React 요소는 JSX 구문으로 생성되며, 브라우저에서 화면에 렌더링될 DOM 요소를 나타냅니다. React 요소는 불변이며, 한번 생성되면 변경되지 않습니다. 새로운 UI를 만들고 싶다면 기존 요소를 변경하는 대신 새로운 요소를 생성해야 합니다.
예를 들어, 다음 코드에서는 두 개의 React 요소를 생성합니다:
const element = <h1>Hello, World!</h1>;
const element2 = <p>This is a React element.</p>;
이러한 요소는 ReactDOM.render() 메서드를 사용하여 화면에 렌더링할 수 있습니다.
3. JSX에서 조건부 렌더링
React에서 조건부 렌더링은 UI의 특정 부분을 조건에 따라 다르게 표시하는 방법입니다. 조건부 렌더링을 활용하면 사용자에게 더 나은 경험을 제공할 수 있으며, 애플리케이션의 상태에 따라 동적으로 UI를 변경할 수 있습니다. JSX에서 조건부 렌더링을 구현하는 방법에는 여러 가지가 있으며, 가장 일반적인 두 가지 방법은 “if 문”과 “삼항 연산자”를 사용하는 것입니다.
3.1 if 문을 사용한 조건부 렌더링
JSX에서 if 문을 사용하여 조건부 렌더링을 구현할 수 있지만, 이 방법은 컴포넌트 내에서 변수를 선언해야 하기 때문에 약간 복잡할 수 있습니다. 아래는 if 문을 사용하여 조건부 렌더링을 구현한 예제입니다:
import React from 'react';
function Greeting(props) {
let greetingMessage;
if (props.isLoggedIn) {
greetingMessage = <h1>Welcome back!</h1>;
} else {
greetingMessage = <h1>Please sign up.</h1>;
}
return <div>{greetingMessage}</div>;
}
export default Greeting;
위 예제에서 Greeting 컴포넌트는 isLoggedIn이라는 props를 받아 사용자의 로그인 상태에 따라 다른 메시지를 렌더링합니다. if 문을 사용하여 로그인 상태에 따라 greetingMessage 변수를 업데이트하고, 해당 변수를 JSX 내에서 사용하여 UI를 동적으로 변경합니다.
3.2 삼항 연산자를 사용한 조건부 렌더링
삼항 연산자는 더 간결한 코드 작성을 가능하게 하며, JSX 내에서 조건부 렌더링을 적용할 때 매우 유용합니다. 삼항 연산자를 사용하여 동일한 `Greeting` 컴포넌트를 구현할 수 있습니다:
import React from 'react';
function Greeting(props) {
return (
<div>
{props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
</div>
);
}
export default Greeting;
위 예제에서 props.isLoggedIn이 true인 경우 “Welcome back!” 메시지를 렌더링하고, 그렇지 않은 경우 “Please sign up.” 메시지를 렌더링합니다. 이와 같이 삼항 연산자를 사용하면 더 깔끔하고 직관적인 코드를 작성할 수 있습니다.
4. JSX에서 && 연산자를 사용한 조건부 렌더링
또 다른 방법으로는 && 연산자를 활용한 조건부 렌더링입니다. props.isLoggedIn이 true일 때만 특정 요소를 렌더링하고 싶을 때 유용합니다. 예를 들어, 로그인한 사용자에게만 “Logout” 버튼을 보여줄 수 있습니다:
import React from 'react';
function UserMenu(props) {
return (
<div>
{props.isLoggedIn && <button>Logout</button>}
</div>
);
}
export default UserMenu;
위 예제에서 로그인 상태인 경우에만 “Logout” 버튼이 렌더링됩니다. 이와 같이 && 연산자를 사용할 경우 조건이 true일 때만 다음 요소가 출력됩니다. 만약 조건이 false일 경우 아예 요소가 출력되지 않습니다.
5. 조건부 렌더링의 다양한 예제
조건부 렌더링은 사용자의 상태, 애플리케이션의 상태 등 다양한 조건에 따라 UI를 동적으로 변경할 수 있습니다. 여기서는 몇 가지 더 다양한 예제를 보겠습니다.
5.1 사용자 권한에 따른 렌더링
사용자 권한에 따라 다른 UI를 표시할 수 있습니다. 예를 들어, 관리자인 경우에만 “Admin Panel” 링크를 보여줄 수 있습니다:
import React from 'react';
function Dashboard(props) {
return (
<div>
<h1>User Dashboard</h1>
{props.isAdmin && <a href="/admin">Admin Panel</a>}
</div>
);
}
export default Dashboard;
위 예제에서 isAdmin이 true이면 “Admin Panel” 링크가 렌더링됩니다.
5.2 로딩 상태에 따른 렌더링
데이터 로딩 상태에 따라 UI를 변경하는 예제입니다. 로딩 중에는 로딩 메시지를 표시하고, 데이터가 로딩되면 해당 데이터를 표시하는 방식입니다:
import React from 'react';
function DataLoader(props) {
if (props.isLoading) {
return <div>Loading...</div>;
}
return <div>Data: {props.data}</div>;
}
export default DataLoader;
위 예제에서는 isLoading 값이 true이면 “Loading…” 메시지를, false이면 실제 데이터를 표시합니다.
결론
이번 글에서는 JSX와 React 요소, 그리고 JSX에서 조건부 렌더링의 개념과 여러 가지 구현 방법에 대해 살펴보았습니다. JSX는 React로 UI를 구축하는 데 있어 매우 중요한 요소이며, 조건부 렌더링은 사용자 상태나 애플리케이션의 상태에 따라 동적으로 UI를 변경할 수 있게 해줍니다. 다양한 조건부 렌더링 기법을 활용하여 더 나은 사용자 경험을 제공하는 React 컴포넌트를 작성해 보세요.
여러분의 React 애플리케이션에 조건부 렌더링을 적용해보며, 다양한 기능을 구현해보시기 바랍니다. Happy Coding!