[Web] React 컴포넌트 JSX

React 컴포넌트 JSX

1. 컴포넌트 만들기

기존에 만들어두었던 react-study 프로젝트를 열어보면, 아래처럼 프로젝트가 구성됩니다.

 

 

React를 사용하면 웹 애플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성, 프로젝트의 유지보수성을 올려줍니다.

 

App.js 파일에서 컴포넌트 코드를 확인할 수 있습니다.

import React, { Component } from 'react'; //  React와 내부의 Component import
import logo from './logo.svg'; 
import './App.css';

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;

 

CSS 파일을 불러오게 되면,

나중에 프로젝트에서 사용한 프로젝트를 한 파일에 모두 결합해주는 작업을 진행합니다.

 

자바스크립트 파일을 불러오게되면,

모든 코드들이 제대로 로딩되게끔 순서를 설정하고 하나의 파일로 합쳐줍니다.

 

컴포넌트를 만드는 방법은 2가지가 있습니다.

클래스를 통해서 만드는 것이랑 함수를 통하여 컴포넌트를 만드는 것입니다.

 

 

아래처럼 클래스로 만들어진 컴포넌트는 render 함수가 있어야 합니다. JSX를 Return 해야만 합니다.

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

 

작성한 컴포넌트는 다른 곳에서 inport 해서 사용할 수 있습니다.

export default App; // export 할 경우:

 

index.js 파일을 보면,

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App'; // import App Component
import reportWebVitals from './reportWebVitals';

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

 

id가 root인 DOM을 찾아서 설정하는데, DOM은 public/index.html 파일에서 찾을 수 있습니다.

const root = ReactDOM.createRoot(document.getElementById('root'));

 

2. JSX 규칙

• 태그를 열었으면 꼭 태그를 닫아줘야 됩니다.

     - <div>로 태그를 열었으면 </div>로 태그를 닫아줘야 됩니다.

• 2개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸줘야 됩니다.

     - 아래처럼 <div>를 사용해도 되고 아니면 <Fragment>를 사용하면 됩니다.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <div>
          Hello
        </div>
        <div>
          Bye
        </div>
      </div>
    );
  }
}

export default App;

• JSX 내부에서 조건부 렌더링을 할 때는 삼항 연산자를 사용하거나 AND 연산자를 사용해야 합니다.

     - if 문을 사용할 수 없습니다.(if 문을 사용하려면 IIFE함수로)

 

• 삼항 연산자 사용

render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>맞아요!</div>)
            : (<div>틀려요!</div>)
        }
      </div>
    );
  }

    - 결과는 "맞아요!"입니다. 1 + 1 === 3 ? 으로 변경하면 "틀려요!"가 됩니다.

 

• AND 연산자 사용

render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>맞아요!</div>)
        }
      </div>
    );
  }

    - 조건을 만족하거나 만족하지 않을 경우에만 보여주도록 사용합니다.

 

• IIFE 함수 사용

render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
  }

    - IIFE함수를 사용해서 if 문이나 swich문을 사용할 수 있습니다.

    - 아래처럼 화살표 함수(익명 함수)로 ES6 방식으로 변경할 수도 있습니다.

(() => {
  if (value === 1) return (<div>하나</div>);
  if (value === 2) return (<div>둘</div>);
  if (value === 3) return (<div>셋</div>);
})()

 

3. 주석 사용법

: 아래 코드처럼 {/* ... */} 사이에 넣거나, 태그 사이에 넣을 수도 있습니다.

render() {
    return (
      <div>
        {/* 주석은 이렇게 */}
        <h1
          // 태그 사이에
        >리액트</h1>
      </div>
    );
  }

 

4. JSX 기본 문법 3가지

• Class 추가 시 className으로 입력
• 변수 적용 시 {변수명}
• style 적용 시 style={ { 이름:'값' } }