Main | 댓글 기능
- 사용자가 댓글 입력 후 enter 를 누르거나 왼쪽의 버튼 클릭 시 댓글이 추가되도록 구현
- 크게 세가지 상황을 생각해야 된다.
- 댓글을 쓰면 피드에 노출이 되어야 됨
- 글 작성 후 버튼을 눌러야지만 댓글이 입력 됨
3.글 작성 후 enter를 눌러야지만 댓글이 입력되어야 됨
1번 글이 피드에 노출 되는건 로그인 기능 구현했던 것처럼
생각하면 된다는 조언을 얻어서 댓글을 reply:'' 로 state 지정하고
handleInput 함수를 넣어서
event를 인자로 받아서 reply value 값을 state에 저장함
- 버튼이 눌렀을때 댓글이 출력되게 하기 위해 addComment() 함수 지정함 , 댓글에 들어 갈 내용인 id와 내용을 text로 state 저장
reply =[{id,text}] 인 배열 형태로 출력이 되는 것으로 보면 됨
- concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
const num1 ={1,2,3,4,5}
const num2 ={6,7,8}
num1.concat(num2) // {1,2,3,4,5,6,7,8}
- enter 키를 눌렀을때 입력 가능해야 되기 때문에
inserComment 라고 함수를 따로 만들고 event를 넣고
조건문으로 enter 키 지정하고 댓글이 나와야 되기 때문에 addComment() 함수를 불러옴
4. event가 발생하는 input에 이벤트와 키값을 지정함
onChange: 값 변경 할때 호출
onKeyPress: 특정 키를 눌렀을때 호출하는 이벤트
- 댓글이 피드에 입력 되고나서도 입력창에 남아 있는 것을 방지 하기 위해 state에 저장되어 있는 reply:'' 를 addComment 함수에 추가함
댓글 컴포넌트화 + props로 데이터 전달
댓글 컴포넌트를 따로 만들어서 댓글 하나를 복사해서
댓글 컴포넌트에 넣는다. 여기서는 댓글 컴포넌트로 comment.js 파일을 만들었다.
main.js를 부모 컴포넌트 comment.js를 자식 컴포넌트로 생각해보자
자식 컴포넌트에서 값을 받으려면 부모 컴포넌트에서 값을 보내주고 표시를 해야된다.
그래서 댓글이 있던 클래스 reply에 보낼 값을 넣는다.
보낼 값을 임의로 변수명을 지어서 value를 넣음
{this.state.commentArr.map((com,index) =>(
< Comment key ={index}
commentId = {com.id}
commentText={com.text}/>))}
부모 state에 저장된 댓글 데이터에 map() 메소드를 적용해서
댓글에 갯수만큼 댓글 컴포넌트가 나오게 함
- map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 , 전체를 받아서 부분부분 새로운 결과로 뿌려준다고 생각하면 됨
map 함수 적용시 key props를 부여하는 이유
map() 함수 형태는 arr.map(callback(currentValue[, index[, array]])
map을 사용할때는 고유한 key값을 반드시 적용해줘야 오류가 안난다.
map을 쓸때는 index를 키값으로 지정하면 안된다.
예를 들면
key: 0, {id:4, content:'hello'},
key: 1, {id:0, content:'huck'},
key: 2, {id:1, content:'cherry'},
key: 3, {id:2, content:'banna'},
key: 4, {id:3, content:'maria'}
id:4 key 값을 추가하면 새로 추가된 id:4를 그리는데
id 값은 추가가 되지만, index는 새로운 형태로 인식하기 때문에
기존 값이랑 매칭이 안된다.
index로 key 값을 추가하면 안된다.
react는 key값을 통해 변화를 인식하기 때문이다.
기존의 key값과 새로운 key 값을 비교해서 변화된 부분을 랜더링 해준다.
