[React] 댓글 구현2 (map함수 이용)

지난번 댓글 구현 포스트에선 자바스크립트의 getElementById 등을 통해서 댓글을 구현하는 기능을 연습해봤다. 한참 자바스크립트를 사용하며 기능 구현에 끙끙대던 중, 난 리액트라는 신세계를 만나버렸다.

개인적으로 리액트는 자바스크립트보다 사용하기 훨씬 쉬웠다. 물론 처음 배운다는 점에서 난감한 점은 있었지만 객체에 접근하는 방법이 간단했기 때문이다. 내가 자바스크립트에서 가장 어려움을 겪고 있던 부분이었다.

//js
function printName()  {
  const name = document.getElementById('name').value;
  document.getElementById("result").innerText = name;
}

해당 코드는 내가 앞서 ID 값에 접근하기 위해 사용했던 방법이다. 리액트를 배운 나는 이제 나는 값 하나를 얻기 위해서 돌고 도는 수고로움을 덜게 됐다.

물론물론 처음부터 이를 완벽히 구현한 것은 아녔다. 난 두개의 아이디와 각 아이디가 한개씩 작성한 댓글을 구현하기 위해 먼저 매우 하드한 코드를 작성해봤다.

commentValue라는 배열에 두 개의 객체를 줬다. 각각 객체의 키값은 name과 text였다. 그리고 commentValue의 객체에 접근해 comment라는 div에 각각 {commentValue[0].name}과 {commentValue[0].text}를 넣었고 댓글을 출력해줬다. (참고로 {commentValue[0].name}에 달린 a태그는 Link to로 수정해줬다)

보다시피 매우매우 원초적인 코딩이다. 하지만 자바스크립트를 이용하며 어려움을 겪던 나에겐 매우 큰 발전이었다. render라는 개념을 통해서 시시각각 변하는 값에 놀랐으며, 마치 자바스크립트에서 변수를 사용하는 것처럼 구조분해 할당을 사용하는 점도 신기했다.

위에 코드에선 this.state.commentValue.length를 통해서 현재 댓글 갯수를 시시각각 표현하는 기능도 구현했는데 이 점도 내겐 흥미로운 점이었다.

하지만 리액트의 흥미로운 점은 잠시 뒤로해야했다. 아직 저 하드한 {commentValue[0].name} 등등을 바꿔줘야했기 때문이다.

이때 사용한 것이 map함수다. map함수란 배열의 각 요소를 돌면서 함수를 적용해준 뒤 이를 새로운 배열로 만들어준다. 자바스크립트에선 해당 기능을 사용하기엔 다소 어려운 점이 있었다. 원본 배열에 직접 추가/수정을 가해야하고 이를 구현하기 때문일 것이다.

하지만 리액트에선 render를 통해 가상 DOM의 배열에서 수정이 가해진다. 때문에 원본 배열을 직접 건드리지 않아도 될 뿐더러, 추가해야할 배열만 관리해주면 된다. 아주 편하다 ㅎㅎ

댓글 두개에 코드가 11줄 필요했던 앞과 비교해보면 월등히 좋아졌다. 댓글이 100개가 추가돼도 이 줄에 변동은 없다. 심지어 각 name마다 URL을 부여할 수 있게도 해줬다.

이밖에도 map 함수는 아주아주 다양한 곳에서 사용이 가능하다.

해당 부분은 인스타그램 스토리 부분을 구현한 코드다. 반복되는 부분도 많기에 이를 map함수로 간단히 바꿔봤다. 코드의 가독성은 물론 유지 보수도 훨씬 간단하다. 나중에 백엔드와 같이 작업할 때도 map함수는 자주 사용할테니 잘 익혀두어야겠다.