[React] 리액트 JSX

🎯 JSX

📝 JSX

const App = () => {
  return (
    <div>
      <p>Hi</p>
      <MyComponent>하이~</MyComponent>
      <div>비와이~</div>
    </div>
  );
};

• JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장이다.
• HTML과 비슷하게 생겼으나 JavaScript이고 HTML과 다른 부분이 있다.
• JSX는 Babel에 의해서 Transcompile 된다.

 

📕 JSX 장점

• 개발자 편의성 향상
• 협업에 용이 / 생산성 향상
• 문법 오류와 코드량 감소

 

📝 JSX 특징 / HTML과 차이점

📕 HTML 태그 내에 JavaScript 연산

const App = () => {
  const a = 3;
  const b = 6;
  return <div>{a} + {b} = {a+b} </div>
};

 

📕 class → className

<div className="greeting" style={{padding: 10, color: 'red'}}>
  {name}님 안녕하세요 <br />
  반갑습니다.
</div>

 

📕 스타일은 object로

const App = () => (
    <div style={{ 
        padding: 30,  
        color: "red", 
        backgroundColor: "blue" 
    }}>Hello world!</div>
)

• 첫 번째 중괄호는 js표현을 쓰겠다, 두 번째 중괄호는 js 객체의 시작을 알리는 괄호
• HTML의 인라인 스타일은 ""(큰따옴표)로 감싼 string으로 정의하지만 React에서는 {}(중괄호)로 감싼 object로 정의한다.
• 위와 같은 Inline style의 Property name은 camelCase로 적는다.
  • font-size → fontSize, padding-left -> paddingLeft

 

📕 닫는 태그 필수

// HTML
<div>
    <input type="text">
    <br>
</div>

// JSX
<div>
    <input type="text" />
    <br />
</div>

• HTML 일부 태그의 경우 아예 닫는 태그를 생략하여 코드를 작성해도 되었지만, JSX에서는 닫는 태그를 필수로 작성하여야 한다.

 

📕 최상단 element는 반드시 하나

const App = () => {
  return (
    <> {/* React.Fragment  */}
      <div>Hello</div>
      <div>World</div>
    </>
  )
}

• JSX의 원칙상 최상단 Element는 한 개만 작성이 가능하기 때문에 이를 <div> or <React.Fragment>를 이용해 감싼다.
• 실제 렌더링 시에는 Fragment 안에 있는 내용만 출력된다.
• <React.Fragment>는 간단히 <>로 표기가 가능하다.