JSX

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

 

위 코드는 APP이라는 컴포넌트를 생성한다. function 키워드를 사용해 만든 커포넌트를 함수형 컴포넌트 라고 하며 이를 렌더링 하면 함수에서 반환하고 있는 내용을 나타낸다. 위 코드에서 HTML처럼 생긴 것을 JSX라 한다.

  JSX는 js의 확장 문법이며 이를 사용해 작성된 코드는 브라우저 에서 실행되기 전에 코드 번들링 과정에서 바벨을 사용해 일반 js형태로 변환 된다.

//위 코드를 변환하면 다음과 같이 된다
function App(){
    return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}

 

JSX의 장점:

  1. 가독성 - HTML코드 작성과 비슷하므로 가독성이 높다

  2. 높은 활용도 - HTML태그를 사용할 수 있고 앞으로 만들 컴포넌트도 JSX안에서 작성할 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

위 코드에서 볼 수 있듯이 App컴포넌트를 마치 태그를 사용하듯이 작성했다.

위 코드에서:

  1. ReactDOM.render()

     컴포넌트를 페이지에 렌더링 하는 역할을 하며 react-dom모듈을 불러와서 사용할 수 있다. 이 함수는 첫 파라미터로 페이지레 렌더할 내용을 JSX형식으로 받아온다. 두번째 파라미터로는 해당 JSX를 렌더링 할 document 내부 요소를 설정한다. 

  2. React.StrictMode

     리엑트의 레서시 기능들을 사용하지 못하게 한다. 이를 사용하면 deprecated된 예전 기능(componentWillMount 등)을 사용할때 경고를 출력한다.

 

문법

  1. 컴포넌트에 여러 요소가 존재한다면 반드시 하나의 부모 요소로 감싼다.

     Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOm트리 구조로 이루어 져야 한다.

import React from "react";
 
function App() {
  return (
      <h1>hi react</h1>
      <h2>helllo react</h2>
  );
}
//위 코드는 SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag.
//를 발생시킨다
 
//올바른 코드:
import React from "react";
 
function App() {
  return (
      <div>
        <h1>hi react</h1>
        <h2>helllo react</h2>
      </div>
  );
}
//<div></div>를 <Fragment></Fragement>또는 <></>로 대체 가능(react v16이상)
 

 

  2. if문 재신 조건부 연산자(삼항 연산자)를 사용한다.

import React from "react";
 
function App() {
    const name = "react";
    return (
        <div>
            {name === 'react' ? (
                <h1>its react</h1>
            ) : (
                <h1>it it not react</h1>
            )}
        </div>
  );
}
 
export default App;
 

  3. AND operator(&&)를 사용한 조건부 렌더링

   특정 조건을 만족할때만 렌더링을 하고 싶다면 다음 두 가지 방식을 사용하면 된다.

import React from "react";
 
function App() {
    const name = "react";
    return (
        <div>
            {name === 'react' ? <h1>react</h1> : null}
        </div>
  );
}
 
export default App;
 
//or
import React from "react";
 
function App() {
    const name = "reacta";
    return (
        <div>
            {name === 'react' && <h1>react</h1>}
        </div>
  );
}
 
export default App;
 

&&연산을 통해 null과 같은 효과를 낼 수 있는 이유는 리엑트가 false를 렌더링 할때 null과 같이 아무것도 렌더링을 하지 않기 때문이다. 이때 주의해야 할 점은 0은 예외적으로 화면에 나타난다. 

*JSX에서 요소를 ()로 감쌀때가 있다. 이는 주로 여러 줄을 작성할 때 사용되며 한줄만 작성할 경우 사용하지 않아도 된다.

 

  3. undefined를 렌더링 하지 않는다

    리엑트 컴포넌트 에서는 함수에서 undefined를 렌더링 하면 않된다. 따라서 어떤 값이 undefined일 가능성이 있을 경우 ||연산자를 통해 방지하면 된다.

React from "react";
 
function App() {
    const name = undefined;
    return name;
}
 
export default App;
//Error: App(...): Nothing was returned from render. 
//This usually means a return statement is missing. 
//Or, to render nothing, return null.
 
function App() {
    const name = undefined;
    return name || 'name is undefined';
}
//or
//JSX안에서 undefined를 렌더하는 것은 괜찮다
function App() {
    const name = undefined;
    return <div>{name}</div>;//or return <div>{name || 'name is undefined'}</div>
}

 

  4. 인라인 스타일링

    리엑트에서 DOM요소에 스타일을 적용할 때에는 문자열 형태가 아닌 객체 형태로 넣어줘야 한다. 이때 스타일 이름 중에 '-'가 포함된 이름을 카멜 표기법으로 표기해야 한다.

import React from "react";
 
function App() {
    const name = "react";
    const style = {
        backgroundColor: 'black',
        color: 'aqua',
    };
    return <div style={style}>{name}</div>;
}
 
export default App;
 
//or
function App() {
    const name = "react";
    return (
        <div style = {{
            backgroundColor: 'black',
            color: 'aqua',
        }}>
            {name}
        </div>
    );
}
 

  5. class 대신 className을 사용한다

import React from "react";
import './App.css';
 
function App() {
    const name = "react";
    return (
        <div className="react">{name}</div>
    );
}
 
export default App;
 
//App.css code:
.react {
  background-color: black;
  color: aqua;
}
 
//V16부터는 className을 사용하지 않으면 작동은 되나 경고가 뜬다. 이전 버전에서는 오류가 발생했다.
 

  6. 태그는 반드시 닫아야 한다.

import React from "react";
import './App.css';
 
function App() {
    const name = "react";
    return (
        <>
            <div className="react">{name}</div>
            <input type="text">
        </>
    );
}
 
export default App;
//SyntaxError: Expected corresponding JSX closing tag for <input>.
 
//answer:
 
function App() {
    const name = "react";
    return (
        <>
            <div className="react">{name}</div>
            <input type="text"></input>
        </>
    );
}
//Or use self-closing tag-><intput/>

  7. 주석 표기법

import React from "react";
import './App.css';
 
function App() {
    const name = "react";
    return (
        <>
            {/*이렇게 표기한다*/}
            <div className="react">{name}</div>
            <input type="text">
        </>
    );
}
 
export default App;