인증된 유저가 사이트에 접속 할 경우 작성 된 글 목록을 가져와서 출력해주도록 하자
# src/components/App/presenter.js
인증된 유저가 접속한다면 타임라인 컴포넌트를 반환
# src/components/Timeline
타임라인 컴포넌트에서는 API를 통해서 글 목록을 가져오고 가져온 글 목록을 다룬다
# Timeline/index.js
API 기능을 사용하기 위해서 리덕스 파일을 생성해줘야 한다
# src/redux/modules/blogs.js
글 목록을 가져오는 API
API를 통해서 글 목록을 정상적으로 가져온다음 수행되는 액션
글로벌 state에 받아온 글 목록을 저장한다
다음과 같이 저장 된 걸 확인 할 수 있다.
다시 Timeline으로 돌아가자
# Timeline/container.js
자체 state인 로딩을 사용해서 글 목록을 가져올 동안 로딩페이지를 보여 줄 수 있도록 하고,
Life Cycle 함수들을 사용해서 posts가 있을 경우 / 없을 경우 / 받아온 경우 에 따라서
어떤 동작을 할 건지 지정해 준다.
# Timeline/presenter.js
로딩의 참/거짓에 따라서 다른 컴포넌트를 반환 해 준다.
이렇게 컴포넌트를 계속 소분하는 이유는, 하나의 컴포넌트에 모든 것을 표현하게 되면
코드가 방대해져서 이해하기도 어렵고 수정하기도 어렵게 된다.
그래서 기능별로 작은 컴포넌트들을 여러개 만들어서 사용하는게 좋다
# src/components/Posts
해당 컴포넌트는 리덕스를 사용하지 않는다.
그 이유는 Timeline 컴포넌트로 부터 전달받은 posts props를 사용하면 되기 때문
# Posts/index.js
# Posts/container.js
여기서 사용되는 state 와 함수들은 출력할 글의 내용이 길 경우에,
앞부분만 출력해주고 더보기 버튼을 사용해서 글 전체 내용을 보여주는 기능을 구현하기 위함이다.
# Posts/preserter.js
이 부분에서 글 내용을 출력하는데 코드가 이미 방대해졌기 때문에,
댓글 부분은 따로 컴포넌트를 만들어서 반환하도록 한다
# src/components/PostComment
전달받은 댓글들만 출력해주면 되므로 별다른 기능들이 필요가 없다
# PostComment/index.js
댓글 목록은 배열형태로 전달받게되므로 map함수를 사용해서
컴포넌트를 반복적으로 호출하도록 한다
컴포넌트를 반복적으로 호출 할 땐 유니크한 키를 지정해주어야 한다.
여기까지 하고나면 다음과 같은 화면이 출력된다
이제 댓글을 작성하는 부분을 구현해보도록 하자
# src/components/CommentBox
# CommentBox/index.js
이 부분은 입력받은 메세지를 댓글로 생성해서 보여줘야하기 때문에 API 기능이 필요하다
ownProps는 앞서 Posts에서 이 컴포넌트를 호출할 때 전달해준 인자를 말한다.
# src/redux/modules/blogs.js
다음과 같은 API 액션을 통해서 댓글을 생성한다.
생성된 댓글 정보를 다른 액션으로 전달해서 생성된 댓글을 state에 반영시킨다
applyAddComment를 보면 이미 저장된 posts를 가져와서, 그 안에서 생성된 댓글이
포함된 post를 가져오고 그 post의 댓글부분을 업데이트 해준다.
그리고 그렇게 새롭게 작성된 updatedPosts로 기존의 posts를 대체한다.
이렇게 state가 업데이트 되면 리액트 앱은 새롭게 렌더링을 한다.
다시 CommentBox로 돌아가보면
# CommentBox/container.js
presenter에서 입력받은 댓글을 저장할 state를 정의하고,
입력받을 때마다 바로바로 상태를 업데이트 할 함수와,
엔터를 눌렀을 때 API를 실행할 함수를 정의한다.
# CommentBox/presenter.js
여기서는 react-textarea-autosize 라는 라이브러리를 사용했다.
이 라이브러리는 인풋 태그에서 지정된 넓이를 벗어나 텍스트가 입력될 때,
커서를 움직이지 않고 태그의 높이를 조절해서 입력받은 모든 텍스트를 보여준다.
이 라이브러리를 사용할 때 submit버튼을 따로 생성하지 않고, 앞서서 정의했던
함수를 사용한다
댓글
댓글 쓰기