현재 레이아웃 옮기기는 다했고,
mock
데이터를 활용하는데 따로mockdata.js
로 분리해야하고, 댓글, 좋아요 기능이state
에 반영되도록 해야한다.
인스타그램에선 좋아요 누름과 동시에 서버로 전송하는건가?? 아니면 먼저 좋아요 컴포넌트 sate에 like 버튼 수를 바꾸고 몇 초 뒤에 서버로 전송하는건가??
removeComment = ( id ) => {
this.setState({
comments: this.state.comments.filter(( comment ) => comment.id !== id)
});
};
filter
를 활용해서 id가 다른 것만 놔두고 새로운 배열로 반환
댓글 추가할 때 id
값으로 comments.lengh
로 id
값을 주었는데 중간 댓글을 지우고 다시 입력하면 중복되는 id
값이 생겨서 같이 지워져버리는 현상 발생
해결법으로 `react-uuid'를 사용하였다.
import uuid from 'react-uuid'
...생략
const comment = {
'id' : uuid(),
'name': 'test',
'text': this.state.comment
};
this.setState({
comments: this.state.comments.concat(comment)
});
실제 db에서 받아온 데이터처럼 사용하기 위해 .json 파일을 따로 만들어 fetch로 요청해서 json 데이터를 받아오도록 하자.
contentHeaderObj.json
mainContentObj.json 파일로 따로 분리해서 data
폴더에 넣었다. 이것을 요청하려면 현재 local주소인 http://localhost:3000/data/mainContentObj.json
을 하게되면 아래와 같이 json 객체로 저장된 데이터를 확인할 수 있다.
fetch로 json 객체를 받아오는 코드
componentDidMount() {
fetch('http://localhost:3000/data/contentHeaderObj.json', {
method: 'GET'
})
.then(res => res.json())
.then(data => {
this.setState({
contentHeaderObj: data,
});
});
fetch('http://localhost:3000/data/mainContentObj.json', {
method: 'GET'
})
.then(res => res.json())
.then(data => {
this.setState({
mainContentObj: data,
});
});
}
아직도 리액트의 단방향 데이터 흐름을 잘 이해하지 못하겠다..
만약 하나의 게시글이 있다고 하면 해당 게시글에 제목,내용,댓글,좋아요 등을 한 번에 다 가져오고 자식 컴포넌트로 데이터만 뿌리고 그 자식 컴포넌트에서는 데이터를 출력하고 요청이 들어오면 ajax
를 사용해서 서버로 보내는건가?? 그렇다면 처음 받아본 최상위 부모 컴포넌트에서 받아온 데이터는 굳이 자식 컴포넌트에는 수정을 안해도 되는건가??
프론트 단에서 우선 (빠르게) 사용자 액션에 따라 보이는 뷰가 바뀌게 하는 방식.
자식 컴포넌트가 부모 컴포넌트의 state 값을 변화시는 방식으로 구현할 수 있습니다. 이 때 보이는 뷰는 실제 데이터로 받아온 데이터는 아니겠네요. 사용자 입장에서 즉각적으로 변화가 일어난 것 처럼 보입니다.
화면에 보여지는 뷰가 무조건 백엔드로 부터 받아온 데이터에 기반하게 하는 방식.
말씀하신대로 이벤트 발생 - 해당 이벤트에 대해 서버와 통신 - 그 결과값 서버로 부터 받아옴 - 받아온 데이터에 기반한 state 변화 - 뷰 변화로 이루어 집니다.
만약 결제 시스템(예를 들어 장바구니)와 같은 민감한 정보의 경우 2번 방식으로 하여 반드시 보여지는 화면과 실제 서버의 데이터가 정확히 일치하도록 설계 할 수 있을 것 같네요.
명쾌한 답변에 궁금증 해결!!