react-portfolio : page - home

component -> MainHeader.jsx 만들기

home화면에서 MainHeader import 시켜줍니다.
Home.jsx

import MainHeader from '../../components/MainHeader';
import './home.css';

const Home = () => {
  return(
    <>
      <MainHeader/>
    </>
  )
}

export default Home;

MainHeader.jsx

import {Link} from 'react-router-dom';
import Image from '../images/main_header.png';

const MainHeader = () => { 
  return(
    <header className="main__header">
      <div className="container main__header-container">
        <div className="main__header-left">
          <h4>#100DaysofWorkOut</h4>
          <h1>Join The Legends of the Fitness World</h1>
          <p>
            Lorm issum dolor sit amet, consetetur adipisicing elit. Aliquam excepturi similique eius option. Dolorum quareat.
          </p>
          <Link to="/plans">Get Started</Link>
        </div>
        <div className="main__header-right">
          <div className="main__header-circle"></div>
          <div className="main__header-image">
            <img src={Image} alt="Main Header Image"/>
          </div>
        </div>
      </div>
    </header>
  )
}

export default MainHeader;

Link는 이전 시간에 했음으로 패스하겠습니다.
img src를 보면

<img src={Image} alt="Main Header Image"/>

Image를 상단에 import 해서 불러옵니다.

기존대로 src 속성에 ../images/main_header.png 이런식으로 넣어주면 안됩니다.

component -> Programs.jsx 만들기(SectionHeader)

Home.jsx

import Programs from '../../components/Programs';

const Home = () => {
  return(
    <>
      <MainHeader/>
      <Programs/>
    </>
  )
}

Programs.jsx

import {FaCrown} from 'react-icons/fa';

const Programs = () => {
  return(
    <section className="programs">
      <div className="container programs__container">
        <div className="programs__head">
          <span>{<FaCrown/>}</span>
        </div>
      </div>
    </section>
  )
}
export default Programs;

Programs 안에서 programs__head 는 다른곳에서도 쓰일 것이기때문에 컴포넌트로 따로 만들어줍니다.(SectionHeader)

SectionHeader.jsx

const SectionHeader = ({icon, title, className}) => {
  return(
    <div className={`section__head ${className}`}>
      <span>{icon}</span>
      <h2>{title}</h2>
    </div>
  )
}

export default SectionHeader;

Programs.jsx

import {FaCrown} from 'react-icons/fa';
import SectionHeader from './SectionHeader';

const Programs = () => {
  return(
    <section className="programs">
      <div className="container programs__container">
        <SectionHeader icon={<FaCrown/>} title="Programs"/>
      </div>
    </section>
  )
}
export default Programs;

코드분석

Programs.jsx 에서 SectionHeader 불러오는데 SectionHeader props 로 icon, title를 전달해줍니다.
그런데 className를 전달해주지않았습니다.
이럴경우 undefined로 나타나지는데 그냥 이렇게 적어도되지만
default 값을 주기로하자.

SectionHeader.jsx

SectionHeader.defaultProps = {
  className : 'section',
}

이렇게 적어주면 기본값으로 section 이 전달되게 됩니다.
이렇게 클래스의 경우 undefined가 나와도 상관없지만 데이터값을 넘길경우는 기본 default값을 넣어줘야 에러가 발생하지 않습니다.

---

data.js

import {SiOpenaigym} from 'react-icons/si';

export const programs = [
    {
        id: 1,
        icon: <SiOpenaigym/>,
        title: "Program One",
        info: "This is the day that the lord has made. We will rejoice!",
        path: "/programs/111"
    },
    {
        id: 2,
        icon: <SiOpenaigym/>,
        title: "Program Two",
        info: "This is the day that the lord has made. We will rejoice!",
        path: "/programs/222"
    },
    {
        id: 3,
        icon: <SiOpenaigym/>,
        title: "Program Three",
        info: "This is the day that the lord has made. We will rejoice!",
        path: "/programs/333"
    },
    {
        id: 4,
        icon: <SiOpenaigym/>,
        title: "Program Four",
        info: "This is the day that the lord has made. We will rejoice!",
        path: "/programs/444"
    }
]

Programs.jsx

import {programs} from '../data';
import {Link} from 'react-router-dom';
import {AiFillCaretRight} from 'react-icons/ai';

<div className="programs__wrapper">
  {
  programs.map(({id,icon,title,info,path})=>{
    return (
      <article className="programs__program" key={id}>
     	 <span>{icon}</span>
        <h4>{title}</h4>
        <small>{info}</small>
        <Link to={path} className="btn sm">Learn More<AiFillCaretRight/></Link>
      </article>
)
})
}
  </div>

코드분석

data.js안에 있는 programs 값을 사용할 것입니다.
programs 값 map 사용하여, 하나씩 나열해줍니다.

그런데 만들다보니 위에 태그도 컴포넌트로 빼줄 수 있습니다.
Card.jsx를 만들어서 컴토넌트를 만들어줍니다.

---

Card.jsx

const Card = ({className, children}) => {
  return(
    <article className={`card ${className}`}>
      {children}
    </article>
  )
}

export default Card;

Programs.jsx

import Card from './Card';

<div className="programs__wrapper">
  {
  programs.map(({id,icon,title,info,path})=>{
    return (
      <Card className="programs__program" key={id}>
      <span>{icon}</span>
      <h4>{title}</h4>
      <small>{info}</small>
      <Link to={path} className="btn sm">Learn More<AiFillCaretRight/></Link>
      </Card>
      )
      })
}
  </div>

코드분석

<article className={`card ${className}`}>
  {children}
</article>

article 안에 children 자식요소를 뜻합니다.
Card 안에 전달받은 값들을(Card 안에 있는 자식요소) 넣겠다는 뜻힙니다.