JSX를 이용하여 버튼 클릭 횟수를 알려주는 앱 만들기 (easier way)

지난 시간에 이어서 진행한다.

📌 이전 코드와 JSX를 이용한 코드 비교

3. Container 생성

이전 코드

. . . . .
const container = React.createElement("div", null, [Title, Button]);
. . . . .

JSX를 이용한 코드

. . . . .
const Container = () => {
  return (
    <div>
      <Title />
      <Button />
    </div>
  );
}
ReactDOM.render(<Container />, root);

- 변수명은 첫 글자를 대문자로 하여 적어주었다.

* 컴포넌트의 첫 글자는 반드시 대문자여야 한다! 만약 소문자라면, React와 JSX에서는 HTML button tag라고 인식하게 된다.

- div element를 생성할 것이므로 <div> tag를 적어주었다.

- 이전 코드에서는 content를 array 형식으로 적어주었는데, JSX를 이용한 코드에서는 div tag 안에 변수명을 tag 안에 적어줌으로써 content를 구현하였다. 이로써 Container는 Title 컴포넌트와 Button 컴포넌트를 조합하여 만든 컴포넌트가 되었다.

- Container는 함수 형태이므로 render의 인자로 들어갈 때 tag 형식으로 들어간다.

* Title과 Button을 <div>에 온전히 포함시키기 위해서는 Title과 Button을 함수화시켜야 한다. 즉, jsx 값이 return 되도록 해야 한다.

. . . . .
const Title = () => {
  return (
    <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
      Hello I'm a title
    </h3>
  );
};

const Button = () => {
  return (
    <button
      style={{
          backgroundColor: "tomato",
      }}
      onClick={() => console.log("im clicked")}
    >
      Click me
    </button>
  );
};
. . . . .

JSX에서는 어플리케이션을 위와 같이 여러 작은 요소(컴포넌트)로 나누어 관리할 수 있게 해준다.

여러 요소로 잘게 쪼개서 필요할 때 합쳐서 렌더링하기만 하면 된다.

오늘의 코드

!--버튼을 몇 번 클릭했는지 세는 어플이다.-->
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!--아래 두 줄의 코드는 리액트를 실행시키는 코드이다. 작성하면 console창에 react라고 작성했을 때 결과를 불러올 수 있어야 한다.-->
  <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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    const Title = () => {
      return (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
          Hello I'm a title
        </h3>
      );
    };
    const Button = () => {
      return (
        <button
          style={{
            backgroundColor: "tomato",
          }}
          onClick={() => console.log("im clicked")}
        >
          Click me
        </button>
      );
    };
    const Container = () => {
      return (
        <div>
          <Title />
          <Button />
        </div>
      );
    };
    ReactDOM.render(<Container />, root);
  </script>
</html>

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React for Beginners

nomadcoders.co