React JSX

컴포넌트에 해당하는 코드 App.js

  import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  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>
      );
    }
  }
  export default App;

• 첫번째 코드는 리액트와 그 내부의 Component 를 불러옴. 파일에서 JSX 를 사용하려면, 꼭 React 를 import
• 이렇게 import 를 하는 것은 우리가 webpack 을 사용하기에 가능한 작업

컴포넌트를 만드는 두가지방법

1. 클래스를 통해서 만드는 방법

  class App extends Component {
    ...
  }
  export default App;

• 클래스형태로 만들어진 컴포넌트에는 꼭, render 함수가 있어야 함. 그리고 그 내부에서는 JSX 를 return 해주어야함
• 마지막 줄 “export default App” 는 우리가 작성한 컴포넌트를 다른 곳에서 불러와서 사용 할 수 있도록 내보내기해줌

2. 함수를 통해서 만드는 방법

  function App() {
  return (
    ...
    );
  }

index.js

• import App from ‘./App’ 우리가 만든 컴포넌트를 import를 사용해 불러옴

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';

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

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

• 리액트 개발을 쉽게 하기 위해서, HTML 과 비슷한 문법으로 작성을 하면 이를 React.createElement 를 사용하는 자바스크립트 형태로 변환

  import React, { Component } from 'react';

  class App extends Component {
    render() {
      const name = 'react';
      return (
        <div>
          hello {name}!
        </div>
      );
    }
  }

  export default App;

• ES6 에서는, var 을 쓸 일이 없고, 값을 선언 후 바꿔야 할 땐 let, 그리고 바꾸지 않을 땐 const 를 사용

조건부 렌더링

• JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, AND 연산자를 사용
• 반면에 if 문을 사용 할 수는 없음. 사용하려면 IIFE(즉시 실행 함수 표현)을 사용해야함
• 복잡한 조건을 작성해야 할 때는 웬만하면 JSX 밖에서 로직을 작성. 하지만, 꼭 JSX 내부에서 작성해야 한다면, IIFE를 사용

  import React, { Component } from 'react';

  class App extends Component {
    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>
      );
    }
  }

  export default App;

화살표함수

• function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않음
• 화살표 함수는 항상 익명. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합
• 그래서 생성자로서 사용할 수 없음

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

style과 className

• JSX 에서 style 과 CSS 클래스를 설정 할 때, html에서 하는 것과 다름
• 리액트에서는 객체 형태로 작성
• 리액트 컴포넌트에서는 class 대신에 className 을 사용

  import React, { Component } from 'react';

  class App extends Component {
    render() {
      const style = {
        backgroundColor: 'black',
        padding: '16px',
        color: 'white',
        fontSize: '12px'
      };

      return (
        <div style={style}>
          hi there
        </div>
      );
    }
  }

  export default App;

주석

  {/* ... */} 사이에 넣거나, 태그 사이에 넣을 수도 있음
  import React, { Component } from 'react';

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

  export default App;