React 03. JSX

📑 JSX

JSX란?

• JavaScript XML의 약자로, React 요소를 생성하는 문법
• 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 됨

// 1번
function App() {
	return (
    	<div>
        	Hello, React
        </div>
    )
}

// 2번
function App() {
	return React.createElement("div", null, "Hello, React");
}

1번의 코드를 2번으로 변환하여 실행
매번 React.createElement() 사용하면 매우 불편하기에 JSX를 사용

---

📑 JSX 특징

1. 태그 문법
   태그 문법을 사용해 React 요소의 트리 구조를 표현, HTML과 비슷한 형태를 가지며, 각 태그는 대소문자를 구분

2. JavaScript 표현식 삽입
   JSX 내부에서 { }를 사용하여 JavaScript 표현식을 삽입할 수 있음

3. 컴포넌트 렌더링
   JSX는 사용자 정의 컴포넌트를 렌더링하는데 사용 됨, 컴포넌트의 이름은 항상 대문자로 시작

4. 속성 및 자식 요소
   JSX 태그는 속성을 가질 수 있으며, 자식 요소를 포함할 수 있음, 속성은 중괄호를 이용

---

📑 JSX 사용

1. 태그는 항상 닫아야 함

<br />
<input />

2. 항상 하나의 부모 요소로 감싸져야 함

• 태그가 여러 개일 경우 부모 태그로 감싸야 함
• div로 감싸도 되고 빈 태그로 감싸도 됨 <>

function App() {
	return (
      	<>
            <h1>Hello</h1>
			<h2>React</h2>
        </>
    )
}

3. 주석

• {/* */} 이런식으로 작성해야 함

function App() {
	return (
      	<>
        	{ /*<h1>Hello</h1>*/ }
			<h2>React</h2>
        </>
    )
}

4. className, htmlFor 사용

• JSX는 class 대신 className을 사용해 CSS 클래스를 설정
• for속성 대신 htmlFor을 사용
• JavaScript의 예약어와 충돌을 피하기 위함

function App() {
	return (
      	<div>
            <h1 className="h1">Hello, React</h1>

            <label htmlFor="name">이름 : </label>
            <input id="name" type="text" />
        </div>
    )
}

5. 변수 사용

• 중괄호를 사용하여 변수를 넣을 수 있음

function App() {
    const language = "React";
  	const name = 'h1'
	return (
    	<h1 className={name}>
        	Hello, {language}
        </h1>
    )
}

6. 스타일 적용

• JSX에서는 style={} 안에 {} 자료형으로 집어넣어야 함
• { 속성명 : '속성값' } 으로 입력
• 대쉬 기호가 있는 속성명은 붙여써야 되고 붙여쓴 뒤에 글자는 대문자

<div style={ {color: 'blue', fontSize: '30px'} }>
  글씨
</div>

7. 조건문

• JSX내에선 if 문을 사용할 수 없지만 조건부 연산자 ?:, && 연산자를 사용하여 조건부 렌더링을 함

function Greeting() {
  const isLoggedIn = true;
  
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
    </div>
  );
}
// <h1>Welcome back!</h1>

function Greeting() {
  const isLoggedIn = false;
  
  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
    </div>
  );
}
// null

• && 문을 사용할 경우 null 값에서는 아무것도 나오지 않는데

function Greeting() {
  const number = 0;
  
  return number && <div>내용</div>;
}
// 0

• 리액트에서 false를 렌더링 할때는 아무것도 나타나지 않지만 예외적으로 0은 화면에 나타난다.
  
  

8. 반복문

• map() 메서드를 사용해서 반복, 각 항목에 대해 컴포넌트를 렌더링 할 수 있음
• 각 항목은 고유한 key를 가져야 함

function NumberList() {
    const users = [
        { id: 1, name: '홍길동' }, { id: 2, name: '철수' }, { id: 3, name: '영희' }
    ];
  
    return (
        <ul>
            {users.map(user =>
                <li key={user.id}>{user.name}</li>
            )}
        </ul>
    );
}