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

useInterval을 또 다시 사용해보자

이전 포스트에서 만들었던 useInterval을 이용해서 시간이 얼마나 남았는지 출력하는 앱을 만들어보려고 한다. 2탄이다!! 들어가기에 앞서 이번 글도 코드종님의 영상을 참고하여 정리하는 글이다. 코좀봐코 앱을 만들기 전에 항상 생각해야할것은 입력과출력이다. 리액트 훅을 이용한 함수 컴포넌트는 기본적으로 순수함수이다. 순수함수의 출력값을 바꾸는 것은 입력값밖에 없다. 입력값은 prop, state가 대표적이다. 그래서 입력값을 생각해보자. 얼마나 남았는 지 가 입력이 되고 출력은 말그대로 그 입력을 그대로 출력하면 된다. 이런식으로 입력과 출력을 생각하면 사고의 흐름이 명확해진다. 그럼 일단 prop을 통해 넘겨주는 방식으로 만들어 보자 일단 동작은 잘한다. 근데 그다지 좋은 방법은 아니다. 왜냐면 App 전체가 랜더링 되기 때문에 countDownView뿐만 아니라 N

2022년 6월 21일
·
0개의 댓글
·
post-thumbnail

react에서 카운트다운을 해볼까나

react에서 1초씩 카운트 하면서 화면에 출력해주는 함수가 있다고 하자. 그럼 코드를 요렇게 작성할 것이다. 그럼 잘 작동할까? 놀랍게도(?) 잘 작동하지 않는다. 왜냐면 리랜더링할때마다 setInterval이 새로 호출이 된다. 그럼 setCount를 여러번 만들어내는 것이랑 같은효과가 나타나게 된다. 즉 count가 점점 쌓여간다는 것이다. 그래서 아래와 같이 바꾸어 준다. useEffect는 디폴트값으로 매번 랜더링하게 되어있다.(두번째 인자가 없을때) 그럼, 랜더링될때 setInterval id가 만들어지고 리랜더링되기 전에 return문에 의해 setInterval이 클리어된다. 그리고 2번째 랜더링때 다시 setInterval이 만들어지고 클리어되고를 반복한다. 결국 잘작동하지만 매번 setInterval이 만들어지고 지워지고를 반복하기 때문에 비효율적이다.(만약 return으로 클리어해주지 않는다면 이전과 같은 이슈가 발생할 것이다.) 그래서 빈 a

2022년 6월 20일
·
0개의 댓글
·