dev-hamster

목차들어가며state를 업데이트 하는 방법1줄 요약: 비동기적으로 동작하는 useState추가(with console.log)들어가며리액트는 state를 한번에 모아서 업데이트 한다고 알고있다. 오늘은 이것이 어떤 의미인지 알아보겠다. 버튼 클릭시 count 상태 값을 증가해주는 코드가 있다. 예시 1번과 예시 2번의 차이점은 무엇일까?// 예시 1import { useState } from 'react';function App() { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1); }; return..

들어가며리액트 렌더링 개념과 관련해서 정리한 내용입니다. https://ko.react.dev/와 책을 참고했습니다.리스트에 올바른 Key 값을 넣어줘야 하는 이유리액트는 key값을 이용해 형제 항목을 고유하게 식별한다. 리액트는 key값으로 리스트를 식별해 재조정을 하기 때문이다. 예제를 통해 더 자세히 알아보자. 이 예제를 통해 인덱스로 키 값을 사용하면 왜 안되는지 확인할 수 있다. 마지막에 있는 인풋에 hello를 입력하고 버튼을 누르면 id를 key값으로 사용하는 경우만 올바르게 렌더링 됐다. 렌더링이 발생하는 조건함수형 컴포넌트 기준으로 렌더링이 발생하는 조건은 다음과 같다. 최초 렌더링사용자가 처음 어플리케이션에 진입리렌더링useState()의 setter가 실행되는 경우useReducer..

목차들어가며transform으로 개선 전 후 성능 비교하기Layout, Reflow, Paint, Repaint애니메이션은 어떻게 처리될까?들어가며드래그 이벤트 구현시 초기에는 엘리먼트의 위치를 top 과 left 값으로 업데이트해주었다. 그런데 드래그시 미세하게 버벅거려 transform 으로 변경해 매끄러운 드래그 이벤트를 구현했다. transform은 Layout(Reflow)를 발생시키지 않아 더 빠르게 위치를 업데이트 할 수 있다.이 포스트에서 실제로 성능을 비교해보고 브라우저 렌더링 과정을 이해하고 마지막으로 transform은 어떻게 처리하는지 알아보자.transform으로 개선 전, 후 성능 비교하기크롬 성능 측정을 이용해 드래그 이벤트를 발생시킨 후, 드래그가 본격적으로 발생한 약 4초 ..

목차목표 기능구현 아이디어상세 구현 내용마무리목표 기능윈도우 창을 드래그 할 수 있는 기능이다. react-draggable 라이브러리를 이용하면 손쉽게 구현할 수 있지만 어떻게 구현해야 하는지 알아보기 위해 구현한다.구현 아이디어react-draggable 구현 참고하기react-draggable 라이브러리를 사용하면 아이템을 드래그앤 드롭 이벤트를 쉽게 구현할 수 있다. 아이템은 CSS transform을 이용해 위치를 움직인다.react-draggable 라이브러리는 어떻게 구현했는지 짧게 확인해보았다.// /lib/Draggable.jstype DraggableState = { dragging: boolean, dragged: boolean, x: number, y: number, slac..

목차기대하는 결과물구현 결과구현 방법기대하는 결과물이미지를 슬라이드로 무한으로 보여주도록 구현해보자. 별다른 이벤트가 필요없으니까 html과 css로 구현해보자.구현 결과결과물왼쪽에서 오른쪽으로 흐르는 무한 사진 슬라이드를 구현했다.코드 $item-width: 150px;$item-gap: 16px;$item-count: 5;$slider-width: calc($item-width * $item-count + $item-gap * ($it..