$$config title: [명언 프로젝트] 명언프로젝트 최종 (3. 리액트 구현(with 코드펜)) keywords: - 랜덤명언 - Codepen - 리액트 - React $$ # 수업 참고 - [명언프로젝트 수업 주소](https://slog.gg/p/6273) # 1. HTML ```html

``` # 2. CSS ```css @font-face { font-family: "GmarketSansMedium"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff"); font-weight: normal; font-style: normal; } html, body, #root { height: 100%; margin: 0; } html > body, html > body input, html > body select, html > body textarea, html > body pre, html > body button { font-family: "GmarketSansMedium"; color: #333; text-underline-position: under; line-height: 1.3; } #root { display: flex; flex-direction: column; } ``` # 3. JS (리액트) ```js console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; const LIFEQUOTES_API_HEAD = "http://localhost:3000/lifequotes"; function App() { //초기 명언은 null로 생성 const [lifequotes, setLifequotes] = useState(null); const reloadLifequotes = async () => { const data = await fetch(`${LIFEQUOTES_API_HEAD}/random`); const json = await data.json(); //json.data하는 거 까먹음. setLifequotes(json.data); }; useEffect(reloadLifequotes, []); if (lifequotes === null) { return <>로딩 중..; } const doLike = async () => { //새로운 명언 객체 하나에 기존의 것을 받고 좋아요 수만 추가 const newLifequotes = { //기존의 것들은 그대로 둔다는 표현 ...lifequotes, //기존의 좋아요 수에 1을 더해서 새로운 명언에 추가 like_Count: lifequotes.like_Count + 1 }; await fetch(`${LIFEQUOTES_API_HEAD}/${lifequotes.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...newLifequotes }) }); setLifequotes(newLifequotes); }; const doDisLike = async () => { //좋아요와 동일하게 진행 const newLifequotes = { ...lifequotes, dislike_Count: lifequotes.dislike_Count + 1 }; await fetch(`${LIFEQUOTES_API_HEAD}/${lifequotes.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...newLifequotes }) }); setLifequotes(newLifequotes); }; return ( <>

{lifequotes.content}
작가 : - {lifequotes.author} -
조회수 : {lifequotes.hit_Count}
좋아요 : {lifequotes.like_Count}
싫어요 : {lifequotes.dislike_Count}

); } ReactDOM.render(, document.getElementById("root")); ```

게시글 상세