[React] Routing (5) 데이터에서 route 설정하기
더미데이터에서 route 설정하는 법을 알아보자! 구현해야할 것 메인페이지에는 먹거리, 볼거리, 놀거리, 카페, 테마카페가 있다. 각각의 항목에 맞는 개별 페이지로 이동하게 해야한다. 예컨대, 먹거리를 누르면 한식, 중식, 일식, 양식, 치킨 , 패스트푸드가 담긴 페이지가 뜨게끔 route를 설정해야한다. 메인페이지 (Main.jsx) 하위 카테고리 페이지 순서 1. App.js에 route를 설정한다. 메인, 먹거리, 볼거리, 놀거리, 카페, 테마카페 총 6개의 route를 설정한다. 2. main.js에다가 더미 데이터를 만들 때, 각각의 항목에 맞는 route를 설정해준다. 2. 메인페이지(Main.jsx)에서 main.js 데이터를 보라색 박스 컴포넌트에다가 map 돌린다. 3. 보라색 박스 컴포..
[React] map과 find를 사용해서 데이터 리스트 렌더링 하기
목차 1. map을 사용하여 렌더링 하기 2. 리스트가 따로 컴포넌트로 분리 됐을 경우에 map을 사용하는 법 3. find를 사용하여 렌더링 하기 4. 컴포넌트로 분리 됐을 경우에 find 사용하는 법 map과 find를 사용해서 데이터 리스트 렌더링을 해보자! 1. map을 사용하여 렌더링 하기 (1) 기본적인 마크업을 하고, 데이터 리스트를 작성한다. List.jsx (페이지) import "./List.css"; const List = () => { const dummyList = [ { id: 1, title: "1번 게시글", }, { id: 2, title: "2번 게시글", }, { id: 3, title: "3번 게시글", }, { id: 4, title: "4번 게시글", }, { id..
[React] 데이터 값에 따라 CSS 스타일 다르게 지정하기
데이터 값에 따라 CSS 스타일을 다르게 지정하는 법을 알아보자! 만들 예제의 완성본 "영업중"은 파란색, "영업종료"는 빨간색으로 뜬다. 1. 마크업을 한다. List.jsx (리스트 페이지) import "./List.css"; const List = () => { const dummyList = [ { id: 1, title: "닭갈비", state: "영업중" }, { id: 2, title: "피자", state: "영업종료" }, { id: 3, title: "치킨", state: "영업중" }, { id: 4, title: "떡볶이", state: "영업중", }, { id: 5, title: "짜장면", state: "영업종료", }, ]; return ( 음식점 리스트 {dummyList..
