React로 컴포넌트 구성하고 이벤트 사용하기

리액트를 시작하고 처음으로 과제를 받았다.

사실... event를 DOM을 불러서 하던 바닐라 자바스크립트에 비해 쉬울거라고 생각했는데

역시 처음 배우는거라 조금 버벅거렸다..

---

[과제 1] 예시화면대로 컴포넌트 구성하기

[과제 2] input, button 태그에 event 적용하기

<input 태그>

onChange 이벤트를 활용해주세요.

handleInput 이라는 함수를 만들어서 onChange 이벤트가 발생했을 때 실행되도록 구현해주세요

handleInput 함수가 실행되면 개발자도구에 console 탭에 "input 태그 동작"이라는 메세지가 출력되도록 구현해주세요

<button 태그>

onClick 이벤트를 활용해주세요.

handleButton 이라는 함수를 만들어서 onClick 이벤트가 발생했을 때 실행되도록 구현해주세요

handleButton 함수가 실행되면 개발자도구에 console 탭에 "button 태그 동작"이라는 메세지가 출력되도록 구현해주세요

---

import, export도 하고 컴포넌트도 제대로 작성했는데 오류가 떠서 흰 화면만 나와서 당황했고

디버깅을 하는데 정말... 보여지는게 없어서 뭘까하고 공부했던 내용을 다시 읽으면서 상기시켰다.

그 결과,,, 정말 처음 배운거 티내는 실수를 했었다는 것을 깨달았다..

 

컴포넌트의 종류 중 함수 컴포넌트를 쓰기 때문에 함수와 모양이 똑같은데

그것을 구별하는 방법이 컴포넌트는 대문자, 함수는 소문자로 시작한다는것이다.

그렇다. 난 컴포넌트를 소문자로 시작해서 아무것도 출력되지 않는 흰화면이 나왔던것이다..하하..

이유를 찾았고 그걸 찾기위해 시간을 썼으니 다신 이런 실수는 안할거같다.

 

먼저 react.js와 scss import 해주고 export도 미리 해준다.

import React from "react";
import "./Introduce.scss";

export default Introduce;

대문자로 시작하는 Introduce라는 컴포넌트를 만들어주고 return문 먼저 적어주었다.

jsx 문법으로 javascript 안에서 html 형식을 나타낼 수 있게 되었다.

모든 태그들을 감싸주고 있는 제일 상위 div className을 컴포넌트 명과 동일하게 적어주고 여기서는 소문자로 시작한다.

그리고 이벤트를 실행할 onchange와 onclick의 중괄호 안에 만들어줄 함수명을 미리 넣어줬다.

(DOM을 불러올 때는 addEventListener와 change, click로 썼는데 리액트에서는 그저 앞에 on만 붙여주고 옆에 함수를 적어준다.)

return (
    <div className="introduce">
      <img className="photo" alt="hambbang" src="images/IMG_7632.JPG" />
      <div className="letters">
        <p className="name">이름</p>
        <p className="number">기수</p>
      </div>
      <div className="inputButton">
        <input id="input" onChange={HandleInput}></input>
        <button id="button" onClick={HandleButton}>
          클릭
        </button>
      </div>
    </div>

event에 적용될 함수들을 적어주었다.

함수들이 제대로 작동하는지 console만 찍어주라고 해서 간단했다.

이제 여태 썼던것들을 합쳐서 써주면 된다!

 

리뷰시간에 혹시 이 함수들을 컴포넌트 밖에서 선언해서 써도 되냐고 물어봤는데

그래도 작동이 되긴하지만 컴포넌트 내에서만 사용할 함수이기 때문에 안에 넣워주는게 좋다고 하셨다.

  
  function HandleInput() {
    console.log("input 태그 동작");
  }

  function HandleButton() {
    console.log("button 태그 동작");
  }

완성된 화면은 이렇다!

input에 글자가 입력되면 console창에 input 태그 동작이라는 글이 뜨고

button을 누르면 console창에 button 태그 동작이라는 글이 뜬다

아래는 전체 코드이다.

import React from "react";
import "./Introduce.scss";

function Introduce() {
  function HandleInput() {
    console.log("input 태그 동작");
  }

  function HandleButton() {
    console.log("button 태그 동작");
  }
  return (
    <div className="introduce">
      <img className="photo" alt="hambbang" src="images/IMG_7632.JPG" />
      <div className="letters">
        <p className="name">이름</p>
        <p className="number">기수</p>
      </div>
      <div className="inputButton">
        <input id="input" onChange={HandleInput}></input>
        <button id="button" onClick={HandleButton}>
          클릭
        </button>
      </div>
    </div>
  );
}

export default Introduce;