가독성을 위한 JSX

Front end/React

가독성을 위한 JSX

욱둥 2023. 4. 8. 15:23

<html>
<head>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
▼ 바벨 추가하는 코드
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>-->
▼ JSX 사용하는 곳은 타입도 바꿔줘야한다.
<script type="text/babel">
  'use strict';

  ▼ 컴포넌트는 반드시 대문자로 시작해야한다.
  class LikeButton extends React.Component {
    constructor(props) {
      super(props);
      this.state = {liked: false};
    }

    render() {
      if (this.state.liked) {
        return 'You liked this.';
      }
      
      ▼ JSX 안쓰면 이런식으로 길게 코드짜야한다. (원래 리액트에서 html 요소 생성하는 방법)
      // return React.createElement('button', {onClick: () => this.setState({liked: true})}, 'Like')
      
      return (
        ▼ 반드시 부모태그로 감싸줘야한다. 리턴에는 태그가 하나만 와야한다. 
        <div>
          ▼ html태그들은 소문자여야한다. 원래 html은 대문자도 가능하지만 JSX는 XML이기 때문에 엄격하게 써줘야한다.
          <button onClick={() => this.setState({liked: true})}>Like</button>
          <br />

          ▼ XML이므로 엄격하게 닫는 태그도 반드시 작성해야한다. 
          <input type="text" />
          <br />

          ▼ 자바스크립트 코드는 중괄호로 반드시 감싸야한다.
          <button onClick={() => this.setState({liked: true})} obj={{a: 'b', c: 'd'}}>{1+1}</button>
          <br />

          ▼ JSX 안에서는 if문 못쓴다. 삼항연산자는 가능하다.
          <button onClick={() => this.setState({liked: true})}>{this.state.liked ? 'Liked' : 'disLike'} </button>
          <br />

          ▼ JSX 안에서는 for문 못쓴다. map으로 보통 해결한다.
          {[1, 2, 3].map((i) => {
            return <div>{i}</div>;
          })}
        </div>
      );
    }
  }
</script>
<script type="text/babel">
  ▼ React 17버전 코드 (React18버전은 17버전 코드도 지원을함) 
  (하지만 .render를 사용하면 React17버전으로 인식을해서 React18버전기능이 돌아가지않음)
  ReactDOM.render(<LikeButton />, document.querySelector('#root'));
  
  ▼ React 18버전 코드                                            
  ReactDOM.createRoot(document.querySelector('#root')).render(
    ▼ 우리가 만든 컴포넌트도 태그라고 보면 된다. 그래서 우리가 만든 컴포넌트도 여러번 쓰일 수 있다. 여기서도 div로 묶어준다.
    <div>
      ▼ 우리가 만든 컴포넌트는 반드시 대문자로 시작해야한다.
      <LikeButton/>
      <LikeButton/>
      <LikeButton/>
      <LikeButton/>
    </div>  
  );
</script>
</body>
</html>

바벨 (React.createElement -> JSX )

자바스크립트 파일에 <button> 과 같이 태그를 쓰는 문법이 가능할까? 당연히 안된다.

자바스크립트에는 저런 태그 쓰는 문법이 존재하지 않는다.

그런데 어떻게 리액트에서는 저런식으로 코딩을 할 수 있을까? 바로 바벨이라는 라이브러리 때문이다.

바벨이라는 라이브러리가 JSX 코드를 보면 우리 몰래 React.createElement로 바꿔준다.

즉, 바벨을 설치해야 JSX를 사용할 수 있는것이다.

React17버전, React18버전

<script type="text/babel">
  ▼ React 17버전 코드 (React18버전은 17버전 코드도 지원을함) 
  (하지만 .render를 사용하면 React17버전으로 인식을해서 React18버전기능이 돌아가지않음)
  ReactDOM.render(<LikeButton />, document.querySelector('#root'));
  
  ▼ React 18버전 코드
  ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>);
</script>

아직 회사에서 리액트 17버전도 많이 쓰인다. 그래서 회사에 들어가면 위 코드를 가장 먼저 확인해야한다.

JSX 주의할 점

우리가 리턴부분에 작성하는 html 태그 같은 태그들은 소문자로 시작하여야한다.
- Why? 우리가 html 태그 같이 작성하는것은 엄밀히 말하자면 html이 아니라 JSX 라는 자바스크립트 확장 문법이다. 그러므로 JSX 문법에 따라야한다.
- 원래 html에서는 대문자도 가능하지만 JSX는 XML이기 때문에 엄격하게 써줘야한다.
JSX는 XML이므로 엄격하게 닫는 태그도 반드시 작성해야한다.
우리가 만든 컴포넌트는 반드시 대문자로 시작해야한다.
자바스크립트 코드는 반드시 중괄호로 감싸야한다.
JSX 안에서는 if문 못쓴다. 삼항연산자는 가능하다. (사용할수는 있지만 별로임)
JSX 안에서는 for문 못쓴다. map으로 많이 해결한다. (사용할수는 있지만 별로임)
반드시 부모태그로 감싸줘야한다. 리턴에는 태그가 하나만 와야한다.
우리가 만든 컴포넌트도 여러번 쓰일 수 있다.

저작자표시