리액트를 활용하여 코드를 간단하게 만들기

728x90

1. JSX 사용하기

- createElement를 대체하는 방법 : JSX라는 JavaScript를 확장한 문법 사용

// JSX 사용 전

        const h3 = React.createElement(
            "h3", 
            {
                onMouseEnter: () => console.log("mouse enter"),
            }, 
            "hello i'm span"
        );
        
        
// JSX 사용 후 
const Title = <h3 id="Title" onMouseEnter={() => console.log("mouse enter")}>hello i'm Title</h3>

- 이미지의 경우 아래와같이 사용 해 주면 된다.

const Title = <img src="" id="Title" onMouseEnter={() => console.log("mouse enter")}>hello i'm Title</img>

❤ 자동으로 jsx format으로 변환하는법

1. vsCode의 익스텐션에 들어가기

2. Prettier 검색하여 설치

3. 왼쪽 아래 설정 클릭

4. 검색창에 default formatter 검색 후 Prettier - Code formatter 선택

5. format on save 검색 후 체크

이걸 설정 하게 되면 파일 저장 시 포멧이 자동으로 적용된다.

예를들어 저장 전

저장 후

2. Bable 을 통한 코드 변환

Babel · Babel

The compiler for next generation JavaScript

babeljs.io

bable에서 코드를 붙여넣으면 변환된 코드를 보여준다.

3. Bable 설치하기

 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 <script type="text/babel">
  // 코드내용
 </script>

4. 코드 적용하기

<!DOCTYPE html>

<html>
  <body>
    <div id="root"></div>
  </body>

  <script
    crossorigin
    src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"
  ></script>
  <script
    crossorigin
    src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"
  ></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    const Title = (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hellow i'm span
      </h3>
    );
    const Button = (
      <button
        style={{ backgroundColor: "tomato" }}
        onClick={() => console.log("im cliked")}
      >
        Click me
      </button>
    );

    //span과 btn 둘 다 render하고 싶으면 div를 추가
    const container = React.createElement("div", null, [Title, Button]);

    ReactDOM.render(container, root);
  </script>
</html>

와 .. 이거 때문에 한참 헤맸다.

일단 프리티어는 아래처럼 crossorigin 이 들어가야한다고한다.

  <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>

그리고 위 캡처를 보면 button의 태그가 <Button> 으로 되어있는데 이게 대문자면 자꾸 #130 error가 발생한다.

저 두가지를 수정하고 나니 오류가 고쳐졌다..ㅠ
다음은 rander부분을 JSX 형식으로 바꿔준다

앞전 만들어둔 Title 과 Button 을 사용하기 위해서는 함수로 만들어줘야한다.
방법은 쉽다 = 에서 =()=> 로 수정해주면된다. 이 방법을 arrow Function이라고 하는데 function Title () {... return} 과 동일하다.

const root = () => document. ...

그리고 함수로 만들어 준 것들을 HTML 태그처럼 사용한다.
컴포넌트의 컷 글자는 반드시 대문자여야한다. 소문자로 쓰면 HTML button 으로 인식

    const Contaner = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Contaner />, root);