리액트 전역상태관리 라이브러리 Redux를 알아보고 사용해보자 리액트를 사용하면서 위와 같은 수많은 Props를 하위컴포넌트로 전달해야하는 경우를 경험했을 것입니다. 간단히 만든 제 리따배 프로젝트에도 많이 볼 수 있는 상황인데요. 제가 진행하는 프로 blog.doyeonism.com 위 글에서 우리는 Redux의 상태관리에 대해 알아보았습니다. If you are writing any Redux logic today, you should be using Redux Toolkit to write that code! RTK includes utilities that help simplify many common use cases, including store setup, creating reducers a..
리액트를 사용하려면 useEffect라는 훅에 대해 꼭 알아야합니다. useEffect 훅이란? - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. 즉, 렌더링될 때 특정작업을 실행시키고 싶을 때 useEffect를 사용하는데요. 대표적인 예로는 렌더링될 때 api호출을 다시해야하는 경우가 있겠습니다. 선언방법은 다음과 같습니다. 첫번째 인자는 ()=>{}로 보이는 콜백 함수이며, 두번째 인자는 배열입니다. 배열안엔 보통 변견되는 상태(useState)값을 넣으며 그 값이 변할 경우 콜백함수에 있는 기능을 실행하게 됩니다. 위 사진처럼 빈칸일 경우 처음 렌더링되는 경우만 콜백함수안의 기능을 실행하게 됩니다. 말로 설명하면 헷갈리니 코드로 보여드리겠습니다. 다음과 같이 코드를 작..
useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 정의는 위와 같습니다. 저번글에서 우리는 useState를 통해 리렌더링이된다는 사실을 확인했고 왜 그런지도 알아봤습니다. 하지만 개발을 하다보면 렌더링을 막아야하는 경우도 생기게 됩니다. 그럴 때 사용하는 것이 useRef인데요. useRef안의 값은 수정을 해도 렌더링이 되지 않습니다. React에서 Component가 unmount될 때의 state를 딱 한번만 log를 찍고 싶을 경우 어떻게 해야할까요? input값을 useState로 저장하는데 글자를 적을 때마다 렌더링이 된다. 이걸 막으려면 어떻게 해야하나요? useRef를 알고 있다면 위 질문에 답을 할 수 있습니다. useRef를 console로 찍어..
event bubbling이 무엇이고 어떻게 사용해야할까? 안녕하세요 이번 글에선 이벤트 버블링에 대해 알아보겠습니다. 이벤트버블링을 모를 경우 발생하는 예기치못한 이벤트를 살펴보고 어떻게 해결해야 하는지도 확인해보도록 하겠습니다. 이벤 blog.doyeonism.com 저번 글에서 우리는 자바스크립트에서 이벤트 버블링에 대해 알아봤습니다. 이벤트 버블링은 브라우저가 이벤트를 감지하는 방법에 의해 생긴 기능이며 이 기능을 이용해 하나의 eventListener로 여러 태그에 이벤트를 줄 수 있다는 것을 확인했습니다. 이번 글에선 자바스크립트의 프레임워크인 리액트에서 어떻게 이벤트 버블링을 사용하는지 알아보겠습니다. 1. 하나의 클릭 이벤트를 이용해 여러 태그에 이벤트 주기 import { useState..
