[React] 댓글 기능 구현 - 구조분해할당

2022년 12월 29일 작성

 

오늘은 구조분해할당의 개념과 위스타그램에 적용한 구조분해할당 예시를 정리해보려고 한다.

구조분해할당

구조분해할당은 이름 그대로 구조를 분해하고, 할당하는 것이다. 구조분해를 통해 배열이나 객체에서 요소나 프로퍼티(key, value) 를 분해하고, 그것을 새로운 변수에 담을 수 있다.

방법은 이렇다. 배열과 객체를 선언해주는 것과 반대로 입력하면 된다.
arr 배열을 구조분해할당한 결과 a 와 b 에는 각각 1과 2가 담기고,
obj 객체를 구조분해할당한 결과 name 과 age 에는 각각 'Amie'와 20이 담긴다. 이러한 방법으로 배열 속의 배열, 객체 속의 객체도 구조분해할당할 수 있다!

여기부터는 내가 구조분해할당에 대해 이해한 바를 설명하는거니깐 알아서 걸러들으셔야 된당 ! 구조분해할당은 배열이나 객체를 하나씩 벗기는 과정이다. 그렇게 생각하니까 옛날에 배웠던 지수법칙 중 거듭제곱의 나눗셈이 떠올랐다.

arr를 예로 들면, 'aa'의 지수는 1인 셈이고, 'cc', 'dd', 'ee'의 지수는 2이다. 거기서 구조분해할당으로 배열 하나를 벗겨주면(나눠주면) aa의 지수는 0이 되어 배열이 아닌 상태가 되고, 'cc','dd','ee'의 지수는 1이라서 여전히 배열인 상태가 된다.

이번에 arr2 를 살펴보자. 'cc' 의 지수는 2이고 구조분해할당을 할 때 c2 를 배열 2개로 감싸주었다. 그러면 지수가 2-2 = 0 이 되어 cc가 배열이 아닌 상태가 된다. 쉽게 이해하고 싶어서 한 번 색다른 방법으로 개념을 정리해보았다. 하지만 이렇게 정리를 해도 막상 props 로 값을 받아와서 구조분해할당하려고 하면 헤롱헤롱~@-@~하면서 console.log(props)를 열심히 찍게 된다...

구조분해할당 적용 : 위스타그램

[Main.js - 부모 컴포넌트]

{commentList.map(comment => {
              return (
                <div className="comment">
                  <Comments comment={comment} /> 
                </div>
              );
            })}
          </div>

부모 컴포넌트에서 자식 컴포넌트로 어떤 값을 props 로 넘겨줘야 될지 감이 안왔는데, commentList 객체 안에 있는 각 객체들을 넘겨주면 된다. 자식 컴포넌트에서 props 를 제대로 받아오려면, props에 무엇이 들어있는지 console.log로 살펴보는 게 좋다.

확인해보면

{comment : 
	{ content : 'ghgh',
      id : 1,
      user : 'love_penguin'
    }
}

과 같이 객체 속의 객체 형태임을 알 수 있다. props 는 부모 컴포넌트에서 자식 컴포넌트로 전달받은 데이터를 갖고 있는 '객체' 이다. 그렇기 때문에 항상 객체 안에 데이터가 들어오는 점에 유의해야 한다.

구조분해할당 미적용

이제 props 로 전달 받은 데이터를 자식한테 잘 전달해주면 된다. 구조분해할당을 안한다면 하단과 같이 써주면 된다. props.comment를 함으로써 comment로 접근하고, 한번더 dot notation 으로 content 나 user 로 접근하면 된다.

const Comments = props => {

    return (
      <>
        <span className="userName">
          {props.comment.user}
        </span>
        <span kclassName="comment_content">
          {props.comment.content}
        </span>
      </>
    );
  };

구조분해할당 적용

프로그래밍에서는 반복을 싫어한다. 그러니 구조분해할당을 활용해서 props 의 값을 사용하기 편하게 바꿔보자!

const Comments = props => {
  const { comment } = props;
  const { user, content } = comment;

  return (
    <>
      <span className="userName">{user}</span>
      <span className="comment_content">{content}</span>
    </>
  );
};

이렇게 commnet 의 객체를 하나 벗겨주고, 나머지 변수의 객체를 한 번 더 따로 벗겨줄 수 있다.

const Comments = ({ comment: { user, content } }) => {
  return (
    <>
      <span className="user_name">{user}</span>
      <span className="comment_content">{content}</span>
    </>
  );
};

아니면 애초에 자식 컴포넌트에 props를 쓰지 않고 바로 ({ comment: { user, content } }) 이렇게 벗겨서 데려와도 된다!

[부모요소]
{commentList.map(comment => {
              return (
                <div className="comment">
                  <Comments
                    user={comment.user}
                    content={comment.content}
                  />
                </div>
              );
            })}

[자식요소]
const Comments = props => {
const { user, content } = props;

  return (
    <>
      <span className="userName">
        {user}
      </span>
      <span className="comment_content">
        {content}
      </span>
    </>
  );
};

변수가 지금처럼 적다면 부모 컴포넌트에서 넘길 때부터 디테일하게 넘겨줄 수도 있다.

컴포넌트를 구성할 때마다 props를 써야할 일이 많을 듯하다. 그때 헤매지 않도록 계속해서 props 와 구조분해할당을 생각해야겠다. 끝~!!