해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.
이번 시간에는 본격적으로 페이지를 만들어볼 예정이다.
더미 데이터 구현
Header.js
App.js
결과창
영단어 페이지
아래부분에는 날짜가 나오도록 한다. (Day1 부터 순서대로 나열)
data.json
지금은 데이터가 따로 정해지지 않아서 → db 폴더를 생성한 후 data.json 에 데이터 관리를 해보자.
날짜와 단어들을 배열로 선언한 후 정보들을 입력해보자.
3일치 단어는 6개를 만들었다.
DayList.js
DayList.js 를 생성한다.
첫번째로 해야할 일은 dummy 데이터를 불러오는 것이다.
console.log 를 통해서 dummy 데이터가 잘 불러와지는 것을 확인할 수 있다.
결과창
DayList.js
이제 dummy 데이터를 활용해서 표현해보자.
<ul> 태그 안에 <li> 태그를 사용하는데, day 개수 만큼 반복문을 사용해야한다.
반복문은 map() 을 사용하는 것이 편하다.
key 는 반복되는 요소의 고유한 값을 넣어줘야 하는데, 여기서는 day.id 를 넣어보자. → 경고문이 사라짐.
리액트에서 key가 왜 필요한지, 그리고 어떤 값을 넣는게 좋은지, 왜 중요한지? 알고싶다면, 추가영상
map 은 배열을 받아서 또 다른 배열을 반환해준다. 이 때, 반환되는 배열 요소는 JSX 로 작성해주면 된다.
우리는 화살표 함수로 바로 return 문을 작성한다.
결과창
Day.js
component 폴더에서 Day.js 를 생성한다.
day 리스트에서 특정 날짜를 클릭했을 때 단어들이 나온다. → dummy 데이터를 이용하자.
단어들이 쭉 나열되니까 table 로 제작하자. → 일단 단어와 뜻만 표현해보자.
해당 빨강 부분을 반복해주면 우리가 원하는 모양으로 표현된다.
App.js
Day 를 import 해주고 를 추가한다.
결과창
⇒ (문제점) 지금 모든 단어가 다 출력되고 있다.
Day 1 을 누르면 dummy 데이터를 활용하니까 1일치에 해당하는 단어만 나와야 한다.
Day.js
Day 1 로 고정하고 다시 코딩해보자.
day에 filter로 단어 날짜가 1인 것만 출력하도록 설정했다.
결과창
day : 1 인 것만 잘 출력되었음
Day.js
단어 날짜가 1인것만 map을 통해 반복문으로 출력해보자.
결과창
에러 발생
key 라는 고유값이 없다고 뜬다.
Day.js
<tr> 에 key={word.id} 작성
const day = 2 로 변경하면 다른 단어가 나온다.
(문제점)
단어가 지금처럼 나오면 안되고, Day 1 등의 데이를 클릭하면 단어가 일차별로 바뀌어야 한다.
⇒ 즉, 새로운 페이지를 만들어야 한다.
⇒ 리액트 라우터를 사용해 페이지 이동, 라우팅을 구현해 보자.
