컴포넌트는 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>
);
}