리액트 기본 공부 - Component 활용 간단한 버튼 만들기

2022.12.26 - [React 공부] - React 입문 - Component

React 입문 - Component

 

 

 

이전 포스팅에 컴포넌트에 대해 다뤘는데,

이번에는 리액트 코딩을 해보려고한다.

 

리액트를 처음 접하는거라 간단하게 버튼만들기 도전

 

 

▶️ 리액트 기본 코딩

import React from 'react';
function App() {
  
	// <---- 자바스크립트 영역 ---->

  return (
  /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
   {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}

export default App;

위 코드에서 버튼 만들기를 진행하려고 한다.

 

 

이렇게  가운데 버튼을 만들고  그 후 버튼을 클릭하면 경고창(alert)에 wow 가 뜨도록 만들어볼 예정이다.

 

 

import React from "react";
function App() {
  // <---- 자바스크립트 영역 ---->
  const handleClick = () => {
    alert("wow");
  };
  
  
  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <span>컴포넌트 만들기</span>
      <button onClick={handleClick}>클릭</button>
      
      
      {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}

export default App;

<span> 태그를 통해 문구를 써주고, <button>태그로 버튼을 만들었다.

 

여기까지는 리액트를 배우기 전에 했던 자바스크립트와 똑같다.

 

리액트로 오면서 달라진 코드작성법은

 

html형식으로 작업한 것이 아니라 스크립트를 넣는 영역이나 스타일, 바디의 위치가 다르다.

 

button에 이벤트 설정하는 방법이 살짝 다르다.

 

 

• HTML 에서 적용하는 버튼 이벤트

<button onClick="addbtn()"> </button>

 

• 리액트에서 적용하는 버튼 이벤트

<button onClick={addBtn}> </button>

 

HTML에서는 버튼에 이벤트를 생성하면 큰따옴표와 그 안에 함수가 들어갔다.

리액트에서는 중괄호에 이름이 들어간다.

 

 

▼ 리액트 공식 사이트 / 이벤트 처리하기

이벤트 처리하기 – React

 

 

▼ 알아두면 좋을 자바스크립트 함수와 버튼클릭 이벤트

 

5. 자바스크립트 - 함수(Function)와 버튼 클릭 이벤트(Button Click Event)

홈짱닷컴