react-portfolio : Trainers

Trainers 페이지 만들기

공통 Header

Trainers.jsx

import Header from '../../components/Header';
import HeaderImage from '../../images/header_bg_5.jpg';

const Trainers = () => {
  return(
    <>
      <Header title="Our Traniners" image={HeaderImage}>
      Lorenm ipsum dolor sit amet consetetur adipisicing elit.
    </Header>
    </>
  )
}

export default Trainers;

---

컨텐츠 만들기

data.js

export const trainers = [
    {
        id: 1,
        image: Trainer1,
        name: 'John Doe',
        job: 'Aerobic Trainer',
        socials: ['https://instagram.com/', 'https://twitter.com/', 'https://facebook.com/', 'https://linkedin.com/']
    },
    {
        id: 2,
        image: Trainer2,
        name: 'Daniel vinyo',
        job: 'Speed Trainer',
        socials: ['https://instagram.com/', 'https://twitter.com/', 'https://facebook.com/', 'https://linkedin.com/']
    },
    {
        id: 3,
        image: Trainer3,
        name: 'Edem Quist',
        job: 'Flexibility Trainer',
        socials: ['https://instagram.com/', 'https://twitter.com/', 'https://facebook.com/', 'https://linkedin.com/']
    },
    {
        id: 4,
        image: Trainer4,
        name: 'Shatta Wale',
        job: 'Body Composition Trainer',
        socials: ['https://instagram.com/', 'https://twitter.com/', 'https://facebook.com/', 'https://linkedin.com/']
    },
    {
        id: 5,
        image: Trainer5,
        name: 'Diana Ayi',
        job: 'Circuit Trainer',
        socials: ['https://instagram.com/', 'https://twitter.com/', 'https://facebook.com/', 'https://linkedin.com/']
    },
    {
        id: 6,
        image: Trainer6,
        name: 'Wayne Carter',
        job: 'Physical Intelligence Trainer',
        socials: ['https://instagram.com/', 'https://twitter.com/', 'https://facebook.com/', 'https://linkedin.com/']
    }
]

Trainers.jsx

import {trainers} from '../../data';
import Traniner from '../../components/Traniner';
import {BsInstagram} from 'react-icons/bs';
import {FiAlertTriangle} from 'react-icons/fi';
import {FaFacebookF} from 'react-icons/fa';
import {FaLinkedinIn} from 'react-icons/fa';
import './trainers.css';

<section className="trainers">
  <div className="container trainers__container">
    {
        trainers.map(({id,image,name,job,socials})=>{
          return(
            <Traniner key={id} image={image} name={name} job={job} socials={
                  [
                  {icon: <BsInstagram/>, link:socials[0]},
                  {icon: <FiAlertTriangle/>, link:socials[1]},
                    {icon: <FaFacebookF/>, link:socials[2]},
                      {icon: <FaLinkedinIn/>, link:socials[3]},
                        ]
            }>
              </Traniner>
    		)

   			 })
    }
  </div>
</section>

Traniner 컴포넌트를 따로 빼주어 작업을 해준다.

Traniner.jsx

import Card from '../UI/Card';

const Traniner = ({image,name,job,socials}) => {
  return(
    <Card className="trainer">
      <img src={image} alt={name}/>
      <h3>{name}</h3>
      <p>{job}</p>
      <div className="trainer__socials">
        {
          socials.map(({icon, link}, index)=>{
            return(
              <a key={index} href={link} target="_blank" rel="noreffer noopener">{icon}</a>
            )
          })
        }
      </div>
    </Card>
  )
}

export default Traniner;

trainers 배열안에 socials값이 배열로 들어있으며, map으로 꺼내와 link, icon값을 index값을 활용해 넣어주면된다.

<Traniner key={id} image={image} name={name} job={job} socials={
  [
    {icon: <BsInstagram/>, link:socials[0]},
    {icon: <FiAlertTriangle/>, link:socials[1]},
    {icon: <FaFacebookF/>, link:socials[2]},
    {icon: <FaLinkedinIn/>, link:socials[3]},
  ]
}>
</Traniner>

props 전달할 값을 다 넣어준다.socials-> 배열