리액트로 채팅 프론트엔드 구축하기 [번역]

 

🐱‍👤 원문 : https://bhavaniravi.medium.com/learn-reactjs-by-building-a-chat-frontend-2d8fe664276e

Learn ReactJs by Building a Chat FrontEnd

 

리액트를 사용하여 채팅 응용프로그램을 처음부터 작성해보자.

🥗 리액트란 무엇인가?

React는 사용자 인터페이스를 빌드하기 위한 자바스크립트 라이브러리이다. 페이스북과 개인 개발자 및 기업 커뮤니티에 의해 유지 보수된다. — Wikipedia

 

간단히 말하면 HTML + JS + CSS = React이다.

 

🥗 왜 리액트를 사용하는가?

• 나는 최근에 파이썬을 사용하는 백엔드로 포지션을 옮겼고 이 일을 더 좋아한다. 하지만 내 자바스크립트 실력이 헛되이 되는 것은 싫다.
• 내 친구들 대부분이 프론트엔드 개발자들이기 때문에 그들의 언어(리액트 용어와 그들이 무엇을 말하고 있는지 둘 다)를 알아야 한다는 압박감이 있다.
• 리액트로 구축한 개츠비를 이용해 나만의 포트폴리오 웹사이트를 만들고 싶다.
• 보너스 포인트: 함께 일하고 있는 프론트엔드 개발자가 "리액트로는 할 수 없는 일은 없다"라고 말하고 갔다.
  

🥗 필수 조건

HTML, CSS 및 자바스크립트와 같은 프론트엔드 기술에 대한 이해가 필요하다.(마스터할 필요는 없다.) 이 기술들을 활용해 웹 페이지를 만드는 방법을 알고 있다면 충분하다.

 

🥗 리액트에 대한 기본적인 이해

React = Component + props + state

 

초보자로서 접하게 될 세 가지 기본 용어는 Component, state, props이다. 이 외에도, "Lazy React", "React Hooks" 등과 같은 화려한 이름들을 볼 수 있는데, 그것들은 내 목록에는 있지만 이 블로그에는 없다.

 

🥗 어떻게 시작하는가?

나는 문서화 작업광이다. 문서화와 그 문서가 제대로 작동하지 않을 때 다른 리소스나 튜토리얼을 찾는 데 엄청난 시간을 할애한다.

리액트 공식 문서의 튜토리얼은 tic tac toe 게임을 통해 Component를 구성하고 state 및 props를 가지고 노는 방법을 알려 준다. 난 그 튜토리얼을 완료했지만 프로젝트에 어떻게 적용해야 할지 전혀 이해하지 못했다.

끝내 내게 효과가 있었던 것은 "리액트로 사고하기" 부분이었다. 이 부분에선 웹 페이지를 Component로 분할하는 방법과 이러한 Component에 state, props를 도입하는 방법을 알려준다.

이 튜토리얼의 좋은 점은 실제로 사용되고 있는 방식과 매우 비슷하다는 것이다. 프론트엔드 개발자는 항상 디자인을 가지고 일한다. 따라서 tic tac toe 게임처럼 빈 슬레이트로 리액트를 시작하는 것은 큰 도움이 되지 않는다.

 

🥗 무엇을 만들 것인가?

나는 HTML, CSS 및 자바스크립트만을 사용해 이 공통 프론트엔드 채팅 모듈을 구축했다. 내 템플릿에선 챗봇을 만들고 가지고 놀 수 있다. 내 대부분의 취미용 챗봇 프로젝트는 이 템플릿을 가지고 있다.

나의 최종 목표는 백엔드 API로 메세지를 주고받는 채팅 프론트엔드를 만드는 것이었다. 내 GitHub에 있는 코드로 직접 실험하고 사용해볼 수 있다.

 

🥗  컴포넌트 수준에서 생각하기

첫 번째 단계는 웹 페이지를 구성하는 개별 UI 요소를 정의하는 것이다.

