https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com JSONPlaceholder 사이트에 접속하여 무료API를 먼저 사용하자. 그래서 Resources의 Comments에 접속하여 자료를 가져온다. https://jsonplaceholder.typicode.com/comment..

LifeCycle이란? depency를 잘 사용하면, 업데이트 한 것들을 잘 활용할 수 있다. UseEffect사용방법 mount, update 사용 App.js import { useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; import Lifecycle from "./Lifecycle"; const App = () => { // 전역적으로 Data 관리할 state const [data, setData] = useState([]); const dataId = useRef(0); const onCreate = (auth..

App.js import { useRef, useState } from "react"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; import "./App.css"; const App = () => { // 전역적으로 Data 관리할 state const [data, setData] = useState([]); const dataId = useRef(0); const onCreate = (author, content, emotion) => { const created_date = new Date().getTime(); const newItem = { author, content, emotion, created..

App.js import {useRef, useState} from 'react'; import DiaryEditor from './DiaryEditor'; import DiaryList from './DiaryList'; import "./App.css"; // const dummyList = [ // { // id: 1, // author: "이정환", // content: "하이 1", // emotion: 5, // created_date: new Date().getTime(), // }, // { // id: 2, // author: "홍길동", // content: "하이 2", // emotion: 2, // created_date: new Date().getTime(), // }, // {..

그래서 state를 에디터와 리스트에 공통 분모 요소로 끌어올려서 해결할 수 있다. editor와 list의 공통분모인 App 컴포넌트가 일기 데이터를 state로 배열형식의 state를 가지고있고 data state 의 값을 다이어리 리스트에게 전달하면서, 리스트를 렌더링하게 하고 데이터라는 state를 변화시킬 수 있는 setData라는 상태변화함수를 editor 컴포넌트로 프롭으로 전달해주면 된다. Simulating https://hanamon.kr/codestates-til-%ED%95%AD%ED%95%B4%EC%9D%BC%EC%A7%80-35%EC%9D%BC%EC%B0%A8/ [TIL] 항해일지 35일차 - 하나몬 ⚡️ React 데이터 흐름 ❗️컴포넌트로 생각하기 👉 React의 개발 방식의..

학습 목표 {diaryList.map((it) => ( ))} map((it)) 기능을 통해서, list에 있는 데이터들을 모두 들고 올 수 있었고, DiaryItem파일을 보면, 데이터들을 들고올 수 있음을 알 수 있다. App.js import React, {useState, useEffect} from 'react'; import DiaryEditor from './DiaryEditor'; import DiaryList from './DiaryList'; import "./App.css"; const dummyList = [ { id: 1, author: "이정환", content: "하이 1", emotion: 5, created_date: new Date().getTime(), }, { id: ..