리액트 심화반 3주차(1)

포스트 목록 가져오기

우리는 목록을 가져오고 게시글을 추가하고, 수정도 하겠죠!

이런 기능을 만들 때는 데이터가 어떻게 변할 지 먼저 고민하고 만들기 시작하는 습관을 길러봐요! 🙂

 

예)

- 추가를 하면,

→ post_list 배열에 포스트 게시글 딕셔너리가 하나 추가

- 수정을 하면,

→ post_list 안의 post 딕셔너리의 id로 게시글을 찾고, 게시글 내용하고 이미지 url을 수정 (다른 건 수정 못하게 하자!)

- 삭제를 하면,

→ post_list 안의 post 딕셔너리의 id로 게시글을 찾고, 찾은 걸 배열에서 삭제

- 가져오기를 하면,

→ post_list를 전달

 

redux/modules/post.js 만들기 (리덕스 모듈 만들기)

1. import 부터!
2. 필요한 액션이 뭐가 있을 지 먼저 만들어주고,
3. initialState 만들기
4. 리듀서 작성하기
5. export 까지 하면 끝!

 

루트 리듀서에 post 리듀서 추가하기

// redux/configureStore.js
...
import Post from "./modules/post";
...
const rootReducer = combineReducers({
  user: User,
  post: Post,
  router: connectRouter(history),
});
...

 

게시글 목록에 연동하기

1. PostList에서 목록을 받아서,
2. Post.js에 넘겨줍니다.

 

파이어스토어 연동하기

파이어 스토어 준비하기

• 파이어스토어 시작하기
• post 콜렉션 만들고 임시 데이터 넣기

파이어 스토어 연동하기

• firebase.js에서 파이어스토어 추가
• 파이어스토어에서 데이터 가져오기
• 컴포넌트에서 호출하기

 

포스트 작성하기

1) 로그인 후에만 /write에 접근하게 해주자!

1. 로그인 체크하기
2. 로그인 하지 않았다면 로그인하러 가기 버튼을 보여주자!
3. [+] 버튼을 누르면 /write로 페이지 이동하기

 

2) 작성한 게시글 내용 넘겨주기

<Input/>에서 텍스트를 입력할 때마다 입력한 값을 <PostWrite/>로 넘겨줍니다.

1. useState를 사용해서 텍스트 내용 받아오기
2. <Input/>에 넘겨주자

 

3) firestore에 데이터 넣기

- moment 패키지 설치하기

moment는 자바스크립트에서 날짜, 시간 객체를 편히 다루기 위한 패키지입니다.

yarn add moment

1. firestore에 데이터 넣기

• firestore에 저장하는 함수를 먼저 만들고,
• 작성버튼과 연동해줍니다
• 저장에 성공하면 리덕스에 넣어요!

2. 작성 후 페이지 이동하기

firestore에 저장하고 나면, history를 사용해서 페이지를 이동해요!