🌊 TIL : 2023년 4월 23일 오늘 배운 것 React 상태관리 라이브러리 Immer React Form React Context 더 공부할 것 Redux

🌊 TIL : 2023년 4월 21일 오늘 배운 것 React 상태관리 Props Drilling 전역 상태 관리 어려웠던 부분 상태를 내려주는 것은 괜찮았지만 원하는 데이터를 뽑아내는 것이 어려웠다. 더 공부할 것 역시 기본인 자바스크립트도 꾸준히 공부해야할 것 같다..

🌊 TIL : 2023년 4월 20일 오늘 배운 것 react custom hook useReducer 예제 제작 더 공부할 것 React Hook

🌊 TIL : 2023년 4월 19일 오늘 배운 것 React Custom Component 과제 useRef 어려웠던 부분 여태껏 배운 것을 종합해서 쓰려니 처음엔 조금 당황했지만 내가 결국 해냄 느낀점 리액트.. 너무 재밌당 요즘 시간이 참 빨리간다는걸 느낍니다. 남과 비교해서 발전할 수 없다는걸 알고있지만 그래도 조급한 맘이 드는건 어쩔 수가 없네요. 더 공부할 것

🌊 React Custom Component 과제 오늘은 리액트 hook을 사용하여 Custom Component 과제를 하였습니다. Bare minimum Requirement로 Modal, Toggle, Tab, Tag를 구현 과제가 나왔고 Advanced Challenge는 내일 도전해볼 생각입니다. 오늘 구현한 Modal, Toggle, Tab, Tag를 소개하고 코드 작성시 고려했던 점을 리뷰하려 합니다. Modal export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display: flex; justify-content: center; align-items: center; height: 10..

🌊 비동기 프로그래밍 const foo = () => {}; const bar = () => {}; foo(); bar(); 위 예시 이미지와 코드를 보면 foo 함수와 bar 함수는 호출된 순서대로 스택 자료구조인 실행 컨텍스트 스택에 푸시되어 실행된다. 함수가 실행되려면 '함수 코드 평가 과정'에서 생성된 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야 한다. 실행 컨텍스트 스텍에 함수 실행 컨텍스트가 푸시 되는 것은 바로 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. (들어온 순서대로 스택에 들어가 실행된다.) 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는..

🌊 TIL : 2023년 4월 18일 오늘 배운 것 styled-component storybook useReducer useMemo useCallback 어려웠던 부분 어렵다기보단 아직 실사용할 때 어떻게 적재적소에 사용할 지 감이 안 온다. 많은 예제들을 보며 공부해야할 것 같다. 더 공부할 것 React Hook

🌊 Hook - useCallback : useCallback은 useMemo와 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에 사용한다. 컴포넌트 내에서 함수를 선언하면 컴포넌트가 리렌더링 될 때 마다 새로 만들어진 함수를 사용하게 되는데, 대부분은 문제 없지만 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 useCallback을 사용하여 최적화한다. 즉, 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. useCallback import React, { useCallback, useMemo, useState } from 'react'; const getAverage = (numbers) => { console.log('평균값 계산 중....