react 학습노트 | 1.JSX란?

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)

---