TIL 15 | React 비포 애프터 비교

SammyJung·2021년 4월 11일
0

JavaScript DOM을 통한 기능 구현과 React를 이용한 구현 비교

로그인과 댓글 추가 기능을 구현하면서 두 가지 방법으로 구현을 하는 과정을 거쳤다.

☝️우선 첫번째는 자바스크립트로 직접 DOM에 접근하여 DOM 요소들을 직접 생성하고 조작하는 방법이다.

이 방법은 자바 스크립트가 출현한 2세대 웹에서 웹을 동적으로 만들어 주는 것과 같은 방식으로 구현한 것이다.

✌️두 번째는 동일한 댓글 추가 기능을 구현하면서 리액트를 이용하여 컴포넌트를 분리하여 map 함수를 이용하여 구현했다.

현재 3세대 (모던웹)에서 쓰고 있는 방법인데 이렇게 웹이 발전하면서 거쳐온 과정에 따라 학습하면서 직접 수많은 불만과 불편함을 개선함으로써 웹이 발전해 나가고 수많은 사람들이 겪는 불편함을 해소 시켜 줄 수 있구나 하는 경험을 조금이나마 하게 되었다!

이제 두가지 방법으로 직접 구현한 코드를 보면서 비교해 보고자 한다.🧐

1. JavaSript로 DOM EVENT 직접 Hanble 하기

main.js

const inputComment = document.getElementsByClassName('comment_input')[0];
const commentBtn = document.getElementsByClassName("comment_btn")[0];

const commentBox = document.body.querySelector(".comment");

function addCommentPtag(){
    let addPtag = document.createElement('p');
    addPtag.className="comment_text";
    addPtag.innerHTML=inputComment.value;
    commentBox.appendChild(addPtag);
}

commentBtn.addEventListener("click",function(){
    addCommentPtag();  
});

inputComment.addEventListener("keypress",function(e){
    if(e.keyCode===13){addCommentPtag();}
});

우선 댓글을 추가하기 위해 main.html에 있는 comment_input의 클래스 이름을 가진 요소들이 있는 객체에서 첫번째 요소를 가져와서 변수에 담고 변수의 값을 할당해주었다. 값을 입력할 때 마다 value값을 p태그에 추가해주는 addCommentPtag 함수를 만들어 주었다.

그리고 댓글 버튼에 addEventListener 메소드로 click 이벤트가 발생할때 Ptag가 추가 되는 함수를 호출한다. input 태그에도 key press 이벤트가 발생할때 Ptag가 함수를 호출한다.

해당 코드에서는 댓글 입력내용만 화면에 보여주는 데에도 해당 DOM요소에 하나씩 직접 접근해서 유지보수를 해야하는 번거로움이 있다. 여기서 댓글을 쓰는 닉네임이나 user_img가 있다면 동일한 작업을 반복적으로 해주어야 한다.

2. 리액트 Component로 관리하기

Feed.js (render메소드의 return문 일부)

<input className="comment_input"
onChange={this.handleChange}
onKeyPress={this.addCommentEnter}
value={this.state.commentValue}
type="text"
placeholder="댓글을 입력하세요" />
 
<button className="comment_btn" onClick={this.addComment} />게시
           

우선 jsx 문법을 통해 각각 하나씩 addEventlistener 메소드를 쓰지 않아도
html 이벤트에 아래에서 정의한 addComment,handleChange,addCommentEnter 메소드를 각각 호출할 수 있다.

Feed.js (render메소드 상단)

import React, { Component } from "react";
import CommentList from "./Comment/CommentList";

class Feed extends Component {
  constructor() {
    super();
    this.state = {
      commentValue: "",
      commentList: [],
    };
  }

handleChange = (e) => {
    this.setState({
      commentValue: e.target.value,
    });
    // console.log(this.state.commentValue);
  };

  addCommentEnter = (e) => {
    if (e.key === "Enter") {
      this.addComment();
    }
  };

  addComment = () => {
    const { commentList, commentValue } = this.state;

    this.setState({
      
      commentList: [
        ...commentList,
        {
          id: commentList.length + 1,
          userName: "sammy",
          content: commentValue,
        },
      ],
      commentValue: "",
    });
    // console.log(this.state.commentList);
  };
  
  (중략)
  
   <section className="comment">
              <ul>
                {this.state.commentList.map((comment) => {
                  return (
                    <CommentList
                      key={comment.id}
                      name={comment.userName}
                      comment={comment.content}
                    />
                  );
                })}
              </ul>
              

그리고 state와 props를 이용해서 id, username, content 를 한번에 자식요소로 보낼 수 있다. 기존에는 appendChild() 했던 부분과 비교할 수 있다.

commentList.js

import React, { Component } from "react";
import "./Comment.scss";

class CommentList extends Component {
  render() {
    // console.log(this.props);
    return (
      <li id={this.props.key} className="comment_list">
        <span className="comment_name">{this.props.name}</span>
        <span>{this.props.comment}</span>
      </li>
    );
  }
}

export default CommentList;

이와 같이 props를 통해 부모에서 한번에 받아올 수 있어서 편리하다.
처음에는 state와 props 개념이 익숙하지 않아서 굉장히 불편하게 느껴졌었는데
쓰다보니 훨씬 편리 하다는 것을 알게 되었다.

그리고 mockdata로 feed와 story부분에 반복되는 코드가 많았는데
재사용 되는 UI 단위를 쪼개서 사용하다보니 data를 뿌려줄 때 엄청 편리 했다.

1세대 정적인 웹, 2세대의 동적인 웹을 거쳐 3세대의 웹의 기능이 복잡해지고 다이나믹 해지면서 리액트라는 자바스크립트 라이브러리를 쓰는 이유에 대해 다시 한 번 격공하게 되는 과정을 거쳤다.

지난 한 달 회고 😎

개발 공부를 다시 본격적으로 시작한지 두 달째 html,css,자바스크립트 기본문법을 익히고 리액트로 인스타그램을 클론 하면서 많은 것을 느꼈다. 개발자로서 성장하는데 중요한 것은 생각하는 연습에 게을러 지지 않는 것 같다.

특히 주변의 코드리뷰를 받으면서 어떤 코드 한 줄도 그냥 쓴 것은 없고 나만의 이유가 있어야 한다는 것을 알게 되었고, 리팩토링을 하면서 내가 스스로 쓴 코드를 개선하는 것은 무척이나 즐거운 일이였다. 🧙

또 한편으로는 같은 문제에 다르게 작성한 여러 코드를 보면서 다른사람이 쓴 코드를 점점 더 이해하는 능력이 커져간다는 느낌을 받았다.👨‍👦‍👦

아쉬운 점은 velog에 기록을 나의 언어로 잘 하지 못한 아쉬움이 있다.
앞으로는 조금 더 나의 언어로 기록하고 과거의 나의 기록으로 미래의 내가 또 자극받고 배우는 경험을 하고 싶다.✍️

profile
안녕하세요! 프론트엔드 개발자 새미입니다:D

0개의 댓글