[React] 1-4 JSX와 바벨(babel)

개발/react

[React] 1-4 JSX와 바벨(babel)

s2somang 2022. 2. 16. 04:25

인프런에 제로초님의 강의를 보고 정리한 내용입니다.
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

바벨 bable

자바스크립트에서 html태그를 사용하게 하지 않는데 이것이 바로 우리가 리액트를 포기하게 만드는 이유중 하나라고 하심

그래서 나온것이 바벨.

최신문법과 실험적인 문법을 자바스크립트에서 사용할 수 있게 해준다고함. 바벨도 스크립트가 있어서 써줘야함!

바벨을 사용하기 위해 먼저 head에 추가해줘야한다.

<body>
    <div id="root"></div> 
    <script type="text/babel"> // 바벨이 JSX 문법을 createElement로 바꿔줌!
        const e = React.createElement;
        class LikeButton extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    liked: false, 
                };
            }

            render() {
                return <button type="submit" onClick={() => { this.setState({ liked: true }) }}>{this.stat.liked === true ? 'Liked' : 'Like'}</button>;
                // JSX : 자바스크립트 + xml
                // 위와 같이 편하게 사용할 수 있는데, 자바스크립트에서 html 태그를 사용하게 하지 않음. 이것이 바로 우리가 리액트를 포기하게 만드는 이유중하나임
                // 그래서 나온것이 바벨. 최신문법과 실험적인 문법을 자바스크립트에서 사용할 수 있게 해줌. 바벨도 스크립트가 있어서 써줘야함! 

                // { }를 이용해서 택스트 대신해서 사용해줄 수 ㅇ도 있음

            }
        }
    </script>
    <script type="text/babel"> 
        // JSX 즉, xml 이기때문에 / 닫는 태그 잘써줘야함 문법에 엄격함!!
        ReactDOM.render(<LikeButton />, document.querySelector('#root')); 
        //원하는 개수만큼 늘리면 됨~!
    </script>
</body>

기존에 createElement를 이용해서 만드는 건 알아보기 너무 어려웠다.

React는 JSX라는걸 지원하고있는데, javascript + xml을 합친거라고 생각하면된다.

처음에는 편하게 html 태그를 이용해서 사용하는구나! html을 사용할 수 있구나 라고 생각했는데,ㅔ

이 코드는 따지고(?)보면 xml이라고 한다.

{ }를 이용해서 텍스트뿐만 아니라 자바스크립트 문법을 사용할 수 도 있다.!

JSX를 사용하기 위해선 위에서 head에 추가한 다음

HTML에서는

<button>Liked</button>
<button>Liked</button>
<button>Liked</button>
<button>Liked</button>
...

위와 같이 입력해주어야했고, 수정할 부분이 있다면 하나하나 고쳐줘야하는 끔찍한 일을 해야했겠지만,

리액트의 컴포넌트를 이용하면 저런일이 없다.^^

코드의 재사용성이 좋네~^^

<컴포넌트명/> 이렇게 사용하면 되서 수정할 부분이 있다면 컴포넌트 안의 내용만 바꿔주면됨!

추가로

<button> 은 html 태그

<LikeButton/> 처럼 대문자로 시작하는 경우는 리액트 component임!

JSX는 다 createElement라고 생각하면 된다!

state

변하게될 값이나 여지가 있는 것

state 찾는 연습을 하는것도 좋다.

ex) 마우스 호버, click때 바뀌는 부분(컨텐츠나 화면이 바뀌는 것), 심지어 메뉴에 밑줄이 있냐 없냐조차!