- 출처: 소플의 처음 만난 리액트
# 댓글 컴포넌트 만들기
지금까지 배운 컴포넌트와 프로세스에 대한 내용을 되새기면서 실제로 댓글 컴포넌트를 한번 만들어 보도록 하겠습니다.
1) 먼저 VSCode를 열어 앞선 실습에서 create react app 을 이용해서 만든 프로젝트를 엽니다.
2) 그리고 chapter_05라는 이름으로 폴더를 하나 생성합니다.
3) 다음으로 만든 폴더에 Comment.jsx라는 이름의 파일을 새로 만들고 아래 코드처럼 Comment 라는 이름의 리액트 함수 컴포넌트를 하나 만듭니다. 
4) 다음으로 여러 개 댓글 컴포넌틀르 포함하고 있는 댓글 목록 컴포넌트를 만들어보겠습니다. 동일한 폴더에 CommentList.jsx 파일을 새로 만들고 아래 코드처럼 CommentList 라는 이름의 리액트 함수 컴포넌트를 하나 만듭니다. 
5) 이제 만든 CommentList 컴포넌트를 실제로 화면에 렌더링하기 위해서 index.js파일을 열어서 다음과 같이 수정합니다. 
코드 작성이 끝났으면 이제 실제로 리액트 애플리케이션을 실행해 보도록 하겠습니다.
6) VScode의 상단 메뉴에서 Terminal > New Terminal 을 눌러 새로운 터미널을 하나 실행시킵니다.
7) 이후에 npm start 명령어를 실행합니다. 그러면 잠시 뒤에 웹브라우저의 새창이 열리면서 localhost 3000번으로 접속되는 것을 볼 수 있습니다.
- 실행화면
위와 같이 방금 만든 댓글 컴포넌트가 보일 것입니다.
# Comment 컴포넌트에 스타일 입히기
다음은 실제 댓글 모양처럼 보이게 하기 위해서 Comment 컴포넌트의 간단한 CSS 스타일 을 작성하고 컴포넌트 코드를 변경해보도록 하겠습니다.
1) 먼저 아래 코드와 같이 CSS 스타일 을 작성합니다. 
여기에서 사용한 CSS 문법에 대해서는 지금 당장 이해하지 않아도 되기 때문에 코드를 보고 그대로 입력하면 됩니다.
2) 그 다음, Comment 컴포넌트의 코드를 다음과 같이 수정해줍니다. 
이 부분은 사람모양의 프로필 이미지를 보여주고 댓글을 작성한 사람의 이름과 댓글 내용을 함께 보여주도록 변경한 코드입니다.
3) 변경한 파일을 저장하고 브라우저를 다시 확인해 보면 아래 화면처럼 변경된 댓글 컴포넌트가 보일 것입니다.
- 실행화면
실제 웹사이트에서 보는 댓글 모양과 비슷하죠?
# Comment 컴포넌트에 Props 추가하기
이제 다음 단계로 Comment 컴포넌트에 표시되는 작성자 이름과 댓글 내용을 동적으로 변경할 수 있게 하기 위해 props를 추가해 보겠습니다. 지금은 작성자 이름과 댓글 내용이 그냥 코드 상에 박혀 있기 때문에 동적으로 내용을 바꿀 수가 없습니다.
1) 아래 그림에 표시된 부분처럼 작성자 이름과 댓글 내용을 각각 props.name, props.comment 값을 사용하도록 변경합니다. 
props를 사용하도록 Comment 컴포넌트를 변경하면 아래 화면과 같이 아무런 내용도 나오지 않게 됩니다.
- 실행화면
그 이유는 바로 name과 comment의 값이 정의되지 않아서 undefined 이기 때문입니다.
2) CommentList 컴포넌트에서, 아래의 표시된 부분처럼 props를 추가해줍니다. 
수정하면 Comment 컴포넌트의 props로 우리가 입력한 name과 comment 값이 전달되기 때문에 아래와 같이 정상적으로 내용이 표시됩니다.
- 실행화면
이제 댓글 하나 더 추가해 볼까요?
3) 아래 코드처럼 Comment 컴포넌트를 하나 더 추가해서 작성자 이름과 댓글 내용을 다르게 입력해줍니다. 
그러면 아래와 같이 댓글이 하나 더 추가로 표시되는 것을 볼 수 있습니다.
- 실행화면
# Comment 데이터를 별도의 객체로 분리하기
이제 마지막으로 댓글 데이터를 별도의 객체로 분리해서 동적으로 받아온 데이터를 표시할 수 있는 구조로 만들어 보도록 하겠습니다.
1) 아래에 표시된 부분처럼 comments 라는 배열을 만들어서 댓글 데이터를 담고 있는 객체들을 넣어줍니다. 이 강의에서는 총 3개의 댓글만을 넣었는 여러분은 화면에 표시되길 원하는 만큼 더 많은 댓글 객체를 넣어도 됩니다. 
댓글 객체를 만들어 쓰면, 자바스크립트 배열의 map 함수를 써서 각 댓글 객체에 대해서 Comment 컴포넌트를 리턴하도록 코드를 작성합니다. map 함수에 대해서는 10강에서 자세히 배울 예정이기 때문에 지금은 그냥 이런 게 있다는 것만 알고 넘어가셔도 됩니다.
2) 코드 작성을 마치고 브라우저로 확인해 보면 아래와 같이 comments 배열에 있는 댓글 객체 수만큼 Comment 컴포넌트가 렌더링된 것을 볼 수 있습니다.
- 실행화면
이번 강의에서는 리액트 컴포넌트와 props에 대해서 배웠습니다. 또한 실습을 통해서 실제로 props를 사용하는 리액트 컴포넌트를 만들어보았습니다. 컴포넌트와 props 개념은 리액트를 통틀어서 가장 중요한 개념 중 하나이기 때문에 이해가 되지 않는 부분이 있다면 이해가 될 때까지 꼭 반복학습을 하시기 바랍니다.
다음 강의에서는 컴포넌트의 state 와 생명주기에 대해서 배워보도록 하겠습니다.
