[REACT] 컴포넌트 쪼개기/ 포스트 보이는 메인페이지 만들기 / 가장 큰 단위, 중간단위 (1)

컴포넌트 쪼개기

너무 작게 쪼개면 만들기 힘들고, 너무 크게 쪼개면 재활용이 힘들다.

 

이 강의에서는 큰 것에서 작은것으로 쪼개기

 

 

페이지마다 공통으로 사용하는 부분이 있다.

그것을 컴포넌트로 빼준다.

 

---

 

폴더 구조 잡기

src

• elements : 최소 단위 컴포넌트
• components: 중간 단위 컴포넌트
• pages: 가장 큰 단위의 컴포넌트
• redux : 리덕스 모듈과 스토어
• shared : 공용으로 사용할 코드 . App.js, firebase.js 같은 것

---

 

App.js는 shared폴더 아래로 옮겨주고

index.js에서 경로를 바꿔준다.

import App from './shared/App';

 

 

 

---

 

1. 페이지 만들기

(1) pages/PostList.js

가장 큰 단위의 페이지.

메인으로 보여줄 페이지인데 포스트들이 쭈루룩 나오는 페이지

 

PostList.js

import React from "react";
import Post from "../components/Post";
 
 
const PostList = (props) =>{
    return(
        <React.Fragment>
            <Post></Post>
        </React.Fragment>
    )
}
export default PostList;

 

 

(2) react-router-dom

yarn add react-router-dom 

 

(3) App.js에서 불러오기

코드보기

 

import './App.css';
import React from "react";

import {BrowserRouter, Route} from "react-router-dom";
import PostList from "../pages/PostList";

function App() {
  return (
    <React.Fragment>
      <BrowserRouter>
        <Route path="/" exact component={PostList}/>
      </BrowserRouter>
    </React.Fragment>
  );
}

export default App;

 

 

 

2. 페이지에 들어갈 컴포넌트 만들기

(1) Header - 내정보 , 알림, 로그아웃이 있는 것

(2) Post - 게시물이 나오는 것

 

먼저 게시글이 나오는 부분 컴포넌트부터 만들어보자!

중간단위 컴포넌트 이므로 components에 만들어준다.

Post.js

들어갈 내용을 미리 분리해둔다.

그리고 props로 받아온 값이 없을때 기본적으로 지정해주는 값을 설정해둔다.

defaultProps이다.

 

코드보기

//Post.js
import React from "react";

const Post = (props) => {

    console.log(props);
    return (
        <React.Fragment>
            <div>img / nickname / time / btn</div>
            <div>contents</div>
            <div>image</div>
            <div>comment cnt</div>
        </React.Fragment>
    )
}

Post.defaultProps = {
  user_info: {
    user_name: "mean0",
    user_profile: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg",
  },
  image_url: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg",
  contents: "고양이네요!",
  comment_cnt: 10,
  insert_dt: "2021-02-27 10:00:00",
};

export default Post;

import React from "react";

const Post = (props) => {

    console.log(props);
    return (
        <React.Fragment>
            <div>img / nickname / time / btn</div>
            <div>contents</div>
            <div>image</div>
            <div>comment cnt</div>
        </React.Fragment>
    )
}

Post.defaultProps = {
  user_info: {
    user_name: "mean0",
    user_profile: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg",
  },
  image_url: "https://mean0images.s3.ap-northeast-2.amazonaws.com/4.jpeg",
  contents: "고양이네요!",
  comment_cnt: 10,
  insert_dt: "2021-02-27 10:00:00",
};

export default Post;