위 사진을 봤을 때, 약 4~5개의 UI 요소를 찾을 수 있다. 이러한 요소들을 각각 컴포넌트라고 하는 독립체로 감싸는 것이다. 

 

Send 버튼 (SendButton)

class SendButton extends Component{
    render(){
      return (
         <div className="send_message" 
              <div className="text">send</div>
         </div>);
    }
}

 

텍스트 박스 (MessageTextboxContainer)

class MessageTextBoxContainer extends Component{
  render(){
    return(
      <div className="message_input_wrapper">
        <input id="msg_input" 
               className="message_input" 
               placeholder="Type your messages here..."/> 
      </div>
    );
  }
}

 

아바타 (Avatar)

아바타는 프로필 사진을 나타낸다. 지금은 사람마다 서로 다른 배경의 아바타를 보여주려 한다.

class Avatar extends Component {
  render(){
    return(
      <div className="avatar"/>
    ); }
}

 

메세지 (MessageBox)

MessageBox 컴포넌트에는 Avatar 컴포넌트가 있다. 각 메세지에 대해 이 컴포넌트를 반복적으로 만들 것이다.

class MessageBox extends Component{
  render(){
    return(
      <li className={`message ${this.props.appearance} appeared`}>
        <Avatar></Avatar>
        <div className="text_wrapper">
            <div className="text">{this.props.message}</div>
        </div>
      </li>
    );
  }
}

 

전체 앱 (ChatApp)

마찬가지로, 위에서 만든 컴포넌트들을 함께 바인딩하는 전체 UI를 만든다. 여기에는 메세지가 나열되는 메세지 컨테이너, 텍스트 상자 및 보내기 버튼이 포함된다. 일단 지금은 this.state와 this.handleClick을 무시하도록 하자!

class ChatApp extends Component {
render() {
    return (
      <div className="chat_window">
        <MessagesContainer messages={this.state.messages}/>
        <div className="bottom_wrapper clearfix">
          <MessageTextBoxContainer/>
          <SendButton handleClick={this.handleClick}/>
        </div>
      </div>
    );
  }
}

 

🥗 이벤트 캡처링

컴포넌트의 states와 props에 대해 알아보기 전에 어떤 이벤트를 처리해야 하는지 알아보자.

• 보내기 버튼을 눌러 메세지 보내기
• 엔터 키를 눌러 메세지 보내기

이 블록에서는 press_enter 및 send_button_click 이벤트를 캡처하는 방법을 살펴보겠다.

보내기 버튼 컴포넌트로 돌아가 클릭 이벤트를 처리하는 메서드를 붙여보자. 비슷한 방식으로 텍스트 박스에 onKeyPress 이벤트를 추가해 이벤트를 캡처할 수 있다.

 

class SendButton extends Component{
    handleClick(){
        console.log("I am captured");
    }
render(){
      return (
         <div className="send_message" 
              onClick={this.props.handleClick}>
              <div className="text">send</div>
         </div>);
    }
}

 

🥗 이벤트 핸들링

click 및 keypress 이벤트를 캡처했으니 어떻게 이 이벤트들을 처리할지 살펴보자. 여기가 내가 제일 헤맨 부분이다.

보내기 버튼을 클릭하거나 Enter 키를 누르면 텍스트 박스에 적혀 있던 메세지가 MessageContainer의 메세지 컴포넌트로 추가된다.

이제 각 컴포넌트를 살펴보고 필요한 정보를 채우는 데 필요한 데이터가 무엇인지 알아보자. 이 데이터는 컴포넌트의 state와 props에 의해 정의된다.

 

States와 Props

각 컴포넌트를 보고 그 컴포넌트가 제 기능을 하기 위해 필요한 데이터가 무엇인지 살펴보자.

