오늘은 개발자모드의 Components의 Highlight updates when components render 기능을 사용해 볼것이다. 이 기능은 어떤 컴포넌트가 행동에 의해서 rerendering하고 있는지 주황색 라인으로 highlight해주는 기능이다. useEffect와 console을 사용하면 다 알수 있지만, 추후에 개발을 진행하면 10개 20개가 넘는 컴포넌트들을 사용하면서 모든 컴포넌트에 대해 console로 지우는 일은 굉장히 큰 일이 되기 때문에 이 기능이 아주 유용할 것임을 짐작할 수 있다. 그리하여 오늘은 어떤 component가 낭비되고 있는지 알아볼 것이다. 현재 일기 List를 삭제해도 DiaryEditor 부분도 rerendering 되고 있는것을 알 수 있다. Compo..

count가 업데이트되면, 부모컴포넌트가 리렌더링 하기 때문에 자식 컴포넌트들도 리렌더링하게 된다. 근데 여기서 TextView 컴포넌트는 리렌더링할 필요가 없음을 알게된다. >> 성능상 문제 및 낭비 그래서 count가 업데이트 될 때, CountView만 리렌더링 되도록 조건을 주는 기능을 찾아보자. 실제 코드상으로 할 수 있는 기능이 있다. 이는 바로 React.memo - 함수형 컴포넌트에게 업데이트 조건을 거는 기능 자 우선 React 공식문서 사이트로 이동을 해보자. https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs...

Memoization이란? 이미 계산 해 본 연산 결과를 기억해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억 해 두었던 데이터를 반환 시키게 하는 방법 마치 시험을 볼때, 이미 풀어본 문제는 다시 풀어보지 않아도 답을 알고 있는 것과 유사함 ex) 문제 A 상황 : 처음 만난 문제 해결 방법 : 할 수 있는 모든 방법을 시도 해 본다. 해결 이후 : 답을 기억해 둔다. 상황 : 이전에 풀어 본 경험이 있는 문제 해결 방법 : 기억해 두었던 답을 다시 적는다. 이러한 과정을 Memoization을 이용한 연산 과정 최적화라고 표현할 수 있다. Memoization 사용 전 App.js import { useEffect, useRef, useState } from "react"; import "..

React를 개발하는데 도움을 주는 툴들을 소개하고자한다. 먼저 크롬 웹스토어에 접속하여 https://chrome.google.com/webstore/category/extensions?hl=ko Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com react developer tools를 검색한다. 그러면 제일 상단에 띄워지는 react developer tools를 다운로드한다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React ..

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