ReactJS JSX 101

12 Aug 2020

Reading time ~2 minutes

ReactJS JSX 101

2.jsx 101 from Daniel Lim

bg right h:270 임광규

ReactJS 기본 코드 설명(App.js)

// 리액트를 불러와서 사용할수 있게 지원
import React from 'react';

// SVG(https://ko.wikipedia.org/wiki/%EC%8A%A4%EC%BC%80%EC%9D%BC%EB%9F%AC%EB%B8%94_%EB%B2%A1%ED%84%B0_%EA%B7%B8%EB%9E%98%ED%94%BD%EC%8A%A4)
// 스케일러블 벡터 그래픽스 파일 
import logo from './logo.svg';
// CSS 로드
import './App.css';

// App 컴포넌트 생성 코드
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

JSX 변환

JSX는 babel을 통해서 일반 자바스크립트 형태의 코드로 변화 됩니다.

// JSX
const element = <div>React</div>

// 자바 스크립트
const element = React.createElement("div", null, "React");

JSX의 뜻은 stands for JavaScript XML 입니다.

JSX 장점

보기 쉽고 익숙하다
활용도가 높다.

render 설명(index.js)

ReactDOM.render 는 컴포넌트를 페이지에 랜더링 하는 역할이며, react-dom 모듈을 불러와 사용 함수의 첫번째 파라메터는 랜더링할 내용을 javascript형태로 작성하고, 두번째는 JSX를 랜더링할 document 내부 요소를 설정

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

React.StrictMode

React.StrictMode 는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구

개발 모드에서만 활성화되기 때문에 프로덕션 & 빌드에 영향을 끼치지 않습니다.

`StrictMode`는 아래와 같은 부분에서 도움이 됩니다.

JSX 문법 - 1

감싸인 요소 return 에는 꼭 한개의 DOM만 return 해야 한다.

<></>, 사용
자바스크립트 표현

import React from 'react';

function App() {
  const name = '리액트';
  return (<>
    <h1>{name} 안녕!</h1>
    <h2>동작 테스트</h2>
    </>);
}

export default App;

JSX 문법 - 2

if 문 대신 조건부 연산자

import React from 'react';

function App() {
  const name = '리액트';
  return (<>
    {name === '리액트'?
      (<h1>리액트 입니다.</h1>):
      (<h1>리액트가 아닙니다.</h1>)}
    </>);
}

export default App;

JSX 문법 - 3

AND 연산자(&&)를 이용한 조건부 랜더링

import React from 'react';

function App() {
  const name = '리액트';
  return (<>
    {name === '리액트' && <h1>리액트 입니다.</h1>}
    </>);
}

export default App;

JSX 문법 - 4

undefined를 랜더링하지 않기 ( OR 연산자( ) 이용)

import React from 'react';

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

export default App;

JSX 문법 - 5

인라인 스타일링

import React from 'react';

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

export default App;

JSX 문법 - 6

class대신 className

import React from 'react';

function App() {
  return <div className="react">리액트 입니다.</div>;
}

export default App;

JSX 문법 - 7

꼭 닫아야 하는 태그

import React from 'react';

function App() {
  return <div>
    <input />
    <br />
    <input ></input>
  </div>;
}

export default App;

JSX 문법 - 8

주석

import React from 'react';

function App() {

  return <div 
      className="react" // 시작 태그를 여러줄 작성하게 된다면 여기에 작성 할수 있음
    >리액트 입니다.
    {/* 주석은 이렇게 작성합니다. */}
    </div>;
}

export default App;

ESLint와 Prettier

ESLint : 문법 검사 도구
Prettier : 코드 스타일 자동 정리 도구

뽀나스

DOM 101 : DOM 기초
React 101 : React 기초

reactjs