profile
'과연 이게 최선일까?' 끊임없이 생각하기
태그 목록
전체보기 (282)DFS(8)완전탐색(4)this(4)Sort(4)splice(3)queue(3)재귀(3)BFS(3)stack(3)useEffect(3)useState(2)API(2)tailwind(2)toggle(2)ESLint(2)&&(2)useInterval(2)combination(2)useMemo(2)Que(2)발상의 전환(2)hash(2)CRUD(2)greedy(2)리팩토링(2)dynamic array(2)setInterval(2)setTimeout(2)reduce(2)getter(2)react-query(2)Binary Search(2)생명주기(1)시각화(1)Compound Components pattern(1)이중 포인터(1)google(1)일단그대로만들기(1)apply(1)call(1)mutaionObserver(1)git(1)503(1)test(1)canvas(1)withCount(1)Mocking(1)버그(1)corona(1)search(1)routing(1)kwargs(1)function(1)undefined(1)heroku(1)dic(1)mixin(1)Fiber(1)path parameter(1)scss(1)destructuring(1)cors(1)webvitals(1)component(1)next image(1)done(1)Pivot(1)min-width(1)promise(1)every(1)swr(1)H Index(1)LCP(1)WILDCARD(1)history API(1)순수함수(1)prisma(1)contains()(1)Content-Type(1)absolute(1)ORM(1)caching(1)relative(1)고딩때의 추억(1)GET(1)POST(1)makeStyles(1)프로그래머스(1)debugger(1)static path(1)alias(1)slug(1)OOP(1)merge(1)next js 공홈 짱!(1)restful api(1)DNS(1)bind(1)customState(1)stackoverflow(1)createStyles(1)IAM(1)선언형 방식(1)smoking test(1)happy path(1)heap(1)스켈레톤(1)개발자 vibe(1)commands(1)NOT(1)Request(1)약수의 갯수(1)srcset(1)boolean(1)mocks(1)custom render(1)Namespace(1)findIndex(1)fibonacci(1)memoization(1)함수형 컴포넌트(1)cypress(1)quick(1)개발자직업병(1)vmin(1)응집도(1)nth-of-type(1)Thinking in React(1)notifyOnChangeProps(1)jsconfig.json(1)variables(1)Helper(1)sortable(1)reconciliation(1)beforeunload(1)Module(1)무식하게(1)dijkstra(1)라우팅(1)MVC(1)Trie(1)뿌듯(1)beautifulsoup(1)CLS(1)navigate(1)해쉬(1)throttle(1)debounce(1)HistoryAPI(1)capturing(1)BLOGGING(1)Object.assign(1)"for 와 recursive의 조화(1)high order function(1)Prototype(1)await(1)sizes(1)cachememory(1)nth-child(1)skeleton(1)compose(1)loader(1)waitForElementToBeRemoved(1)try/except(1)rules of hooks(1)일단돌아가야..ㅋ(1)Statement(1)wait()(1)async(1)rstrip(1)다시 만들기(1)return(1)escape(1)class(1)for(1)State and Lifecycle(1)cmd(1)bubble(1)JavaScript(1)singly linked list(1)render_template(1)useParams(1)pagination(1)고차함수(1)Higher-order Function(1)JSX ELEMENT(1)Call By Reference(1)신뢰자산(1)progress(1)unshift(1)신속정확(1)span(1)div(1)nested for loop(1)auto-complete(1)d.ts(1)react testing library(1)error(1)wrap(1)If_Else(1)ec2(1)documentFragment(1)mini project(1)json(1)drag and drop(1)크루스칼(1)const(1)replace(1)맴버변수(1)식도염(1)사실성장(1)visible(1)format(1)Prime(1)diffing(1)componentWillUnmount()(1)다중 정렬(1)expression(1)CS(1)End to End Test(1)filter(1)props.children(1)z-index(1)debugging(1)Hash brown 맛있겠다(1)new Intl(1)ARP(1)delete(1)build error(1)mixitup(1)클린코드(1)base_url(1)부분집합(1)jquery(1)투자(1)Group(1)media query(1)RAM(1)State(1)useReducer(1)useRef(1)LILO(1)vite(1)sqlite(1)global(1)응급상황(1)DOM(1)query paramter(1)DB 설계(1)good_job(1)global style(1)PriorityQueue(1)styled(1)styled components(1)memory leakage(1)Design Pattern(1)칭찬(1)hook(1)useCallback(1)MSW(1)act(1)fixtures(1)Derived State(1)CustomHook(1)꼭꼭 숨어라 머리카락 보일라(1)이중포문(1)double bang(1)CSR(1)SSR(1)github-issues(1)콜트짱!(1)preventDefault(1)최대약수(1)localstorage(1)Pop(1)오류(1)inline(1)shield.io(1)transition(1)split()(1)max(1)f-string formatting(1)CustomEvent(1)object-relational-database(1)tryCatch(1)animation-fill-mode(1)setter(1)extends(1)regexp(1)Fetch(1)submit(1)dict(1)addEventListener(1)supabase(1)삽질(1)layer(1)doubly linked list(1)Delegation(1)LIFO(1)jest(1)MAX_PAGE(1)change event(1)HoC(1)enabled(1)useLocation(1)github(1)오히려좋아(1)컨벤션(1)dash(1)FID(1)인형뽑기(1)random(1)FLOOR(1)seo(1)lazy(1)validator(1)JSX(1)Flask(1)express(1)super excited(1)auto fit(1)auto fill(1)useNavigate(1)dblclick(1)life cycle(1)debug(1)Map(1)@BeforeEach(1)그래프(1)Then(1)new Date(1)spyon(1)withStyle(1)data set(1)clean-up(1)Props(1)Content(1)min(1)데이터 분석(1)dispatchEvent(1)single source of truth(1)plotly(1)csv(1)bubbling(1)color palette(1)pandas(1)grid(1)max-width(1)나무(1)customElement(1)dynamic programming(1)closure(1)좋은 개발자(1)Routes(1)github issue(1)emotion(1)이름짓기(1)audio(1)set(1)react router(1)FCP(1)
post-thumbnail

