JSX란?
Javascript 확장 문법으로 Javascript XML이란 의미.
리엑트에서는 JSX를 이용하여 화면(컴포넌트)을 표시함.
- 리엑트가 JSX -> HTML을 만들어줌
JSX의 특징
- JSX에서 사용되는 태그의 속성 이름이 HTML과 약간 다름
- class => className
- for => htmlFor
- onclick => onClick
- 태그를 명시적으로 닫아줘야함.
//잘못된 JSX
<button class="btn"> hello, world </button>
<input type="text">
//옳게된 JSX\`\`\` - 하나의 태그로 감싸져 있어야함.
<div>
<button className="btn"> hello, world </button>
<input type="text"/>
</div>
JSX에서 Javascript사용하기
1. 중괄호 {} 안에서 JavaScript 표현식 사용
JSX 안에서는 중괄호 **`` 안에 JavaScript 표현식**을 사용할 수 있습니다.
const name = "Alice";
return <h1>Hello, {name}!</h1>;- ✅ 사용 가능한 것: 변수, 함수 호출, 삼항 연산자 등 표현식(expression)
- ❌ 사용 불가:
if,for같은 문장(statement)
2. 조건부 렌더링
2-1. 삼항 연산자
const isLoggedIn = true;
return <div>{isLoggedIn ? "Welcome!" : "Please log in."}</div>;2-2. 논리 AND (&&)
const hasMessages = true;
return <div>{hasMessages && <p>You have new messages.</p>}</div>;3. 리스트 렌더링 (map 사용)
const items = ["Apple", "Banana", "Orange"];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);key속성은 필수는 아니지만 React가 효율적으로 렌더링하기 위해 사용합니다.
4. 반복문 사용하기 (for, while 등)
JSX 안에서는 for, while 같은 문장(statement) 은 직접 사용할 수 없습니다. 대신 반복문은 JSX 바깥에서 데이터를 처리한 뒤 JSX에서는 map() 등으로 표현식 형태로 렌더링합니다.
const items = ["Apple", "Banana", "Orange"];
const elements = [];
for (let i = 0; i < items.length; i++) {
elements.push(<li key={i}>{items[i]}</li>);
}
return <ul>{elements}</ul>;- 또는
map()사용이 가장 권장되는 방식입니다 (위의 리스트 렌더링 참고).
5. 함수 호출
function formatName(user) {
return `${user.firstName} ${user.lastName}`;
}
const user = { firstName: "John", lastName: "Doe" };
return <h1>Hello, {formatName(user)}!</h1>;6. 속성(prop)에도 JavaScript 표현식 사용 가능
const isDisabled = true;
return <button disabled={isDisabled}>Click me</button>;7. 스타일 객체도 JavaScript로 정의 가능
const style = {
color: "blue",
fontSize: 20
};
return <p style={style}>Styled Text</p>;- CSS 속성 이름은 camelCase로 써야 합니다 (
font-size→fontSize)
반응형
