react nodeBird 1-6(Reducer 쪼개기 & PostForm 만들기)

  Reducer들도 컴포넌트들처럼 쪼갤 수 있습니다. 

  reducers 디렉토리 안에 분리시킬 post, user.js를 만들어주고, index.js에서 있던 initialState와 action들을 각 파일에 옮겨줍니다.

user와 post로 나눕니다.

reducers/user.js

  리듀서들도 옮겨서 적어주고, index.js에 분리시킨 리듀서들을 import 시켜줍니다. 

reducers/index.js

  리덕스에서는 분리시킨 리듀서들을 가져오려면 combineReducers을 사용하여 묶을 수 있고, 

  const rootReducer = combineReducers({ 

     user,

      post, }); 

  로 할 수 있지만, 추후 SSR(Server Side Rendering) 때문에 HYDRATE를 위해 index 항목을 추가해줍니다. 리듀서들을 combineReducers로 묶어주는 이유는 리듀서들은 함수이기 때문에 쉽게 묶을 수 없습니다. 또한, 파일 쪼개기를 할 때에는 경로를 신경써가면서 작성해줘야됩니다. 

reducers/post.js

  const ADD_POST = 'ADD_POST'; 해주는 이유는 작성 시 오타 나올 확률이 적고, 재활용하기 편하기 때문에 사용합니다. 또한, 리듀서 작성 시 switch 문 안에

  case ADD_POST: 

   return (

    ...state,

    mainPosts: [dummyPost, ...state.mainPosts],

    dummyPost를 앞에 써줘야 게시글을 작성하면 최근 게시글이 최상단으로 올라가게 해줄 수 있습니다. 

임시로 dummy 데이터를 이용할 수 있다.

  첫번째로 데이터를 먼저 구성하고, 두번째 액션을 구성한다음, 마지막으로 Reducer를 구성하는 방법이 좋습니다. 

pages/index.js

 

  컴포넌트 구성할 때에는 일단 큼직큼직한 부분을 정하고 살을 붙여나가는게 좋습니다. 또한, 로그인한 사람만 PostForm을 볼 수 있게 설정하고, 게시글은 Card로 구성해 여러개가 나올 수 있게 map 반복문을 이용해 설정해줍니다. 컴포넌트를 나누는 기준은 PostForm, PostCard처럼 큼직큼직하거나 map 반복문 안에 반복되는 항목들도 컴포넌트로 나눌 수 있습니다.

components/PostForm.js

이미지 업로드 버튼을 누르면 파일선택기가 나오게 하려면 리액트의 useRef를 이용해

<input type="file" multiple hidden ref={imageInput} /> 해주고,  버튼을 onClick할 때 imageInput.current,click(); 이되는 메서드를 만들어주면 됩니다.

이미지 업로드 버튼을 누르면 파일선택기가 나온다.

 

로그인을 하게되면 PostForm이 나오는걸 확인해볼 수 있다.