[TIL] 220120

Lee Syong·2022년 1월 20일

JavaScript React TIL

TIL

목록 보기

155/204

📝 오늘 한 것

React 요소 생성 및 배치, 이벤트 등록
JSX

📖 학습 자료

노마드 코더 강의 'ReactJS로 영화 웹 서비스 만들기'

📚 배운 것

1. THE BASICS OF REACT

React JS는 UI를 interactive 하게 만들어준다.

우선, React JS가 어떤 문제를 해결해주는지, 왜 유용한지를 알고 사용할 필요가 있다.
이를 알아보기 위해 바닐라 JS 코드와 React JS를 사용해 작성한 코드를 비교해볼 것이다.

1) React JS 설치

React JS를 설치하기 위해서는 2개의 JavaScript 코드를 import 해야 한다.
하나는 react이고, 다른 하나는 react-dom이다.
react는 어플리케이션을 interactive 하게 만들어주는 라이브러리이다.
react-dom은 React로 생성한 React element를 HTML body에 둘 수 있도록 한다.

( 여기선 node.js 사용 x )

<!DOCTYPE html>
<html>
  <body></body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
</html>

콘솔에 React라고 작성하면 React Object가 출력된다.
이제 코드에 React가 존재하기 때문에 이를 불러와 React.~~~ 라고 쓸 수 있다.

2) React JS 규칙

※ React JS로 구현해볼 HTML & 바닐라 JS 코드

<!DOCTYPE html>
<html>
  <body>
    <h3 id="total-click">Total Click: 0</h3>
    <button id="btn">Click</button>
  </body>
  <script>
    const button = document.querySelector("#btn");
    const h3 = document.querySelector("#total-click");
    let counter = 0;
    const handleBtnClick = () => {
      counter++;
      h3.innerText = `Total Click: ${counter}`;
    };
    button.addEventListener("click", handleBtnClick);
  </script>
</html>

(1) React JS element 생성

React JS는 HTML 코드를 html 파일에 작성하는 대신 JavaScript 코드를 사용해 작성한다.
react-dom이 모든 React element를 HTML body에 둘 수 있도록 한다.

먼저, React element를 생성하기 위해 사용하는 '어려운 방법'을 살펴볼 것이다.
이는 개발자들 사이에서 실제로 사용되는 방법은 아니지만, React JS의 본질을 이해하는 데 중요하다.
~~따라서, 이해가 목적일 뿐 절대 외울 필요는 없다.~~

React element 생성한 후 이를 HTML body 안에 배치하기

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script>
    const root = document.getElementById("root");
    const h3 = React.createElement("h3", { id: "cool", style: { color: "red" } }, "Hello!");
    const btn = React.createElement("button", null, "Click!");
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);
  </script>
</html>

React.createElement()는 React element를 생성한다.
첫 번째 인자로는 생성할 태그 이름을 문자열로 받는다.
두 번째 인자로는 해당 태그에 적용하고자 하는 속성을 object로 받는다.
세 번째 인자로는 해당 태그의 컨텐츠를 받는다.

ReactDOM.render()는 React element를 HTML 요소로 만들어 배치함으로써 사용자가 볼 수 있도록 한다.

이때 React element를 어디에 배치할 것인지를 지정해야 한다.
가장 많이 사용되는 방법은 body 안에 id가 root인 div 요소―body 안에 생성할 유일한 HTML 코드이다―를 만든 후 JS 파일에서 이를 가져와 여기에 지정하는 것이다.

여러 개의 React element를 render하고 싶다면, 여러 개의 React element를 포함할 container를 만든 후 이를 render 해야 한다.
이때 container를 만드는 React.createElement()의 세 번째 인자에는 container가 포함할 HTML 요소들을 아이템으로 가지는 배열을 전달해야 한다.

이제 개발자 도구의 Elements 탭에서 body 안에 span 태그가 존재하는 것을 확인할 수 있다.

바닐라 JS VS React JS

