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: ..

학습 목표 import React, { useRef, useState } from "react"; const DiaryEditor = () => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }) } const handleSubmit = () => { if (state.author.length < 1) { // focus authorInput.c..