[Vite + React] Component 생성

Component란?

컴포넌트란, 재사용이 가능한 각각의 독립된 모듈이다. (재사용 가능한 UI 조각) 예를 들면 모든 페이지에 중복되는 상단 메뉴나 푸터, 동일한 디자인의 입력칸이나 버튼 등이 있다.

하나의 컴포넌트를 만들어놓으면 같은 코드를 중복해서 여러번 작성할 필요가 없다. 또한 동일한 컴포넌트를 사용하여 일관적인 UI를 제공할 수 있다.

동일한 컴포넌트를 어떻게 활용하느냐? props 값을 이용해 제어하면 된다 ~

 

만들어보기

구조

1. 선언 : 화살표 함수를 변수 혹은 상수에 담아 선언한다.

const ComponentName = () => {};

 

2. 반환 : return값 안에 마크업을 작성한다. 이때 최상단은 태그 하나로 감싸져야한다.

// 옳은 예
const ComponentName = () => {
	return(
		<div>
			<h1>컴포넌트!</h1>
			<p>재사용 가능한 ui!</p>
		</div>
	)
};

// 잘못된 예
const ComponentName = () => {
	return(
		<h1>컴포넌트!</h1>
		<p>재사용 가능한 ui!</p>
	)
};

 

3. 내보내기 : 다른 파일에서 해당 컴포넌트를 호출할 때 사용될 이름

const ComponentName = () => {
	return(
		<div>
			<h1>컴포넌트!</h1>
			<p>재사용 가능한 ui!</p>
		</div>
	)
};

export default ComponentName;

 

푸터 만들기

위의 구조를 가장 간단히 보여줄 수 있는 푸터 컴포넌트~

• components/Footer/Footer.tsx

const Footer = () => {
  return (
    <footer>
      <div>footer</div>
    </footer>
  );
};

export default Footer;

 

상단 네비 만들기

나는 상단바 구조를 [로고 + 페이지 링크 + 회원 관련 메뉴]로 구상하고자 했다. 이 때, “회원 관련 메뉴”는 로그인을 한 사용자인지, 안 한 사용자인지에 따라 다르게 보여졌으면 해서 각각 컴포넌트 GuestNav와 MemberNav로 나누어, TopNav에서 로그인 유무를 판별하여 보여주길 바랬다. 그래서 총 3개의 파일 탄생 ^^,,

1. components/Header/GuestNav.tsx로그인하지 않은 사용자에게 보여지는 메뉴
2. const GuestNav = () => { return ( <ul> <li> <a href="/join">Join</a> </li> <li> <a href="/login">Login</a> </li> </ul> ); }; export default GuestNav;
3. components/Header/MamberNav.tsx
   로그인하지 않은 사용자에게 보여지는 메뉴
   

   const MemberNav = () => {
     return (
       <ul>
         <li>
           <a href="/mypage">Mypage</a>
         </li>
         <li>
           <a href="/logout">Logout</a>
         </li>
       </ul>
     );
   };
   
   export default MemberNav;
   

    
4. components/Header/TopNav.tsx여기서 props와 조건문이 필요하다
   기본적으로 보여지는 메뉴 & 로그인 유무에 따라 달라지는 메뉴를 제어한다
   이 때 props와 조건문이 필요하다!
   
   
   • 컴포넌트 선언 시 “isLogin”이라는 props를 받는다
   • props 값에 따라 다른 메뉴를 보여주기 위해 삼항연산자를 이용한 조건문을 작성한다
     삼항 연산자 : { bool값 ? 참일 때 : 거짓일 때 }

   import GuestNav from "./GuestNav";
   import MemberNav from "./MemberNav";
   
   const TopNav = ({ isLogin }) => {
     return (
       <header>
         <div className="logo">
           <a href="/">PLAYGROUND</a>
         </div>
   
         <nav>
           <ul>
             <li>
               <a href="/">Home</a>
             </li>
             <li>
               <a href="/to-do">To Do</a>
             </li>
             <li>
               <a href="/board">Board</a>
             </li>
             <li>
               <a href="/gallery">Gallery</a>
             </li>
             <li>
               <a href="/event">Event</a>
             </li>
           </ul>
         </nav>
   
         {isLogin ? <MemberNav /> : <GuestNav />}
       </header>
     );
   };
   
   export default TopNav;