JSX란?
👉JSX라 하며 JavaScript를 확장한 문법입니다.
👉JSX는 React “엘리먼트(element)” 를 생성합니다.
-React 공식문서-
JSX(JavaScript XML)는 JavaScript에서 HTML과 유사한 구문을 사용하여 UI를 구성하는 문법입니다. React와 함께 사용되며, 개발자가 컴포넌트를 더 직관적으로 작성할 수 있도록 도와줍니다.
특징 7가지
- Fragment
Fragment는 여러 요소를 그룹화할 수 있는 방법입니다. React에서 컴포넌트를 반환할 때, 여러 개의 자식 요소를 반환해야 할 경우 Fragment를 사용하면 불필요한 DOM 요소를 생성하지 않고도 이를 처리할 수 있습니다.
import React from 'react';
const MyComponent = () => {
return (
<>
<h1>제목</h1>
<p>내용이 여기에 들어갑니다.</p>
</>
);
};위의 예제에서 <>와 </>는 Fragment를 나타내며, 두 개의 자식 요소가 하나의 부모 요소에 포함되어 있습니다.
2. className
JSX에서는 HTML의 class 속성을 className으로 사용해야 합니다. 이는 JavaScript의 예약어인 class와의 충돌을 피하기 위한 조치입니다. 따라서 CSS 클래스를 지정할 때는 항상 className을 사용해야 합니다.
<div className="my-class">안녕하세요!</div>위의 코드에서 my-class라는 CSS 클래스가 div 요소에 적용됩니다.
3. HTML 태그 소문자
JSX에서는 HTML 태그를 소문자로 작성해야 합니다. 대문자로 작성하면 React는 이를 사용자 정의 컴포넌트로 인식하게 됩니다. 따라서 HTML 태그는 항상 소문자로 작성하는 것이 좋습니다.
// 올바른 예
const element = <div>Hello</div>;
// 잘못된 예 (React는 이를 사용자 정의 컴포넌트로 인식)
const element = <Div>Hello</Div>;4. HTML 태그는 항상 닫아주기
JSX에서는 모든 HTML 태그를 반드시 닫아줘야 합니다. 이는 잘못된 HTML 구조를 방지하고, JSX 코드의 가독성을 높이는 데 기여합니다. 닫는 태그가 필요한 경우, 항상 명시적으로 닫아주는 것이 좋습니다.
// 올바른 예
<p>이것은 문단입니다.</p>
<img src="image.jpg" alt="이미지" />
// 잘못된 예
<p>이것은 문단입니다.</img>5. JSX의 동적 표현식
JSX에서는 중괄호 {}를 사용하여 JavaScript 표현식을 삽입할 수 있습니다. 이를 통해 동적으로 값을 렌더링할 수 있습니다.
const name = "뤼튼";
const element = <h1>안녕하세요, {name}!</h1>;6. 스타일링 방법
JSX에서는 여러 가지 방법으로 스타일을 적용할 수 있습니다. 여기에는 인라인 스타일, CSS 파일을 통한 스타일링, CSS 모듈, 그리고 Styled Components 등이 포함됩니다.
1. 인라인 스타일
JSX에서는 HTML의 style 속성을 사용하여 인라인 스타일을 적용할 수 있습니다. 이때 CSS 속성 이름은 카멜 케이스(camelCase)로 작성해야 하며, 값은 문자열로 지정합니다.
```jsx
const element = (
<div style={{ color: 'blue', fontSize: '20px' }}>
인라인 스타일 예제
</div>
);
```
위의 예제에서 fontSize는 카멜 케이스로 작성되었고, 각각 문자열 값으로 지정되었습니다.2. CSS 파일
CSS 파일을 생성하고 이를 컴포넌트에 import하여 스타일을 적용할 수 있습니다.
/* styles.css */
.my-class {
color: red;
font-size: 18px;
}
import './styles.css';
const element = <div className="my-class">CSS 파일 스타일 예제</div>;이 방법은 스타일을 재사용하기 쉽고, CSS 파일에서 미디어 쿼리와 같은 복잡한 스타일링을 처리하는 데 유용합니다.
3. CSS 모듈
CSS 모듈은 클래스 이름을 지역화하여 같은 이름의 클래스를 다른 컴포넌트에서 충돌 없이 사용할 수 있도록 도와줍니다. CSS 파일의 이름을 [name].module.css로 지정해야 합니다.
/* styles.module.css */
.myClass {
color: green;
font-size: 22px;
}
import styles from './styles.module.css';
const element = <div className={styles.myClass}>CSS 모듈 스타일 예제</div>;이 방법은 컴포넌트 간의 스타일 충돌을 방지하고, 유지보수를 쉽게 합니다.
4. Styled Components
Styled Components는 CSS-in-JS 라이브러리로, JavaScript 파일 내에서 컴포넌트의 스타일을 정의할 수 있게 해줍니다. 이 방법은 스타일과 로직을 함께 묶을 수 있어 코드의 가독성을 높입니다.
import styled from 'styled-components';
const StyledDiv = styled.div`
color: purple;
font-size: 24px;
`;
const element = <StyledDiv>Styled Components 예제</StyledDiv>;Styled Components를 사용하면 컴포넌트에 스타일을 적용할 때 더 많은 유연성을 제공하며, 동적 스타일링도 쉽게 처리할 수 있습니다.
7. 이벤트 처리
JSX에서는 이벤트 핸들러를 지정할 수 있으며, JavaScript 함수와의 연결이 간편합니다.
const handleClick = () => {
alert('클릭되었습니다!');
};
const element = <button onClick={handleClick}>클릭하세요!</button>;부수효과 3가지
1. UI 가독성이 올라간다
JSX는 HTML과 유사한 구문을 사용하여 UI를 구성하기 때문에, 코드를 읽고 이해하기가 쉽습니다. 개발자는 UI 구조를 직관적으로 파악할 수 있으며, HTML 요소와 JavaScript 로직이 함께 표현되므로 전체적인 흐름을 쉽게 이해할 수 있습니다. 이는 팀원 간의 협업을 원활하게 하고, 유지보수를 용이하게 합니다.
// Card.js
const Card = ({ title, content }) => {
return (
<div style={{ border: '1px solid #ccc', padding: '16px', borderRadius: '8px' }}>
<h2>{title}</h2>
<p>{content}</p>
</div>
);
};
// App.js
const App = () => {
return (
<div>
<h1>안녕하세요!</h1>
<Card title="첫 번째 카드" content="이것은 첫 번째 카드의 내용입니다." />
<Card title="두 번째 카드" content="이것은 두 번째 카드의 내용입니다." />
</div>
);
};이 예제에서 Card 컴포넌트는 제목과 내용을 받아서 UI를 구성합니다. JSX를 사용하여 HTML과 유사한 구조로 작성했기 때문에, 코드의 가독성이 높아졌습니다.
2. 개별 요소로 쪼개져 있기 때문에 재사용이 가능하다
JSX는 컴포넌트 기반 아키텍처를 지원합니다. 각 UI 요소를 별도의 컴포넌트로 분리하면, 해당 컴포넌트를 여러 곳에서 재사용할 수 있습니다. 이는 코드 중복을 줄이고, 효율적인 개발을 가능하게 합니다. 예를 들어, 버튼, 입력 필드 등 자주 사용되는 UI 요소를 컴포넌트로 정의하면, 필요할 때마다 쉽게 호출하여 사용할 수 있습니다.
// Button.js
const Button = ({ label, onClick }) => {
return (
<button onClick={onClick} style={{ padding: '10px 20px', borderRadius: '5px', backgroundColor: '#007bff', color: '#fff' }}>
{label}
</button>
);
};
// App.js
const App = () => {
const handleClick = (buttonLabel) => {
alert(`${buttonLabel} 버튼 클릭됨!`);
};
return (
<div>
<h1>안녕하세요!</h1>
<Button label="버튼 1" onClick={() => handleClick("버튼 1")} />
<Button label="버튼 2" onClick={() => handleClick("버튼 2")} />
<Button label="버튼 3" onClick={() => handleClick("버튼 3")} />
</div>
);
};위의 예제에서 Button 컴포넌트는 라벨과 클릭 이벤트 핸들러를 받아서 여러 번 재사용되었습니다. 각각의 버튼 클릭 시 알림이 표시됩니다. 이처럼 컴포넌트를 분리하면 코드의 재사용성을 높이고, 유지보수가 용이합니다.
3. 트랜스파일러(Babel)을 사용해야 합니다.
JSX는 브라우저가 직접 이해할 수 없는 문법입니다. Babel은 이러한 JSX 코드를 JavaScript로 변환해주는 트랜스파일러입니다. Babel을 사용하면, 최신 JavaScript 문법과 JSX를 구형 브라우저에서도 호환되도록 변환할 수 있습니다. 이를 통해 개발자는 최신 기능을 활용하면서도 넓은 호환성을 유지할 수 있습니다. 또한, Babel은 코드 최적화를 통해 성능을 향상시킬 수 있습니다.
