React - 메인 페이지 기능 구현

 

 

Assignment

메인 페이지 - 사용자가 댓글 입력 후 Enter를 누르거나 왼쪽의 버튼 클릭 시 댓글이 추가되도록 구현해주세요.

 

피드 컴포넌트는 인스타그램에서 피드에 해당하는 부분이다.

바로 이 부분이다.

Feed.js

 

댓글 구현할 부분은 이 부분이다.

 

Comment.js

먼저 사용자가 먼저 댓글을 입력했을 때를 생각해보자.

일단 state안에 commentList: [], commentText: "", userId: "ljtaek2"ljtaek2"라는 값을 미리 초기화를 시켰다.

input 태그에 무언가를 입력하는 순간 onChange 이벤트 핸들러가 실행되고, commentState라는 함수가 실행된다.

commentState 함수 안에서 event를 이용해서 해당 input값을 setState()를 통해서 commentText 안에 event.target.value를 넣는다. 즉, 입력하는 매 순간마다 setState()를 통해서 commentText 값을 업데이트를해준다.

그러고 나서, 버튼을 눌렀을 때마다, 댓글들이 나열되어야 한다.

commentAdd이라는 이름의 함수를 만들고, 그 안에 commentText라는 const형 변수를 만든다.

commentText 안에 해당 state안에 있는 this.state.commentText를 넣는다.

중요!

this.state.commentList.push(commentText); -> 이 부분은 실제로 this.state.commentList안에 commentText가

업데이트되는 것처럼 보이지만, 실제로 업데이트되지 않는다. 

왜냐하면, state의 값은 setState()로만 변경할 수 있기 때문이다.

하지만, this.state.commentList안에 commentText는 담겨 있다.

이제 commentList에 담겨져 있는 것을 setState()로 업데이트시키고,

commentText의 값을 빈 값으로 초기화시킨다. 

댓글을 입력하는 순간 입력하는 창이 동시에 비어져 있어야 하기 때문이다. 

이제 commentList에 담겨 있는 댓글들을 화면에 보여줘야 한다.

바로 이 부분에

Comment 컴포넌트를 넣어서 댓글이 추가할 때마다, this.state.commentList에 map() 메서드를 이용해서 모든 댓글을 화면에 뿌려준다.

여기서 item은 댓글을 의미하고, i는 Index를 의미한다.

comment 컴포넌트에 속성 이름 안에 데이터 값들을 넣어서 보내준다.

여기서 i는 

우리는 눈으로 각 항목을 구별할 수 있지만, 리액트는 알려주지 않으면 각 항목을 구별하지 못한다.

그렇기 때문에 각 항목에 고유한 key값을 부여해야 한다.

Comment.js

Comment.js에서 props를 통해서 Feed 컴포넌트에서 보낸 데이터를 받아서 적절한 위치에 값을 세팅한다.

그러고 나서, 확인하면 댓글이 추가되는 것을 확인할 수 있다.