[React] 22.07.15 회고록

 

event에 함수를 2개이상 사용하는 방법

이벤트에서 함수를 2개이상 사용하는 방법은 알고 있었다.

... onClick={() => {
	func1();
    func2();
}}

이렇게 사용하면 함수를 2개이상 사용할 수 있다. 하지만 여태 사용하지 못했던 것은 props로 받아온 함수를 포함해서 2개 이상 사용하는 방법을 몰라서였다. props로 onClick 함수를 받아올 경우 onClick; onClick(); 둘다 작동을 하지 않았었다. 그런데 오늘 유심히 에러메세지를 보니 onClick();을 했을경우 argument 하나를 요구하고 있었다. 그래서 혹시나 하는 마음에 event를 넣어봤더니 잘 작동하였다. 의외로 아주 간단한 문제였었다.

 

import React from "react";
interface PopUpChkProps {
  text: string;
  onClickConfirm: React.MouseEventHandler<HTMLButtonElement>;
  onClickCancel: React.MouseEventHandler<HTMLButtonElement>;
}

function PopUpCheck({
  text,
  onClickConfirm,
  onClickCancel,
}: PopUpChkProps): JSX.Element {
  return (
    <div className="wrap bg-blue-500 h-[80px] flex flex-col justify-between mb-4">
      <span className="font-main text-lg font-semibold flex justify-center">
        {text}
      </span>
      <div className="btn__wrap bg-yellow-400 flex justify-evenly">
        <button
          className="bg-button font-main text-sm text-white rounded w-[60px] h-[28px]"
          onClick={(event) => {
            onClickConfirm(event);
            onClickCancel(event);
          }}
        >
          확인
        </button>
        <button
          className="bg-button font-main text-sm text-white rounded w-[60px] h-[28px]"
          onClick={onClickCancel}
        >
          취소
        </button>
      </div>
    </div>
  );
}

export default PopUpCheck;

 

그래서 여태 적용하지 못하고 넘겼던 부분들에 모두 적용해주었다. 뿌듯.

 

Socket.io 간단히 알아보기

socket.io 를 react에서 typescript와 함께 사용하려면 npm install @types/socket.io 를 이용해서 socket.io를 다운받으면 된다고 한다. -> 인줄 알았는데 공식문서에 이렇게 나와있다.. 휴 에러낼뻔.. 다음 명령어를 사용하자  npm install socket.io-client 

socket.io에서 대표적으로 사용하는 함수 4가지를 살펴보자.

 

• socket.connect() : 소켓을 연결할때 사용하는 함수이다.

const socket = io.connect(`${backendUrl}`);

 

• socket.emit("이벤트 명", data) : 이벤트 명을 지정해서 데이터를 보내는 함수이다. (서버 -> 클라, 클라 -> 서버)

socket.emit("message", data);

 

• socket.on("이벤트 명", callback) : 이벤트 명의 데이터를 받아서 콜백함수를 실행시키는 함수이다.

socket.on("message", (data) => {
	func(data);
});

 

• socket.disconnect() : 소켓의 연결을 끊는 함수이다.

socket.disconnect();

 

일단은 이정도로 간단하게만 알아보았다. 직접 사용해보면서 그리고 또 검색해보면서 코드를 짜봐야 더 와닿을 것 같다. 지금 이렇게만으로는 잘 모르겠다. 다른 방법이 있는지도 한편 살펴보아야 할 것 같다는 생각이 든다.