(리액트를 다루는 기술) 2장 JSX

JSX

자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼음

function App() {
  return (
   <div>
     Hello <b>react</b>
   </div>
  );
}

export default App;

위처럼 작성된 코드는 아래와 같이 변환

funcion App(){
    return React.createElement("div",null, "Hello", React.createElement("b",null,"react))

}

1. 감싸인 요소

   컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다

./src/App.js
SyntaxError: C:\Users\User\react\hello-react\src\App.js: Unterminated regular expression (6:21)

  4 | function App() {
  5 |   return (
> 6 |      Hello <b>react</b>
    |                      ^
  7 |   );
  8 | }
  9 |

--> <div></div> 감싸기

--> Fragment라는 컴포넌트 import하고 <Fragment></Fragment>로 깜싸기

--> Frament는 <></> 같은 형태로도 표현 가능

2. 자바스크립트 표현

function App() {
  const name='리액트'
  return (
    <div>
      <h1>{name}</h1>
      <h2>안녕</h2>
    </div>


  );
}

3. 조건부 연산자

• JSX 내부의 자바스크립트 표현식에서 if문 사용 X
• JSX 밖에서 if문 사용하거나 {} 안에 조건부 연산자(삼항 연산자) 사용

function App() {
  const name='리액트'
  return (
    <div>
      {name==='리액트' ? (<h1>리액트 맞음</h1>) : (<h1>리액트 아님</h1>)}
    </div>

  );
}

4. AND 연산자(&&)를 사용한 조건부 렌더링

• 특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때는 렌더링 X

function App() {
  const name='리액트'
  return (
    <div>
      {name==='리액트' && (<h1>리액트 맞음</h1>)}
    </div>

  );
}

5. undefined를 렌더링하지 않기

• 리액트 컴포넌트에서는 함수에서 undefined만 반환하는 상황을 만들면 안됨

import React from 'react'

function App() {
  const name=undefined;
  return name 
}

export default App;

Compiled with warnings.

src\App.js
  Line 1:8:  'React' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.     
To ignore, add // eslint-disable-next-line to the line before.

import React from 'react'

function App() {
  const name=undefined;
  return name || '값이 undefined입니다'
}

export default App;

• jsx내부에서 undefined를 렌더링 하는 것은 괜찮다

import React from 'react'

function App() {
  const name=undefined;
  return <div>
        {name}
  </div>
}

export default App;

• name 값이 undefined일 때 보여주고 싶은 문구가 있다면 다음과 같이 작성

import React from 'react'

function App() {
  const name=undefined;
  return <div>
      {name || '리액트'}    
  </div>
}

export default App;

6. 인라인 스타일링

• 리액트에서 DOM 요소에 스타일 적용 -> 객체 형태로 넣어야 함

import React from 'react'

function App() {
  const name='리액트';
  const style={
    backgroundColor:'black',
    color:'aqua',
    fontSize:'48px',
    fontWeight:'bold',
    padding:16
  }
  return (
  <div style={style}>
      {name} 
  </div>
  )}

export default App;

• 바로 style 값 지정 하는 방법

import React from 'react'

function App() {
  const name='리액트';

  return (
  <div style={{
  backgroundColor:'black',
  color:'aqua',
  fontSize:'48px',
  fontWeight:'bold',
  padding:16}}>

      {name} 

  </div>
  )}

export default App;

7. class 대신 className

import React from 'react'
import './App.css'

function App() {
  const name='리액트';

  return (
  <div className='react'>
      {name} 
  </div>
  )}

export default App;