도리 도리

이전 글: React 18 Transition 이전 글에서 트랜지션을 활용하여 UX를 개선하는 예시를 살펴보았습니다. 리액트에서 제공했던 기본 예시는 상태관리로 useState하나만 사용했지만, 실제 어플리케이션의 경우 대부분 외부 상태 관리 도구를 사용하게 됩니다. 여기서 Transition 적용에 어려움이 발생합니다. 이 포스팅에서는 외부 상태 관리 도구와 Transition을 함께 사용하려 할 때에 발생하는 문제점과 해결방안에 대해 공유하려합니다. 외부 상태 관리자의 도입 배경 React에서는 상태관리를 위해 기본적으로 useState, useContext 등을 제공합니다. 하지만 어플리케이션의 크기가 커지고 복잡도가 높아지게되면서 상태 관리를 위해 외부 스토어를 사용하는 경우가 많습니다. 예를 들..

React 18의 새로운 기능: Transition으로 사용자 경험 향상시키기 React 18은 다양한 새로운 기능과 개선 사항을 도입하면서, 특히 'Transition'이라는 개념을 통해 사용자 인터페이스의 반응성을 크게 향상시켰습니다. 이 기능은 React 애플리케이션의 상호작용을 더욱 부드럽고 자연스럽게 만들어, 사용자 경험을 개선하는 데 중점을 두고 있습니다. Transition Transition은 React 18에서 도입된 개념으로, "긴급하지 않은 상태 업데이트"입니다. 이를 통해 React는 중요한 업데이트에 우선순위를 두고, 사용자와의 상호작용을 방해하지 않으면서 백그라운드에서 상태 업데이트를 수행할 수 있습니다. 왜 Transition이 필요한가? Transition의 필요성: Reac..

todo 삭제 및 편집 todoItem 템플릿 {{todo.message}} 편집 X 템플릿은 간단하다. 체크박스가 있고, 메시지가 보인다. 뒤에는 편집과 삭제 버튼이 있다. 이 버튼들을 누를 때 기능들을 추가해볼 것이다. @click.stop 편집/삭제 버튼을 만들면서 v-on:click.stop을 사용했다. .stop을 붙이면 이벤트의 propagation이 중지된다. 즉, 편집버튼을 클릭한다고 해보자. 따로 캡쳐링 단계에서 이벤트를 리스닝하는 리스너는 없으므로, 버블링 단계에서 가장 먼저 이벤트 핸들러 onClickEdit이 호출된다. .stop이 없다면 그 후 버블링이 진행되어 상위 컴포넌트인 li에서 onClickItem이 호출된다. 하지만 .stop을 통해 이벤트 propagation을 중지 ..

이미지 출처 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 6장 요약 객체 지향 프로그래밍 ECMA 에는 클래스 개념이 없다. 객체란 그저 특별한 순서가 없는 값의 배열이다. 객체: `프로퍼티의 순서 없는 컬렉션이며 각 프로퍼티는 원시값이나 객체, 함수를 포함한다. 6.1 객체의 이해와 생성 같은 인터페이스의 객체를 여러개 만들 때, 중복을 줄이기 위해 팩토리패턴을 사용하기 시작했다. 팩토리 패턴 특정 객체를 생성하는 과정을 추상화. function createPerson(name) { var o = new Object(); o.name = name; o.sayName = function(){ console.log(this.name); } return o; } var person1 = createPer..