[5주차] 리액트입문: JSX 문법

1. JSX 안, javascript 문법

import React from 'react'

export default function App() {
  const a = 7;
  const b = 10;
  return <div>안녕하세요, 제 나이는 {a + b}입니다.</div>;
}
import React from 'react'

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

  return <div>
      <p>안녕하세요, 리액트입니다.</p>
      {/* 주석을 사용하는 방법입니다. */}
      {/* 삼항연산자를 사용해볼게요 */}
      <p>{
        number > 10 ? number + '은 10보다 크다' : number + '은 10보다 작다'
      }</p>
    </div>;
}

 

2. JSX 안, 태그에 속성넣기 (소문자 카멜케이스)

import logo from './logo.svg';
import './App.css';

function App() {
  return (
       <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
  );
}

export default App;

 

3. JSX 안, 태그에 대한 스타일 넣기

 (1) 인라인

import React from 'react'

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

  return <div className="test-class">
      <p>안녕하세요, 리액트입니다.</p>
      <p style={
        {
          color : "red",
        }
      }>
      내용
      </p>
    </div>;
}

 

 

 (2) 상수로 넣어서 처리

import React from 'react'

export default function App() {
  const number = 11;
  const PTagStyle = {
    color : "red",
  };
  return <div className="test-class">
      <p>안녕하세요, 리액트입니다.</p>
      <p style={PTagStyle}>
        내용
      </p>
    </div>;
}