본문 바로가기

Frontend145

React-router-dom(리액트 라우터)에 대해서 알아보자 Home v6.26.2 | React Router Home v6.26.2 | React Router reactrouter.com React는 SPA(single page application)로서 페이지 이동 시 기존 컴포넌트를 제거하고 새로운 컴포넌트를 렌더링하는 방식으로 작동하며, 그에 맞춰 브라우저 경로를 변경한다. 이러한 방식을 통해 전체 페이지를 새로 고치지 않고 동적으로 페이지를 변경할 수 있다. React는 프레임워크가 아니라 라이브러리이므로 내장 라우팅(URL의 경로와 쿼리를 파악해 해당하는 컴포넌트를 렌더링하는 과정)을 지원하지 않는다.  페이지 간의 이동을 위하여 react-router-dom과 같은 외부 라이브러리를 사용하여 해당 기능을 사용할 수 있다.  React-Router-Do.. 2024. 9. 24.
React : forwardRef에 대해서 자식 컴포넌트에서 부모 컴포넌트의 메서드나 속성 등에 접근해야할 때는 props를 사용했었다. 그 반대의 경우, 즉 부모 컴포넌트가 자식 컴포넌트의 메서드나 속성에 접근해야할 때 사용하는 것이 forwardRef이다. forwardRef와 useImperativeHandle의 경우 무분별하게 사용하면 성능이 떨어진다는 단점이 있다. const 컴포넌트명 = forwardRef((props, ref) => {(렌더링 할 요소)})- props : 부모 컴포넌트가 전달한 메서드나 속성 등- ref : 부모 컴포넌트가 전달한 ref 속성useImperativeHandle(ref, () => ({부모컴포넌트에 전달할 값}))useImperativeHandle은 ref를 통해서 부모 컴포넌트에 어떤 값을 전달할지.. 2024. 9. 15.
React : custom hook(커스텀 훅)을 사용해보자 리액트 훅은 useState, useEffect 등과 같이 상태 관리 및 사이드 이펙트(코드가 의도한 주된 효과 외에 추가적으로 발생하는 부수 효과) 등의 처리를 함수형 컴포넌트에서 간단하게 수행할 수 있도록 도와주는 함수이다. 이러한 훅들을 이용해 반복되는 로직을 하나의 훅으로 구현할 수 있는데, 이를 커스텀 훅이라 한다.  커스텀 훅의 사용 방식은 마치 Redux로 앱 상태 관리자를 따로 두면서 필요한 컴포넌트에 action과 state를 연결하는 방식과 유사하다. 이런 점을 통해 커스텀 훅으로 Redux가 없지만 Redux와 비슷한 방식으로 컴포넌트 간의 상태를 효율적으로 관리할 수 있다.  1. state를 관리하기 위해서 action.js, reducer.js, useStore.jsx 파일을 생.. 2024. 9. 10.
React : Redux에 대해서 알아보자 Redux 시작하기 | Redux 시작하기: Redux를 배우고 사용하기 위한 자료" data-og-host="ko.redux.js.org" data-og-source-url="https://ko.redux.js.org/introduction/getting-started/" data-og-url="https://ko.redux.js.org/introduction/getting-started" data-og-image="https://scrap.kakaocdn.net/dn/dnf8m5/hyXaIPpCeZ/J1z2U89dHKnWQLDdwgA6tk/img.png?width=1200&height=600&face=0_0_1200_600,https://scrap.kakaocdn.net/dn/cYeHCx/hyXaHb.. 2024. 9. 9.
React : Context API에 대해서 알아보자 Props의 경우 상위에서 하위 컴포넌트로 전달하고자 할 때, 전달하고자 하는 하위 컴포넌트까지 계속해서 전달해야 하는 상황(props drilling)이 발생한다. Context API는 이런 상황을 방지하고, 컴포넌트 트리 내에서 전역적으로 데이터를 공유하게 하는 기능을 제공한다. const context명 = createContext(); const 변수명 = useContext(context명); Context API 사용하지 않았을 때Context API를 사용하지 않으면 Inner.jsx에서 해당 state를 사용하기 위해서는 Comp1.jsx에서 Outer.jsx로 props를 통해 전달하고, 이후 Outer.jsx에서 Inner.jsx로 props를 통해서 전달해야 한다(props dril.. 2024. 9. 6.
React: Memo & useMemo & useCallback을 통한 성능개선 MemoReact에서는 컴포넌트의 state가 변경될 경우, 해당 컴포넌트가 리렌더링 된다. 부모 컴포넌트가 렌더링이 되면 자식 컴포넌트도 렌더링이 되면서 불필요한 렌더링이 발생한다. Memo를 사용하게 되면, 이와 같은 불필요한 렌더링을 방지하는데 도움이 되어 성능을 개선시킬 수 있다. 그러나 자주 변경되는 props에 대해 memo를 사용하게 되면 memorization( 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거해 빠른 처리를 가능하게 하는 기술 ) 과정에서 리소스가 발생하기 때문에 오히려 성능이 저하될 수 있다.const 컴포넌트명 = memo(() => { return () }); // Outer.jsximport { useState } from "react";import Inner .. 2024. 9. 6.

티스토리툴바