짧은코딩

이전까지 한 최적화를 해도 모든 최적화가 되진 않는다. 특히 심각한 것은 댓글을 삭제하면 다른 댓글도 리렌더링된다. -DiaryItem.js import React, { useEffect, useRef, useState } from "react"; const DiaryItem = ({ onEdit, onRemove, author, content, created_date, emotion, id, }) => { useEffect(() => { console.log(`${id}번 째 아이템 렌더!`); }); // isEdit가 false면 평소, true면 수정하는 상태 const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIs..

-DiaryEditor.js import React, { useEffect, useRef, useState } from "react"; const DiaryEditor = ({ onCreate }) => { useEffect(() => { console.log("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, }..

App에서 state로 count, text가 있다. 그리고 자식 컴포넌트에 CountView는 count를 받고 TextView는 text를 받는다고 한다. 그럼 count가 변경되었을 때, 모두 자식도 모두 리렌더 된다. 하지만 TextView는 리렌더 될 필요가 없다. => 자식 컴포넌트에게 업데이트 조건으로 각각 count와 text가 변경될 때만 업데이트 되도록 조건을 걸면된다. 이것을 할 수 있는 것이 React.memo이다. -리엑트 공식 문서 https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 이 사이트를 잘..

Memoization 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억했던 데이터를 반환 시키게 하는 방법 -Memoization이 리엑트의 어떤 부분에 적용되어야 하는지 App.js import { useEffect, useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const App = () => { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { cons..

React developer tools 리엑트 개발시에 생산성을 굉장히 늘려준다. 이것은 크롬의 확장 도구이다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision ca7a38ae4 on 5/12/2022. chrome.google.com 이 사이트에서 다운 설정 -> 도구 더보기 -> 확장 프로그램 -> 세부 정보 그리고 설정을 켜준다. 그 후 npm start를 하면 오른쪽 상..

-API 호출을 위한 사이트 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 여기에는 어떤 API 서비스로 자원을 가져다가 쓸 수 있는지 리스팅을 해놨다. 이중에서 comments를 사용했다. comments의 내용에서 이런 것을 활용해 데이터를 가공했다. -App.js i..

Lifecycle 탄생: 화면에 나타나는 것(Mount), ex) 초기화 작업 변화: 업데이트, 리렌더(Update), ex) 예외 처리 작업 죽음: 화면에서 사라짐(UnMount), ex) 메모리 정리 작업 리엑트는 각 주기마다 사용할 수 있는 메소드를 가지고있다. Mount: ComponentDidMount, 컴포넌트가 생기는 순간에 사용 Update: ComponentDidUpdate, 컴포넌트가 변화하는 순간에 사용 Unmount: ComponentWillUnmount, 컴포넌트가 화면에서 사라지기 이전에 사용 -React Hooks 원래 State, Effect, Ref 등은 class형 컴포넌트에서만 사용가능 하고 함수형 컴포넌트에서 못 사용하는데 use를 붙여서 낚아채서 사용한다. 하지만 c..

import { useRef, useState } from "react"; const DiaryItem = ({ onEdit, onRemove, author, content, created_date, emotion, id, }) => { // isEdit가 false면 평소, true면 수정하는 상태 const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIsEdit(!isEdit); // 기본값 content로 해야 원래 값에서 수정 가능 const [localContent, setLocalContent] = useState(content); const localContentInput = useRef(); const hand..

-App.js import { useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const App = () => { 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_date, id: dataId.curre..

App DiaryEditor DiaryList 리엑트는 이런 트리 구조로 이루어져 있다. 0번 레벨: App 1번 레벨: DiaryEditor, DiaryList 이렇게 있고 같은 레벨끼리는 데이터를 주고 받을 수 없다. React는 단방향으로 데이터가 흐른다, 즉 위에서 아래로만 흐른다. 이벤트가 발생하면 위로 올라가는 흐름이 나오고 데이터를 추가하면 아래로 내려가는 흐름이 나온다. -App.js import { useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const App = () => { const [data, ..