Components😎 and Props🕶 실습

구구절절 설명하는것도 좋지만 실습 한번이 이해가 제일 빠른것 같아서 공부한
실습을 올리려고 한다.

간단한 댓글 컴포넌트를 만들어 실습해보자!
일단 Counter, CommentList 페이지를 생성한다.

Counter 페이지에서는 아래와 같이 생성

CommentList 페이지에서는 아래와 같이 Counter 불러온다.

index.js에 CommentList를 넣고 실행하면

아주 잘 받아 나온다.

간단하게 약간의 스타이링을 추가하면

아주 잘 만들어진 화면을 확인 할 수 있다.

하지만 이건 직접 코드에 넣은것이고

동적으로 받아오기 위해 props를 추가한다.

아직 name과 comment가 정의 되지 않아 아무것도 나오지 않는다.

CommentList로 가 Comment에 props name, comment을 정의해주면
아래 사진처럼 잘 나오는게 확인된다.

여기서 Commnet를 하나 더 추가해보면

아주 잘 받아 오는걸 알수 있다
그럼 각 별도의 객체로 분리하여 동적으로 받아오게 만든다면?

JavaScript 배열의 map함수를 써서 각 댓글 객체에 대해 comment 컴포넌트를 return하게 작성한다.

배열 내 있는 수만큼 커멘드가 렌더링 된걸 볼 수 있다.

오늘도 하나의 지식이 쌓여가는 나를 칭찬한다.. 후후