[React] - [처음 만난 리액트] - 17. Components and Props ((실습) 댓글 컴포넌트 만들기)

🧹 두서없이 적는 쉬운 정리

1. 컴포넌트 안에 여러개의 컴포넌트를 사용할 수 있다.

2. 컴포넌트 속 css적용이 가능하다.

3. 컴포넌트를 동적으로 변경려면 props 추가

4. 여러 중복 데이터는 배열로 관리하고 .map()함수로 추출.

 

(자세한 내용은 아래 참고)

 

---

 

🕵🏻 댓글 컴포넌트 실습

1. Comment라는(댓글) 이름의 리액트 함수 컴포넌트 생성

 

2. 여러 개 댓글(Comment) 컴포넌트를 포함하고 있는 댓글 목록(CommentList) 컴포넌트 작성

 

3. 리스트 컴포넌트를 실제로 화면에 렌더링 하기 위해 index.js 수정.

 

4. 리액트 애플리케이션 실행

 

 

🎨 댓글 모양 CSS 스타일 적용

5. 댓글 모양 처럼 보이도록 Comment 컴포넌트에 css 스타일을 작성 후 컴포넌트 코드 변경

(사람모양의 프로필 이미지를 보여주고 댓글을 작성한 사람의 이름과 댓글 내용을 함께 보여주는 코드)

 

6. 리액트 애플리케이션 재실행 (변경된 댓글 컴포넌트 확인)

 

🙋🏻‍♂️ Props 사용([작성자 이름, 댓글 내용] 동적방식 적용)

7. Comment 컴포넌트에 표시되는 작성자 이름과 댓글 내용을

동적으로 변경하도록 props 추가 후 확인

 

8.  댓글 1개 더 추가

커맨드 컴포넌트를 하나 더 추가하여 작성자 이름과 댓글 내용을 다르게 입력.

 

🗂️ 댓글 데이터 객체로 분리하기

9. 댓글 데이터를 별도의 객체로 분리 후 데이터터를 동적으로 받아 표시할 수 있는 구조로 변경

comments 배열 생성 후 댓글 데이터를 담고 있는 객체들을 넣어준다(댓글 추가 시 배열에 추가)

이후 자바스크립트 배열의 map() 함수로 각 댓글 객체에서 커멘트 컴포넌트를 리턴하도록 작성

 

10. 실행 후 확인

comments 배열에 있는 댓글 객체 수만큼 코멘트 컴포넌트가 렌더링 된 것을 볼 수 있다.

 

 

 

 

 

위 내용은 '소플' 님의 '처음 만난 리액트' 영상을 참고하여 작성되었습니다.