westagram project(인스타그램 클론 코딩) - 메인 화면 (1)

 

Main.js 컴포넌트 구성

메인 화면 구성을 위해서 컴포넌트를 나눠보았습니다.

처음으로 컴포넌트를 여러 개를 사용했고, 시작 단계에서 제대로 나누지 않고 들어가서 컴포넌트를 나누는데에 어려움이 있었습니다.

어쨌든 결과적으로 나온 컴포넌트는 이렇습니다.

 

Main.js

import { React, useState, useEffect } from 'react';
import './Main.scss';
import Navbar from '../components/Navbar';
import Feed from '../components/Feed';
import Rightbar from '../components/Rightbar';

export default function Main() {
  const [commentBox, setCommentBox] = useState([]);
  const [feeddata, setFeedData] = useState([]);

  useEffect(() => {
    fetch('./data/commentData.json', { method: 'GET' })
      .then(res => res.json())
      .then(data => {
        setCommentBox(data);
      });
  }, []);

  useEffect(() => {
    fetch('./data/feedData.json', { method: 'GET' })
      .then(res => res.json())
      .then(data => {
        setFeedData(data);
      });
  }, []);

  return (
    <div className="main">
      <Navbar />
      <div className="body">
        <Feed
          feeddata={feeddata}
          commentBox={commentBox}
          setCommentBox={setCommentBox}
        />
        <Rightbar />
      </div>
    </div>
  );
}

메인 컴포넌트는 Navbar, Feed, Rightbar 로 구성되어 있습니다 ~!

fetch를 이용해서 목업데이터를 받아왔습니다 !

리액트는 State가 변경되면 다시 렌더링 됩니다. 하지만 목업데이터는 첫번째 렌더링에서만 받아오면 되기 때문에

useEffect의 의존성 배열에 아무것도 넣지 않아서 첫번째 렌더링에만 실행되게 했습니다 ! !

 

Navbar.js

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';

const Navbar = () => {
  return (
    <nav className="navbar">
      <div className="navElement">
        <img
          src="images/sangwon/instagram.png"
          className="images"
          alt="insta"
        />
        <span id="instaId" className="mainTitle">
          westagram
        </span>
      </div>
      <div className="navElement">
        <FontAwesomeIcon className="search" icon={faMagnifyingGlass} />
        <input className="inputbox" type="text" placeholder="검색" />
      </div>
      <div className="navElement">
        <img
          src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/explore.png"
          className="images"
          alt="compass"
        />
        <img
          src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/heart.png"
          className="images"
          alt="heart"
        />
        <img
          src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/bearu/profile.png"
          className="images"
          alt="myinfo"
        />
      </div>
    </nav>
  );
};

export default Navbar;

폰트 어썸을 import하여 사용하였습니다. 검색창을 text로 선언하였는데, input type으로 search가 있다는 것을 나중에 알게 되었습니다.

 

Rightbar.js 

import React from 'react';
import Addbox from './Addbox';
import Member from './Member';

const Rightbar = () => {
  return (
    <div className="mainRight">
      <div className="feedBox">
        <Member
          id="hasang0.0"
          class="myProfile"
          name="하상원"
          image="images/sangwon/mypic.jpeg"
        />
      </div>
      <div className="boxes">
        <div className="addLine">
          <span className="text type1">스토리</span>
          <a className="seeAll">
            <span className="text">모두보기</span>
          </a>
        </div>
        <Member
          id="id1"
          class="profile"
          name="사람1"
          image="images/sangwon/pic1.jpg"
        />
        <Member
          id="id2"
          class="profile"
          name="사람2"
          image="images/sangwon/pic1.jpg"
        />
        <Member
          id="id3"
          class="profile"
          name="사람3"
          image="images/sangwon/pic1.jpg"
        />
      </div>

      <div className="boxes">
        <div className="addLine">
          <span className="text type1">회원님을 위한 추천</span>
          <a className="seeAll">
            <span className="text">모두보기</span>
          </a>
        </div>

        <Member
          id="id4"
          name="사람4"
          class="profile"
          image="images/sangwon/pic1.jpg"
          followBtn="팔로우"
        />
        <Member
          id="id5"
          name="사람5"
          class="profile"
          image="images/sangwon/pic1.jpg"
          followBtn="팔로우"
        />
      </div>
      <Addbox />
    </div>
  );
};

export default Rightbar;

오른쪽에 있는 박스를 Rightbar.js 컴포넌트로 만들었습니다. 그리고 각 회원 아이콘과 이름을 Member.js 컴포넌트로 만들어서 props를 전달해주었는데, Member들을 가지고 있는 Members 컴포넌트를 만들면 어땠을까 하는 아쉬움이 있습니다.

 

Member.js

import React from 'react';

const Member = props => {
  return (
    <div className="memberBox">
      <div className="member">
        <img className={props.class} src={props.image} />
        <div className="textLine">
          <span className="text id">{props.id}</span>
          <span className="text name">{props.name}</span>
        </div>
      </div>
      <a href="#" className="link">
        {props.followBtn}
      </a>
    </div>
  );
};

export default Member;

부모 컴포넌트에서 받아온 props를 구조 분해하지 않고 그대로 사용해보았습니다 ~!

 

다음 글은 Feed 컴포넌트와 하위 컴포넌트에 대해 쓰겠습니다 ~!