• 보내기 버튼(Send Button) : 사용자가 입력하는 current_message를 챗봇으로 전송하기 위한 접근 권한이 필요하다.
• 메세지 텍스트 박스(Message Text Box) : 사용자가 current_message를 입력할 때 Enter 키를 누르면 메세지를 챗봇으로 전송하도록 유지 및 업데이트해야 한다.
• 메세지 컨테이너(Message Container) : 봇과 사용자가 작성한 모든 메시지의 목록을 유지 관리해야 한다.

메시지 컨테이너(Message Container)에 지금 작성하고 있는 메세지를 띄우려면 사용자가 텍스트 박스(Message Text Box)에 작성한 메세지(Current Message)를 알아야 한다.

 

또한 메시지 컨테이너(Message Container)는 지금까지 입력 및 수신된 모든 메시지를 추적해야 한다. 따라서 메세지를 속성에 따라 배열로 가지고 있어야 한다.

 

class TextBox extends Component{
constructor(props){
    this.state.current_message = ""
}
onChange(e) {
    this.setState({
      current_message: e.target.value;    
    }); 
    if(e.key === "Enter"){
      // We need to add a new message to MessageContainer component
    }
}
render(){
    return(
      <div className="message_input_wrapper">
        <input ... 
             value={this.props.current_message} 
             onChange={this.props.onChange}/>
      </div>
    );
  }
}

 

텍스트 박스(TextBox) 컴포넌트의 current_message는 처음엔 비어있지만 텍스트를 입력하면 값이 변하게 된다. 그러나 텍스트 박스(TextBox) 컴포넌트에서 변경된 내용은 메세지 컨테이너(Message Container)에 표시되지 않는다.

 

"리액트에서 상태(state) 공유란 해당 상태가 필요한 가장 가까운 부모 컴포넌트에게 그것을 전달하는 것이다. 이것을 상태(state)를 끌어올린다(lifting up)고 말한다."

 

상태 끌어올리기(Lifting State Up)

이제 컨트롤을 어떤 컴포넌트로 이동시켜야 하는지가 문제다. 컴포넌트의 간단한 트리를 그려보고 무엇이 적합한지 알아보자.

 

트리를 그려보면, 모든 자식 컴포넌트가 current_message와 지금까지 수 발신된 모든 메세지 목록에 접근해야 한다는 것을 알 수 있다. 다행히도, 모든 상태(state) 및 이벤트 처리(event handling) 요구 사항을 각 자식 컴포넌트에 위임하는 상위 컴포넌트가 ChatApp 하나뿐이다.

 

우리의 ChatApp 컴포넌트는 이제 약간 복잡해질 것이다. 먼저 필요한 기능을 모두 정의하고 나중에 필요에 따라 이벤트에 추가하자.

 

addMessageBox(enter=true){
  let messages = this.state.messages;
  let current_message = this.state.current_message;
  if(current_message && enter){
    messages = [...messages, {"message":current_message}];
}
handleClick(){
  this.addMessageBox();
}
_handleKeyPress(e) {
  let enter_pressed = false;
  if(e.key === "Enter"){
    enter_pressed = true;
   }
   this.addMessageBox(enter_pressed)
}
render() {
  return (
    <div className="chat_window">
      <MessagesContainer messages={this.state.messages}/>
      <div className="bottom_wrapper clearfix"> . 
       <MessageTextBoxContainer 
           _handleKeyPress={this._handleKeyPress}
           onChange={this.onChange}
           message={this.state.current_message}> .      
       </MessageTextBoxContainer>
      <SendButton handleClick={this.handleClick}/>
      </div>
    </div>
);}

 

코드에서 알 수 있듯이 이벤트 핸들러(event handler)와 state & props를 상위 컴포넌트 수준에서 정의하고 이를 하위 컴포넌트에 위임한다.

 

---

 

프론트엔드와 자바스크립트를 싫어하던 사람에서부터 그것을 이용해 채팅 앱을 만든 사람이 되기까지, 이제 나는 리액트 덕분에 자바스크립트를 좋아한다. 내가 어떤 프론트엔드를 구축할 때도 난 리액트와 함께할 것이다!