100 줄의 코드로 React Hooks를 사용하여 채팅 앱 구축

이 튜토리얼은 놀랍게도 간결한 코드로 기능적 채팅 응용 프로그램을 구축하여 React 후크의 힘을 보여줍니다. 이전 기사는 반응 후크를 소개하여 기능을 사용하여 구성 요소를 만들 수있는 능력을 보여줍니다. 이 튜토리얼은 후크가 개발을 단순화하고 보일러 플레이트를 줄이는 방법을 보여줍니다.

일부 오픈 소스 옵션을 포함한 여러 React 후크를 활용하여 프로세스를 간소화하고 기능을 효율적으로 빌드합니다. 이러한 사전 구축 된 후크는 확립 된 표준을 준수하여 코드 보안 및 유지 관리 가능성을 향상시킵니다.

프로젝트 요구 사항

채팅 응용 프로그램에는 다음이 포함됩니다.

• 서버에서 과거 메시지를 검색합니다.
• 그룹 대화방 기능.
• 사용자 연결 및 단절에 대한 실시간 업데이트.
• 메시지 보내기 및 수신.

가정 :

• 서버는 블랙 박스로 취급되어 간단한 소켓을 통해 통신합니다.
• 스타일링은 단일 CSS 파일 (링크 된 저장소에서 사용 가능)으로 처리됩니다.

개발 환경 설정

이 프로젝트에는 node.js 및 npm (노드 패키지 관리자)이 필요합니다. 필요한 경우 설치하십시오. 그런 다음 React Creat app를 사용하여 React 프로젝트를 만듭니다.

 NPX Create-React-App 소켓 클라이언트
CD 소켓 클라이언트
NPM 시작

기본 환영 페이지를 보려면 http://localhost:3000 으로 이동하십시오. 우리는 사용 된 후크 주위에 튜토리얼을 구성 할 것입니다.

useState

useState 후크는 구성 요소 상태를 관리합니다. 클래스 구성 요소에서 this.state 사용하는 대신 useState 사용하여 사용자 이름과 같은 영구 데이터를 저장합니다. 변수를 useState 업데이트는 구성 요소를 자동으로 다시 렌더링합니다.

후크 가져 오기 :

 import React, {usestate} 'react';

간단한 구성 요소는 로그인 한 경우 "Hello"또는 id 변수를 기반으로 로그인 양식을 표시합니다.

 // app.js
import React, {usestate} 'react';
import './index.css';

내보내기 default () => {
  const [id, setid] = usestate ( "");
  const [nameInput, setNameInput] = usestate ( "");
  const [room, setroom] = usestate ( "");

  const handlesubmit = e => {
    e.preventDefault ();
    if (! nameinput) {
      return alert ( "이름이 비어질 수 없음");
    }
    setid (nameinput); // 수정 : 이름 대신 nameInput을 사용합니다
    socket.emit ( "조인", nameinput, room); // 수정 : 이름 대신 nameInput을 사용합니다
  };

  // ... (구성 요소의 나머지)
};

이것은 로그인 상태를 관리하기위한 useState 보여줍니다.

useSocket hook

Open-Source useSocket Hook는 Socket.io 라이브러리를 사용하여 서버 연결을 관리합니다. 이는 표준 socket.io 클라이언트의 글로벌 선언과 비교하여 WebSocket 연결에 대한보다 관리 가능한 접근 방식을 제공합니다.

후크 설치 :

 NPM Add use-Socket.io-Client

기본 사용 :

 const [socket] = useocket ( 'socket-url');

수입 및 초기화 :

 'use-socket.io-client'에서 avest useocket;
const [socket] = useocket ( ''<your-socket-url> ');
socket.connect ();
Console.log (소켓);</your-socket-url>

브라우저 콘솔의 연결을 확인하십시오.

useImmer 훅

useImmer Hook는 어레이 및 객체에 대한 불변의 상태 관리를 단순화합니다. 원래 상태의 직접적인 돌연변이를 방지합니다. 이는 온라인 사용자 및 메시지 목록을 관리하는 데 중요합니다.

후크 설치 :

 NPM 추가 IMMER 추가

기본 사용 :

 const [data, setData] = useImmer (defaultValue);

setData 안전한 조작을위한 초안 사본을 생성하여 원래 상태가 그대로 유지되도록합니다.

 setData (draft => {
  draft.push (newitem);
});

useEffect hook

내장 된 useEffect 후크는 렌더링 후 코드를 실행합니다. 우리는이를 사용하여 소켓 리스너를 처리하고 중복 메시지 디스플레이를 피할 수 있습니다.

수입:

 import React, {usestate, useeffect} '에서'react ';

Messages 구성 요소는 메시지 및 업데이트를 렌더링합니다.

 const 메시지 = propss => props.data.map (m =>
  m [0]! == ''?<div> {m [0]} : {m [1]}</div> :<div classname="innermsg"> {m [1]}</div>
));

useEffect 내의 소켓 로직은 반복 메시지 렌더링을 방지합니다.

 useeffect (() => {
  socket.on ( 'update', message => setMessages (draft => {
    draft.push ([ '', message]);
  });
  // ... 다른 소켓 리스너
}, []);

"조인"메시지는 더 많은 청취자를 트리거합니다.

최종 터치 및 완전한 코드

최종 앱에는 다음이 필요합니다.

• 온라인 사용자를 표시하는 Online 구성 요소.
• 온라인 사용자를위한 useImmer 훅 및 소켓 리스너.
• 메시지 제출 핸들러.

완전한 App.js 는 여기에 포함하기에는 너무 광범위하지만 전체 코드는 Github (원본 기사에 제공된 링크)에서 사용할 수 있습니다.

이 튜토리얼은 최소한의 코드로 복잡한 응용 프로그램을 구축하기위한 React 후크의 효율성을 보여줍니다. 이 예제는 기능적 채팅 응용 프로그램을 보여 주지만 원칙은 광범위한 프로젝트에 적용될 수 있습니다.

위 내용은 100 줄의 코드로 React Hooks를 사용하여 채팅 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!