당연한 개발자가 되자

Rendering을 최적화하기 위해서 반드시 알아야하는 것 기본적으로 React는 부모 Component에 있는 ‘state’가 state 변경함수에 의해서 변경되었다면 헤당 ‘state’를 사용하는 자식 Component는 물론이고 사용하지 않는 자식 Component까지도 전부 re-rendering된다는 사실을 반드시 숙지해야합니다. (re-rendering 된다는 것은 해당 Component에 있는 모든 함수, 변수, HTML 태그들이 다시 생성된다는 의미이기도 합니다.) re-rendering이 발생했을 때 ‘props’가 변경되었는지 매번 검사해서 변경되었을 때만 re-rendering 해주는 ‘memo()’라는 함수는 ‘props’에 대하여 얕은 비교( ‘=== or !==’ )를 합니다. ..

Rendering 성능을 향상시키는 방법은? Rendering은 React의 동작 방식에서 일반적으로 예상할 수 있는 부분이지만, rendering 작업이 때때로 낭비가 될 수 있다는 것도 사실입니다. 만약 Component의 rendering 출력이 변경되지 않았고, DOM이 해당 부분을 업데이트할 필요가가 없다면 해당 Component를 rendering 시키는 것은 시간낭비이고, 더 나아가서 애플리케이션의 성능에도 영향을 주기 때문에 사용자에게 나쁜 사용자 경험을 주게 될 수도 있습니다. React Component rendering 결과물은 항상 현재 props와 state의 상태를 기반으로 결정되어야 합니다. 따라서 props와 state가 변경되지 않았음을 미리 알고 있다면 rendering ..

❓Rendering(렌더링)이란 무엇인가? React에서 Rendering이란 Component가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 Component에게 요청하는 작업을 의미합니다. ⚙️Rendering의 프로세스는? Rendering이 일어나는 동안 React는 Component의 루트에서 시작해서 아래쪽으로 쭉 코드를 보면서 업데이트가 필요하다는 flag가 지정되어있는 component를 찾습니다. 만약 업데이트가 필요하다는 flag를 만난다면 Class Component의 경우에는 'classComponentInstance.render()'를 호출하고, Function Component의 경우에는 'FunctionComponent()'를 호출하고, Renderin..

Scroll Event(Feat. throttle) 기존에는 Scroll Event를 사용해서 구현했었지만 여러가지 문제들이 많아서 권장하지 않습니다. Intersection Observer API(권장) (Feat. React-query) Intersection Observer API 사용법 https://shin96bc.tistory.com/213 무한 스크롤 구현 예시 저는 여러 페이지에서 무한 스크롤을 사용하기 위해서 custom hook으로 분리했습니다. useIntersectionObserver.ts import {useCallback, useEffect, useRef} from "react"; // [Intersection Observer API custom hook] // observer를..

이벤트 핸들러의 동작방식 EventHandlerTest.js export default function EventHandlerTest() { const onChange = e => { console.log(e.target.value); }; return ; } onChange같은 이벤트는 값이 변경될 때마다 발생합니다. 즉 키보드를 한번 누를때마다 “H”, “He”, “Hel”, “Hell”, “Hello” 같이 불필요한 이벤트가 실행됩니다. 이렇게 연속으로 이벤트가 발생하면 Application의 성능이 저하될 수 있습니다. 그래서 이런 이벤트를 다루는 두가지 방법을 알아보겠습니다. Debounce Debounce란 특정 이벤트가 발생할 때 작동하는 핸들러가 과도하게 작동하는 것을 방지하기 위해 연이어..

개요 과거에 교차 감지를 구현하려면 ‘getBoundingClientRect()’ 함수를 사용하여 영향을 받는 모든 요소에 필요한 정보를 구축하는 메서드를 호출하는 이벤트 핸들러 및 루프가 필요했습니다. 그러나 이 모든 코드는 메인 스레드에서 실행되기 때문에 메인 스레드에 과부화가 걸려서 웹 사이트의 성능 자체가 현저히 떨어지는 일들이 많이 발생했습니다. 그런 성능저하 문제를 해결하기 위해서 등장한 것이 Intersection Oberver API입니다. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Intersection Observer API 기본지식 Intersection Observer API란 타켓 요소와 상..

원인 이 문제는 ESLint 8.23에 도입된 변경 사항으로 발생합니다. 해결법 ESLint를 다운그레이드 합니다. npm install eslint@8.22.0 --save-exact

발생하는 이유 해당 에러가 발생하는 이유는 jsx에서 map을 이용해서 태그를 생성 하는 경우와 같이 형제관계에서 같은 태그가 여러개 존재할 때 발생하는 Warning 입니다. 해결방법 해결방법은 아래와 같이 map 안쪽에서 반복되는 태그중 가장 상위 태그에 고유한 key값을 전달하면 됩니다. 여기서 보통 map 함수의 두번째 인자값으로 들어오는 index를 key값으로 많이 사용하는데, 사실 React에서는 index를 key값으로 사용하는 것을 지양하고 있습니다. index 이외에 고유한 값을 사용하는게 좋습니다. const App = () => { const list = [ {id: 1, name: 'A'}, {id: 2, name: 'B'}, {id: 3, name: 'C'} ]; return (..

프로세스 Routes를 하나만 두고 private Routes에만 Guard를 감싸고 Guard에서 로그인 여부를 체크해서 로그인 상태가 아닌 경우에 로그인 페이지로 redirect 하는 방법입니다. 권한별로 가드를 만드는 방법입니다. 권한이 3가지인 경우에는 권한마다 가드를 만들어서 해당 페이지를 감싸주면 됩니다. 권한이 없으면 redirect 시킵니다. 만약 권한이 많고 복잡해서 1, 2, 3, 4중에 1,2만 해당 페이지에 접근하게 만들고 싶다면 권한 1, 2를 체크하는 가드를 하나 더 만들면 됩니다. 코드 작성법 폴더 구조 /guard LoginGuard.js import { useNavigate } from "react-router-dom"; import { useSelector } from "..

프로세스 private routes와 public routes를 나누어서 로그인 여부에 따라 routes를 바꿔주는 방법입니다. 권한별로 routes를 만드는 구조입니다. 만약에 권한이 3가지인 경우에는 admin, user, public 등으로 나누어 줍니다. 만약 권한이 많고 복잡해서 1, 2, 3, 4중에 1,2만 해당 페이지에 접근하게 만들고 싶다면 해당 페이지들만 또 다른 Routes로 분리하면 됩니다. 코드 작성법 폴더 구조 /routes/private AdminRoutes.js import CommonLayout from "../../../layout/CommonLayout"; import UserList from "../../../pages/user/UserList"; const Admin..