코딩앙마 React공부 (더미 데이터 구현, map() 반복문)

본격적인 페이지 만들기

 

Header부터 만들기

 

Header.js 컴포넌트 파일

 

 

 

API가 없으므로 더미데이터 파일 생성

 

 

DayList.js 컴포넌트 생성 및 더미데이터 불러오기

 

 

App.js에 import및 배치

 

 

map은 배열을 받아서 또 다른 배열을 반환해준다. 이때 반환되는 배열의 요소는 JSX로 작성해주면 된다.

 

Day는 표현이 잘된다는 것을 확인할 수 있다.

단, 개발자도구에서 콘솔을 보면 이런 오류가 뜬다.

 

key는 반복되는 요소에  고유한 값을 넣어줘야 한다. 

key를 넣은 후 오류가 사라짐

 

다음은, Day컴포넌트 생성

 

특정날짜를 선택해서 들어갔을때 단어들이 나오는 페이지 (더미데이터 사용)

 

Day.js

App.js

 

결과 화면

 

Day1을 누르면 1일치에 해당하는 단어가 나와야하는데 다 나오는것이 문제

import dummy from "../db/data.json";

export default function Day() {

    const day = 1;

    const wordList = dummy.words.filter(word => word.day === day);

    console.log(wordList);

    //dummy.words

    return <>

    <table>

        <tbody>

            {wordList.map(word => (

            <tr key={word.id}>

                <td>{word.eng}</td>

                <td>{word.kor}</td>

            </tr>

            ))}

        </tbody>

    </table>

    </>;

}

더미 데이터를 사용하기 때문에 day 1을 고정으로 하고 테스트 돌려봅니다.