React Hook - useMemo

이젠 함수형 컴포넌트에서 Hook을 이용해서 memo를 사용할 수 있다. useMemo는 obj(함수든 객체든 뭐든)와 [...dependencies] 두가지 인자가 들어간다. useMemo는 dependencies중에 바뀐 값이 있으면 obj를 새로 불러와서 리턴값을 넘겨준다. 바뀐 값이 없으면 obj를 새로 불러와서 리턴하지 않고 이전에 메모리제이션된 dependencies를 넘겨준다. 그런데 중요한것은 새로 리턴된 obj를 불러올 경우 referenece까지 다른 obj를 불러오고 기존에 저장되어있는 dependencies를 불러올 경우에는 reference까지 같은 값을 가져다가 준다는 것이다! 요것을 잘기억하고 있자. 그럼 간단한 앱을 만들거다. input에 입력될때마다 2를 곱한값을 넘겨줄거다. 근데 그 사이에 쓸데없는 for loop이 있어서 계산이 조금 지체되는 효과를 주었다. 이 함수를 slowFunction이라고 부르겠다. 그리고 버튼을 클릭할 때 마다

2022년 2월 23일
·
0개의 댓글
·
post-thumbnail

React.memo

기본 개념 todo를 React.memo로 한층 더 최적화 가능하다!?!? 그렇다 알고리즘의 memoization 개념을 차용한것이다. 사실 todo가 변경될때 , 변경된 todo만 선별적으로 랜더링하면 되는데 변경되지 않은, 아니 변경하지 않아도 되는 다른 todo까지 함께 랜더링 되어서 비효율적이다. 아래와 같이 말이다. 마지막 todo를 지우면 지워진 todo만 없어지면 되는데 위의 todo까지 모두 랜더링 된다. 그럼 memo를 적용해보자. 참고로 React.memo는 HOC이다. 즉, 랜더링 되는 컴포넌트를 감싸야한다. 정말 간단하다. 그냥 랜더링 되는 자식 컴포넌트에 memo를 입혀주면 된다.(React.pureComponent와 거의 비슷하다고 한다) 그럼 passed된 p

2022년 2월 22일
·
0개의 댓글
·