context파일의 데이터 가져와서 여러 div 목록만들어 쓰기 (UseContext / map/slice)

만약 내가

(AllContext.jsx) 파일에 있는

공지사항 의 제목, 연도를 가져오고 싶다고 가정하면 아래와 같은 코드이다

 

 

| Main.jsx

import React, { useContext, useState } from "react"; //useContext 를 가져오기위한 코드
import { Link } from 'react-router-dom'; //이건 링크를 달기위한코드 (a href같은 코드)
import AllContext from './AllContext'; // context가 있는 파일을 가져오는 코드


function Main() {
    return(
        <div>
       <p className={styles.num_text}>
          총 <span>{noticeData.length}</span>건
          // 몇 건인지 context파일안의 갯수로 .length를 사용해 표기
        </p>
             {noticeData.map((item) => (
                <Link to='/NoticeInner'>
                <div key={item.id} className={styles.text_index}>
                    <p className={styles.text_le}>{item.title}</p>
                        <p className={styles.text_ri}>{item.date}</p>
                </div></Link>
                ))}
                    
            
        </div>
    )
};

export default Main;

 

 

| AllContext .jsx

import React, { createContext, useState} from "react";


// 공지사항 정보
const NoticeData = [
    {
        id: 1,
        title: '가곡과 아리아의 밤 부산예술회관 공연장 입장공지',
        date: '24년 7월 10일',
    },
    {
        id: 2,
        title: 'BMPO와 함께하는 추억의 영화음악 부산문화회관 중극장 입장공지',
        date: '24년 6월 10일',
    },
    {
        id: 3,
        title: '제18회 부산국제 어린이청소년 영화제 애니메이션 음악회 영화의 전당 하늘연극장 입장공지',
        date: '24년 5월 10일',
    },
   
  
]


const AllContext  = createContext();


const AllContext  = createContext();

export const AllContextProvider = ({children}) => {
// 공지사항 데이터 저장
const [noticeData, setNoticeData] = useState(NoticeData); // noticeData 상태 추가
const [noticeDataSlice, setnoticeDataSlice] = useState(noticeData.slice(0, 2));  //2개만 잘라서 저장도 가능
  return (
    <AllContextProvider.Provider value={{noticeData, noticeDataSlice}}>
      {children}
    </AllContextProvider.Provider>
  )
      
};

export default AllContextProvider;

 

 

 

제목, 등록일은 html