바닐라 JS를 사용하면(HTML→JS) HTML 요소를 만든 후 이를 js 파일로 가져오는 반면,
React JS를 사용하면(JS→HTML) HTML에 배치할 요소를 JavaScript로 만든다는 차이점이 있다.

이는 곧 React JS가 HTML을 업데이트 함으로써 사용자에게 보여질 내용을 컨트롤 할 수 있음을 의미한다.

(2) event 등록

앞서 React element를 생성할 때 React.createElement()의 두 번째 인자에 해당 요소에 적용할 속성을 전달할 수 있다고 했는데, 이를 이용해 event를 등록할 수도 있다.

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script>
    const root = document.getElementById("root");
    const h3 = React.createElement(
      "h3",
      {
        onMouseEnter: () => console.log("mouse enter"),
        style: { color: "red" },
      },
      "Hello!"
    );
    const btn = React.createElement(
      "button",
      { onClick: () => console.log("click") },
      "클릭"
    );
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);
  </script>
</html>

3) JSX

앞서, React element를 생성하기 위해 사용하는 어려운 방법을 살펴봤다.
JSX를 사용하면 '보다 쉽고 편리하게' React element를 생성할 수 있다.

JSX는 자바스크립트를 확장한 문법이지만 HTML에서 사용한 문법과 비슷하여 React.createElement()를 사용하는 것보다 좀 더 쉽게 React 요소를 만들 수 있도록 한다.

(1) React.createElement() 대신 JSX로 작성

// React.createElement() 사용
const h3 = React.createElement(
  "h3",
  {
    onMouseEnter: () => console.log("mouse enter"),
    style: { color: "red" },
  },
  "Hello!"
);

const btn = React.createElement(
  "button",
  { onClick: () => console.log("click") },
  "클릭"
);

// JSX로 작성한 코드
const Title = (
  <h3
    onMouseEnter={() => console.log("mouse enter")} // 등호(=) 뒤에 {}를 쓴다, 속성 끝에 쉼표는 쓰지 않는다
    style={{ color: "red" }}
  >
    Hello!
  </h3>
);

const Button = <button onClick={() => console.log("click")}>클릭</button>;

(2) babel 설치

한편, 브라우저는 JSX로 작성한 코드를 기본적으로 이해할 수 없다.
브라우저가 JSX로 작성한 코드를 이해할 수 있도록 React 코드로 바꾸기 위해 babel을 사용해야 한다.

(여기선 node.js 사용 x)

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  <!-- JSX로 작성한 코드 -->
</script>

(3) 하나의 컴포넌트 안에 다른 컴포넌트를 넣는 방법

앞서, 여러 개의 React element를 render하고 싶을 때는, 여러 개의 React element를 포함할 container를 만든 후 이를 render 해야 한다고 했다.
이때 container를 만들기 위해 React.createElement() 대신 JSX를 사용해 코드를 작성할 수 있다.

우선, HTML 요소를 담고 있는 변수들을 함수로 만들어야 한다.

여러 개의 컴포넌트를 포함할 컴포넌트도 함수로 만든다.

해당 상위 컴포넌트에 여러 개의 하위 컴포넌트들을 추가한다. (JSX 문법을 따른다)

상위 컴포넌트를 render 한다.

💡 주의!
이때 직접 만든 컴포넌트 이름의 첫 번째 글자는, 일반 HTML 요소와 구분하기 위해, 반드시 '대문자'여야 한다.

const root = document.getElementById("root");

// h3 태그를 감싸고 있는 ()는 VS Code에서 자동으로 생긴 것이다
// 그냥 h3 태그를 return 하는 화살표 함수일 뿐이다
const Title = () => (
  <h3
    onMouseEnter={() => console.log("mouse enter")}
    style={{ color: "red" }}
  >
    Hello!
  </h3>
);

const Button = () => (
  <button onClick={() => console.log("click")}>클릭</button>
);

const Container = () => (
  <div>
    <Title />
    <Button />
  </div>
);

ReactDOM.render(<Container />, root);