React입문 1주차(JSX)

JSX란

JavaScript를 확장한 문법으로 JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법이다.

기본적으로 return문 안에 존재하며 JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다.

(-> 우리가 실질적으로 코드를 작성하는 App.js를 index.js에서 createRoot를 한 다음에 render한다. 만들어 놓은 App.js를 React에서 render를 하면서 화면에 그려나가는 것이다._render하면서 DOM에 렌더링을 시키는 것이다.)

HTML을 품은 JS ⇒ JSX

아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다.

<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>​

 ▼
자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 한다.

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

JSX에서 쓰는 <div>~~</div>는 DOM 요소가 아닌 정확히는 React 요소이다.
리액트 돔을 구성하는 건 리액트 요소! 돔을 구성하는 건 돔 요소이다

---

react snipet

// rfc
import React from 'react'

export default function App() {
  return (
    <div>App</div>
  )
}

---

// rfce
import React from 'react'

function App() {
  return (
    <div>App</div>
  )
}

export default App

---

import React from 'react'

export default function App() {
  const a = 7;
  const b = 10;

  return (
    <div>
      <input type="text"/>
      <div>안녕하세요 {a+b}입니다.</div>
    </div>
  )
}

---

삼항연산자 사용해보기

import React from 'react'

export default function App() {
  const number = 1;

  return (
    <div>
      <p>안녕하세요 리엑트입니다.</p>
      {/* 주석을 사용하는 방법 */}
      {/* 삼항연산자를 사용해 볼게요 */}
      <p>{
        number > 10 ?           // number이 10보다 크다는 조건이
          number + '은 10보다 크다'  // 참일 경우
          : number + '은 10보다 작다' // 거짓인 경우
      }
      </p>
    </div>
  )

}

---

class 지정과 style속성 지정해보기

class가 아닌 className로 지정 하는거 기억하기

{ }안에 js 속성을 넣을 수 있고 객체{ }로 넣어줘야해서 이중인 점 기억하기

import React from 'react'

export default function App() {
  const number = 1;

  return (
    // <div class = "test-class"> 이렇게 class를 지정하고 싶을때 class가 아닌 className로 지정해야함
    <div className="test-class">
      <p>안녕하세요 리엑트입니다.</p>
      {/* 주석을 사용하는 방법 */}
      {/* 삼항연산자를 사용해 볼게요 */}
      <p style={{
        color: "red",
      }}>
        {
          number > 10 ?           // number이 10보다 크다는 조건이
            number + '은 10보다 크다'  // 참일 경우
            : number + '은 10보다 작다' // 거짓인 경우
        }
      </p>
    </div>
  )

}

style속성 변수로 지정해서 적용해주기(변수로 지정해줌으로써 재사용이 가능해진다.)

import React from 'react'

export default function App() {
  const number = 1;

  const pTagStyle = {
    color: "red",
  }

  return (
    // <div class = "test-class"> 이렇게 class를 지정하고 싶을때 class가 아닌 className로 지정해야함
    <div className="test-class">
      <p>안녕하세요 리엑트입니다.</p>
      {/* 주석을 사용하는 방법 */}
      {/* 삼항연산자를 사용해 볼게요 */}
      <p style={pTagStyle}>
        {
          number > 10 ?           // number이 10보다 크다는 조건이
            number + '은 10보다 크다'  // 참일 경우
            : number + '은 10보다 작다' // 거짓인 경우
        }
      </p>
    </div>
  )

}