smilehyeon

내 뒤에 돌을 하루에 하나씩 던지면 어느샌가 산이 되어있을 거야 :)

노마드코드님의 유튜브를 즐겨보는 구독자로서, 무료로 풀어두신 클론코딩 강의를 들어보고자 한다:)
React로 영화 웹서비스 만들기

오마이갓…!…!
니콜라스님이 2021년 버전 강의를 11월에 업로드해주셨다.
기왕 배우는 김에 2021년 버전으로 듣는 것이 좋을 것 같아 다시 시작하려고 한다… ㅎㅎ
이전에 배웠던 것들을 다시 재정립하고 복습한다 생각하고 다시 화이팅!!

Before React ~ JSX🐾

react를 하기 전에 javaScript로 먼저 간단한 걸 짜볼 거다.

<html>
    <body>
        <span>Total Clicks : 0</span>
        <button id="btn">click</button>
    </body>
    <script>
        let counter = 0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");
        function handleClick(){
            counter = counter + 1;
            span.innerText = 'Total Clicks : ${counter}';
        }
        button.addEventListener("click", handleClick);
    </script>
</html>



버튼을 클릭하면 그 횟수를 보여주는 코드다.
바닐라 JS로는 이걸 구현하기 위해서는

  1. HTML을 만든다.
  2. JavaScript에서 가져온다.
  3. event를 감지한다.
  4. 데이터를 업데이트한다.
  5. HTML을 업데이트한다.



이렇게 된다.
기능이 많아질수록 더 헷갈리게 될거다… ㅎㅎ

react는 모든 것이 JavaScript로 시작하고, 그 다음에 HTML이 된다.
따지면 바닐라 JS와 정반대 같은 느낌으로 볼 수 있다.
또한, 바닐라 JS에서는 우리는 수없이 많은 이벤트 리스너를 생성해야 하지만,
react에서는 아래와 같이 element를 생성하면서 이벤트 리스너를 넣어줄 수 있다.

const btn = React.createElement("button", {
            onClick: () => console.log("im clicked"),
        }

하지만, 위의 코드는 일반적으로 사용하는 코드가 아니다.
자 그럼 이제 진짜로 대중적으로 쓰는 코드로 바꿔보자!!
JSX를 이용하여 createElement를 대체할 거다.




JSX란?

JavaScript를 확장한 문법이다.
HTML가 사용하는 문법과 비슷한 문법으로 사용이 가능하므로 매우 익숙하고 편리하다.


우선 바꾸기 전에 babel을 이용하여 우리가 쓰는 내용을 기존의 react문법으로 바꿔줄 거다.
일단 테스트니까 대충 babel을 script에 선언해주는 방식으로 간다…!
babel이 있으면 JSX형식으로 입력하면, 기존 react문법으로 자동 변환해준다.
사실 위의 코드가 정석 코드인데, 아무도 저렇게 쓰지 않는다고 한다..ㅎㅎㅎ
개발자들은 언제나… 편한 것을 추구하니께….ㅎㅎㅎ

const button = (
    <button 
        onClick={()=>console.log("im clicked")}
    >
        click me
    </button>
);

먼저 위 코드만 1차적으로 바꿔봤다.
정말 HTML이랑 비슷한 문법이 탄생했다.
id 등의 property를 적는 곳에 이벤트 리스너만 적어주면 끝이다.
WOW..!



const root = document.getElementById("root");
    const title = (
        <h3 id="title"
            onMouseEnter={() => console.log("im entered")}
        >
            Hello
        </h3>
    );
    const button = (
        <button
            onClick={() => console.log("im clicked")}
        >
            click me
        </button>
    );

const container = React.createElement("div", null, [title, button]);
ReactDOM.render(container, root);

짜자잔 이렇게 완성이 되는거다ㅎㅎㅎㅎ
너무너무 신기해….ㅎㅎㅎㅎ
이제 다음시간엔 JSX에 대해 더욱 자세히 알아보잡ㅎㅎ~~

참고