ReactJs - JSX 기본

 

JSX가 적용되기 전에는

 

 

파일에서 JSX 를 사용하려면, 꼭 React 를 import 해주어야 한다.

 

 

 

 

 

 

import의 예시

 

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

 

• 이렇게, import 를 하는 것은, 우리가 webpack 을 사용하기에 가능한 작업이다.
• 이렇게 불러오고나면 나중에 프로젝트를 빌드하게 됐을 때 웹팩에서 파일의 확장자에 따라 다른 작업을 하게 된다.

 

 

 

 

 

 

 

컴포넌트의 JSX의 예시

 

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">Hi ji seok</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
  
  }
  
  export default App;

 

• 일단 컴포넌트를 만들어야 하는데 클래스형태로 만들어야 하며, 꼭 render 함수가 있어야 한다,
• 그리고 그 내부에서는 JSX 를 return 해주어야 한다. 위에 보이는 HTML 같은 코드가 바로, JSX 이다.
• 마지막줄의 export default App;은 작성한 컴포넌트를 다른 곳에서 불러와서 사용 할 수 있도록 내보내기를 해준다.

 

 

 

JSX의 문법

 

 

 

꼭 닫혀야 하는 태그

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <input type="text"> //오류 발생 요인, 태그를 닫아줘야 한다.
      </div>
    );
  }
}

export default App;

 

• 태그는 꼭 닫혀있어야 한다.
• <div> 태그를 열었으면, </div> 를 통하여 태그를 꼭 닫아주어야 한다.
• html 에서 input 이나 br 태그를 작성 할 때 태그를 안닫을때도 있는데, 똑같이 리액트에서 하면 안된다.

 

 

 

 

 

 

감싸져 있는 엘리먼트

 

import React, { Component } from 'react';

class App extends Component {
  render() {
  //아래와 같이 두개 이상의 <div>태그들을 한 번더 <div>태그로 감싸지 않고 쓰면 오류가 난다.
    return (
      <div>
        Hello
      </div>
      <div>
        Bye
      </div>
    );
  }
}

export default App;

 

• 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다.
• 해결방법은 두개 이상의 엘리먼트 위로 한 번 더 엘리먼트로 감싸야하는 것이다.

 

 

 

 

 

 

 

 

JSX 안에 자바스크립트 값 사용하기

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return (
      <div>
        hello {name}!  //JSX안에서는 이렇게 {}로 묶어주어야 자바스크립트 값을 이용 가능하다.
      </div>
    );
  }
}

export default App;

 

• JSX 내부에서 자바스크립트 값을 사용 할 땐 {}로 묶어주어야 한다.

 

 

 

 

 

 

 

조건부 렌더링

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>yes</div>)
            : (<div>no</div>)
        }
      </div>
      
      //즉시 실행 함수 예
      <div>
      (() => {
          if (value === 1) return (<div>하나</div>);
          if (value === 2) return (<div>둘</div>);
          if (value === 3) return (<div>셋</div>);
      })()
     </div>
    );
  }
}

export default App;

 

• JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, AND 연산자를 사용한다.
• 반면에 if 문을 사용 할 수는 없다. 사용하려면 즉시 실행 함수 표현을 사용해야한다.
• 대부분의 상황엔 위의 방식으로 해결 할 수 있지만, 가끔씩은 좀 복잡한 조건을 작성해야 할 때도 있으니 그러한 조건들은 웬만하면 JSX 밖에서 로직을 작성하는것이 좋다.

 

 

 

 

 

 

주석

 

import React, { Component } from 'react';

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

export default App;

 

• {/* ... */} 사이에 넣거나, 태그 사이에 넣을 수도 있다.