[React] React로 Voca 만들기 -1

리엑트로 간단한 VOCA를 만들었다. 

 현재 화면

 

  

App.js

import './App.css';
import Hello from './component/Hello';
import UseState from './component/SampleUseState';
import Welcome from './component/Welcome';
import SampleUseState from './component/SampleUseState';
import Header from './component/Header';
import DayList from './component/DayList';
import Day from './component/Day';
 function App() {
   return<div className='App'>
     <Header/>
     <DayList/>
     <Day/>
   </div>
 }
export default App;

App.js 에서는 <header> , <DayList> <Day> 컴포넌트를 이용하여 화면을 구성했다. 

 

Header.js

export default function Header () {
    return (<div className="header">
        <h1>
            <a href="/">토익 영단어(고급)</a>

        </h1>
        <div className="menu">
            <a href="#x" className="link">
                단어추가
            </a>
            <a href="#x" className="link">
                Day 추가
            </a>
        </div>
    </div>
    )};

Header.js에서는 단어추가, Day추가, 버튼을 만들었으며 아직은 기능은 추가하지 않은 상태이다. 

Header.js

 

 

 

 

 

DayList.js

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


export default function DayList(){
 console.log(vocaData);
    return (<ul className="list_day">
        {vocaData.days.map(day=>(
            <li key={day.id}>Day {day.day}
            </li>
        ))}
     
    </ul>
    );
}

DayList 컴포넌트에서는 vocaData를 map을 이용하여 화면에 뿌려주고 있다. 

vocaData.days를 콘솔창에 찍으면

console.log(vocaData.days)

이런식으로 나오게 되는데 map을 이용하여 vocaData.days.의 값을 day에 넣고 day.day를 이용하여 화면에 뿌려주고 있다.

 

(DayList)

 

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

export default function Day() {
    const day= 2;
    const worldList = vocaData.words.filter(word=>(word.day===day))
    console.log(worldList)
    return (<>
        <table>
            <tbody>
                {worldList.map(word => (
                    <tr key={word.id}>
                        <td>{word.eng}</td>
                        <td>{word.kor}</td>
                    </tr>

                ))}

            </tbody>
        </table>


    </>
    );
}

 

Day 컴포넌트에서는 해당 Day의 단어를 가져와 뿌려주고 있다.

 

    const day= 2;

    const worldList = vocaData.words.filter(word=>(word.day===day)) 를 이용하여 day가 2일인 데이터를 worldList 변수에 넣어서 map을 이용하여 출력을 한다. 

 

 

const Day = 1; 이라고 입력을 하면 Day1 data를 화면에 뿌려준다. 

day 1 data

 

const Day = 3; 일 때 

day 3 data

지금은 소스로 day의 값을 넣지만 다음 게시글에서는 화면에서 day를 클릭하면 바뀌도록 구현 할 것이다. 

 

 

출저 코딩앙마

https://www.youtube.com/watch?v=05uFo_-SGXU&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-

https://github.com/kimsanhaa/react_voca