React

풀스택과 관련된 어떤 강의를 시청하면서 custom hook을 생성하여 IntersectionObserver() 생성자와 함께 사용하여 50개 이상의 메세지 컨텐츠 데이터들을 특정 개수 단위로 잘라서 스크롤을 내릴 때마다 호출되도록 하는 일명 무한 스크롤(Infini

서론 React 프레임워크 기반으로 프론트엔드 개발을 한 지 어느덧 2년이 조금 넘어가면서 그동안 React에 대해 얼마나 제대로 잘 알고 있는지 회고를 해본 결과, 막상 명확하게 설명할 수 있는 부분이 많이 없는 것 같았다. 그래서 더 늦기 전에 공식 문서를 기반

서론 JSX는 자바스크립트 파일에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 자바스크립트용 구문 확장 형식이라고 한다. 본론 🔎 React가 마크업과 렌더링 로직을 혼합하는 이유 🔎 JSX와 HTML의 차이점 JSX는 HTML과 매우 비슷해보이지만

최근에 사내에서 클래스형으로 작성되어 있는 레거시 코드들을 컴포넌트형으로 변환하면서 전반적인 부분을 리팩터링 및 성능 개선을 진행하고 있다.그 중에서 클래스형 컴포넌트에 다음과 같이 작성된 부분이 많았다.(getFilteredData() : 특정 검색 필터가 업데이트

서론 🎯 이벤트 핸들러를 작성하는 다양한 방법 🎯 상위 구성 요소에서 이벤트 처리 논리를 전달하는 방법 🎯 이벤트 전파 방법 및 중지 방법 본론 이벤트 핸들러를 작성하는 다양한 방법들 1. 핸들러 함수를 별도로 선언하기 2. JSX에 인라인 형식으로 선언

서론 리액트 컴포넌트에서 유저와의 상호작용으로 인해 데이터들이 업데이트 되어야하는 경우가 많다. 예를 들어, 사진들을 볼 수 있는 갤러리 페이지에서 다음 버튼 클릭 시, 페이지 index를 다음 페이지 index로 업데이트하여 페이지 UI를 변경하거나 사용자가 구

서론

React 를 사용해 본 사람들은 대개 공감 할만한 몇 가지 상황들이 있는데, 대표적으로 다음과 같은 경우가 있다.이벤트 핸들러 함수를 통해 state 를 업데이트하는 로직에서 2개 이상의 setState() 를 호출하면 1개의 setState() 만 호출 되는 경우이