티스토리 뷰

차곡차곡/Frontend

[React] JSX

p퐝유p 2022. 4. 15. 23:36

- React의 공식 문서에서 말하는 가장 단순한 React 예시를 보겠다.

  매일 코드가 이렇게 간단명료했으면 좋겠다..... 출처 : https://ko.reactjs.org/docs/hello-world.html

 

Hello World – React

A JavaScript library for building user interfaces

ko.reactjs.org

★JSX란?

- JSX는 JavaScript를 확장한 문법이다. JavaScript의 모든 기능이 포함되어있다고 한다.

  JSX는 React"앨리먼트(elemnet)"를 생성한다. 필수가 아니지만 UI 관련 작업을 할 때 시각적으로 더 도움이 된다.

 

★Babel이란?

-Bable은 자바스크립트 컴파일러이다. 정확히는 JavaScript로 결과물을 만들어주는 컴파일러이다.

 왜 javaScript로 변환하는 과정이 필요할까?

 프론트엔드가 빠르게 발전하는 요즘, 최신 브라우저 조차 지원하지 못하는 문법과 기술들이 출연하고 있다.

모든 사람들이 최신 브라우저를 사용하지 않기 때문에 하위 호환성을 외면하기는 어렵다. 

출처 : https://bravenamme.github.io/2020/02/12/what-is-babel/

 

★ Babel CDN을 활용하여 JSX적용하기

Babel 공식 사이트에서 Babel이 적용된 것을 볼 수 있다. Babel 공식 사이트 

render()내에 html elements가 직접 적용되어 있어서 가독성이 떨어진다. Babel을 이용해 가독성을 높일 수 있다.

 

 

<head>에 Babel CDN 링크를 입력한다. 

 

div 에서 렌더링되는 부분이다.

 

child-element 들을 return안에 html 태그처럼 입력하여 사용한다.

 

짜잔, 이렇게 메뉴가 쪼로록 있다는 것을 볼 수 있다.

 

아 맞다, Componet 대신 <Component/> 를 입력했다. 

</>로 감싸서 하나의 컴포넌트(커스텀 태그) 형태로 지정하여 렌더링해야한다.

 

★ coffe를 strarbuck로 바꾸기

coffe 를 'starbuks'로 선언을 해줘도 브라우저는 변함이 없다. 

태그 안에 변경할 곳에 템플릿 리터럴 {}을 사용한다. 

 

짜잔, 그럼 이렇게 starbucks는 고양이의 픽을 받게된다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root">
        <!-- 렌더링 되는 부분 -->
    </div>

    <script type="text/babel">
    // 1. Babel CDN을 활용하여 JSX 적용
      // Babel로 적용된 모습.
      // https://babeljs.io/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=AQ0JQUwQwYwFwCIHkCyA6AThAdgEwhgBQBQoZwAPLgJYBuAfKeWRQK4A2jzzFAFgEz0AKr2rYA5gGdgMKHGntqAawgUA9AK7cWi-gGEA9gDMjEVWt1NtICrqHR1l66FvV6KauyWO3V7uo4tHjUaBgAaPzJcAxhWAFscODQAR1YCAE8AZQh2CHgDIgAiAGIMAwM4QoBKSOAqgG4gA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.17.6&externalPlugins=&assumptions=%7B%7D
      
      // render() 내에 html elements가 직접 적용되어 있어서 가독성이 떨어짐.
      // ReactDOM.render(
      //   <div>
      //     <ul>
      //       <h2>Things cats like</h2>
      //       <li>Coffee</li>
      //       <li>Tea</li>
      //       <li>Milk</li>
      //     </ul>
      //   </div>,
      //   document.getElementById("root")
      // );

      // 2. JSX Code를 함수 컴포넌트 방식으로 분리

      let coffee = 'Starbucks'; // {}를 활용하여 JS 코드 작성 가능

        const Component = props => {
            console.log('Component 랜더링');
            return ( 
                <ul>
                    <h2>Things cats like</h2>
                    <li>{coffee}</li> 
                    <li>Tea</li>
                    <li>Milk</li>
                </ul>
            );
        };

        ReactDOM.render(<Component/>, document.getElementById('root'));
        
        
        
        // <>로 감싸서 하나의 컴포넌트(커스텀 태그) 형태로 지정
    </script>
</body>
</html>

'차곡차곡 > Frontend' 카테고리의 다른 글

[React] Props와 State / 리액트로 클릭 카운터 만들기  (0) 2022.04.17
[React] Components와 Props / 컴포넌트 다이어트 성공기  (0) 2022.04.17
[React] 엘리먼트 렌더링 - tick 만들기  (0) 2022.04.17
React를 이용한 Counter 만들기 - (2)  (0) 2022.04.15
React를 이용한 Counter 만들기 (1)  (0) 2022.04.14