[코멘트 요청] props 사용

본 코드에 해당 코드가 없고 멘토님이 작성해주신 코드밖에 없어서 당황했네요;; 해당 코드는 클래스에서 사용되는 생성자겠죠? 클래스를 사용할 때 보통 새로운 객체로 만들어서 사용하게 됩니다.

class Board {}

const board = new Board();
board.subject = '주제';
board.content = '내용';
board.author = '글쓴이';
board.allComments = [];
console.log(board); // Board {subject: '주제', content: '내용', author: '글쓴이', allComments =[]}

위의 코드처럼 사용하게 되는데, constructor를 사용하게 될 경우

class Board {
  constructor(props){
    this.subject = props.subject;
    this.content = props.content;
    this.author = props.author;
    this.allComments = [];
  }
}

const board = new Board({subject: '주제', content: '내용', author: '글쓴이'});
console.log(board); // Board {subject: '주제', content: '내용', author: '글쓴이', allComments =[]}

위 코드처럼 사용 할 수 있습니다.

props를 사용하는 이유를 말씀해주셨는데 함수에서 parameter와 argumenets의 역할을 생각하시면 이해하시는데 조금 더 도움이 되지 않을까 싶습니다.

constructor 메서드의 this는 Board를 가리키므로 해당 코드는

    Board.subject = props.subject;
    Board.content = props.content;
    Board.author = props.author;
    Board.allComments = [];

이렇게 해석이 될 수 있습니다. 그러면 모양이 어째 맨 위에 constructor가 없을때와 굉장히 비슷해지죠? 이처럼 새로운 객체를 만들게 될 때 맨 위의 코드처럼 불편하게 일일히 집어넣어줄 필요없이 변수선언과 동시에 값들을 넣기위해 사용한다고 생각하시면 조금 편하게 이해하실 수 있지 않을 까 싶습니다.

제가 좀 장황하게 설명했는데 3줄요약으로 한번 해보자면

constructor의 this는 Board를 가리킴
new Board(args)에서 args는 contructor의 parameter인 props
constructor 메서드가 실행되면서 해당 값들이 new Board(args)의 args 값들이 착착 대입되게됨.

정도로 간단하게 한번 말해봤는데 제가 완전히 정확하게 설명드린 것 같지 않아 class에 대해서 조금 더 알아보시면 좋을 것 같아 mdn 문서 주소 남겨드립니다! 더 궁금한게 있으시면 언제든지 말씀해주세요!

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

gitmackenzie / testcode_week5

[코멘트 요청] props 사용 #1