React With Typescript Slack Clone Project Section4 - socket.io/etc

DW J·2023년 1월 12일
0

project-slack

목록 보기
6/8

socket.io

  • JavaScript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술

emit: 클라이언트에서 서버로 데이터를 전송할 때 사용하는 메소드
on: 서버에서 클라이언트로 데이터를 전솔할 때 사용하는 메소드

설치)

npm install socket.io

사용)

import io from 'socket.io-client';

const socket = io.connect('url', {});
const disconnect = io.disconnect();

참조 및 정보 - 링크

HOC (Higher Order Component)

  • HOC는 컴포넌트 로직을 재사용하기 위한 React의 구성적 특성에서 나오는 패턴
  • 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수
const higherOrderComponent = (component) => {
	const wrapperComponent = () => {
    	// 여기서 공통로직 추가
        return <Component />;
    }
    
    return <wrapperComponent />;
}

const EnhancedComponent = higherOrderComponent(component);

메모이제이션

  • 연산의 결괏값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때 재사용

React.memo

  • 컴포넌트 자체를 메모이제이션
  • React.memo는 HOC(Higher Order Component)컴포넌트

useMemo

  • 함수의 리턴 값을 메모이제이션
  • deps에 들어있는 의존성 값이 변경되지 않는다면 메모이제이션 된 값을 사용
profile
잘하는것보다 꾸준히하는게 더 중요하다

0개의 댓글