본문 바로가기

React

[React] 컴포넌트 만들기

다음과 같은 컴포넌트 만들기

나의 코드

import React from "react";
function App() {
  // <---- 자바스크립트 영역 ---->
  const myBtn = () => {
    alert("클릭!");
  };

  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
      <span>이곳은 내가 만든 App컴포넌트 입니다.</span>
      <button onClick={myBtn}>클릭!</button>
    </div>
  );
}

export default App;

onClick 프로퍼티를 카멜케이스로 작성하고, 다음에 수행할 동작에 대한 함수를 {} 로 감싸서 작성.

'React' 카테고리의 다른 글

[React] children props  (0) 2023.06.13
[React] 부모-자식 컴포넌트/ props/ prop drilling  (0) 2023.06.13
[React] 절대경로 설정  (0) 2023.06.13
[React] Create React App 리액트 셋업  (0) 2023.06.13
[React] npm, yarn  (0) 2023.06.13