React : JSX란 무엇인가?

JSX (Javascript+ Xml)

Javascript의 확장으로 element로 하는 것은 보기가 너무 불편하다. 따라서 babel을 사용해서 보기 쉽게 바꿔준다.

 

 

*babel: 최신 문법을 사용하게 해주는 것으로 이걸 사용하여 <script>에서 html 문법을 쓸 수 있게 해준다.

babel을 쓰기 위해서 <script>를  <script type="text/babel"> 으로 변경.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
      // 컴포넌트 상속
      class LikeButton extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            // 상태.
            liked: false,
          };
        } //기본적으로 쓰는 것.

        render() {
          return (
            <button
              type="submit"
              onClick={() => {
                this.setState({ liked: true });
              }}
            >
              {this.state.liked === true ? "Liked" : "Like"}
            </button>
          );
          // content안에서 {} 안에 넣으면 javascript로 사용이 가능하다. => {this.state.liked...}
          //JSX(JS+XML) <button /> 처럼 닫는 /가 필요하다. (문법이 엄격하다)
        }
      }
    </script>

    <script type="text/babel">
 
      ReactDOM.render(<LikeButton />, document.querySelector("#root")); //LikeButton을 root안에다가 그리겠다.
    </script>

 

content안에서 {} 안에 넣으면 javascript로 사용이 가능하다. => {this.state.liked...}

JSX(JS+XML) <button /> 처럼 닫는 /가 필요하다. (문법이 엄격하다)

 

button을 여러개 생성해 주고 싶을때는 어떻게 하는가??

<script type="text/babel">
      //DOM은 화면에 직접 보여주겠다.
      ReactDOM.render(
        <div>
          <LikeButton />
          <LikeButton />
          <LikeButton />
        </div>,
        document.querySelector("#root")
      ); //LikeButton을 root안에다가 그리겠다.
    </script>

<div>로 묶어주면 component로 여러개를 쉽게 사용할 수 있다.

 

*주로 <>안에서 대문자로 시작되는 것은 컴포넌트이고 소문자로 시작되는것은 html 태그이다.