리액트 Component 사용하기

컴포넌트는 React의 Component 객체를 상속하는 클래스를 생성해서 export하는 App에 태그화 하여 작성하면 클래스의 html 코드를 구현할 수 있습니다. 그냥 쉽게 말해서 가독성좋게 파트별로 나눠놓아 유지 보수에 효율적인 체계를 구현한다 라고 생각하면 됨!

컴포넌트 파일로 분리하기

예를들면 위의 사진처럼 파트별로 폴더화 하여 관리할 수 있습니다. 물론 더 디테일하고 다양하게 구성할 수 있습니다❗️

클래스에 상속하는 리액트 클래스를 불러오고

import MainNav from './MainNav/MainNav';

<MainNav />
      <main className="container">
        <aricle className="feeds">
          <div className="feedsProfile">
            <div className="feedsProfileImgAndName">
              <img src="images/seokho/My_Picture.jpeg" alt="My_Picture" />
              <span>Seokho__lee</span>
            </div>
            <i className="fas fa-ellipsis-h" />
          </div>

보내고자 하는 클래스를 default로 설정하기

export default function MainNav(props) {
  return (
    <div className="navbarFixed">
      <nav className="navbar">
        <div className="navbarLogo">
          <i className="fab fa-instagram" />
          <div className="navbarLogoLine" />
          <span>Westagram</span>
        </div>
        <input type="text" placeholder="검색" id="navbarSearch" />
        <div className="navbarIcons">
          <img src="images/seokho/explore.png" alt="explore" />
          <img src="images/seokho/heart.png" alt="heart" />
          <img src="images/seokho/profile.png" alt="profile" />
        </div>
      </nav>
    </div>
  );
}

💡 더욱 디테일한 컴포넌트화에 대해서 공부하고 사용해보자!