Frontend/ReactJS21 [React] 합성 컴포넌트 패턴으로 모달 만들기 Introduction 토이 프로젝트 중 위와 같은 다양한 형태의 모달을 제작해야 할 상황이 생겼고, 예전부터 사용해보고 싶었던 합성 컴포넌트 패턴으로 모달을 제작해보기로 했습니다. 합성 컴포넌트 패턴(Compound Component Pattern) 이란?합성 컴포넌트 패턴은 여러 작은 컴포넌트들을 조합하여 하나의 컴포넌트를 만드는 React 디자인 패턴입니다.이 패턴을 사용하여 컴포넌트를 구현한다면 높은 재사용성을 갖습니다.또한 한 컴포넌트에 무지막지한 양의 props가 주입되는 대신 상위 컴포넌트에서 각 컴포넌트에 필요한 props만 주입할 수 있기 때문에 관심사 / 책임 분리, props drilling 방지 등의 장점을 갖습니다. 예시로는 아코디언 컴포넌트가 있습니다. 아코디언 컴포넌트는 제목,.. 2024. 6. 12. [React] useCallback vs useMemo Introduction useMemo와 useCallback의 개념에 대해서는 알고 있었지만 이 둘의 정확한 차이점은 알지 못했기에 각각 이 둘의 쓰임과 어떤 부분이 다른지 알아보려 한다. useMemo 와 useCallback useMemo와 useCallback은 모두 성능 최적화를 위해 사용되는 리액트 훅이다. 함수의 결과를 저장하여 동일한 계산을 여러번 하지 않도록 하여 더 빠르고 효율적인 로직을 구현할 수 있다. useMemo의 기본 구조 useMemo(() => fn, [deps]) 첫 번째 인자로는 함수를, 두 번째 인자로는 실행할 조건 변수를 담은 배열의 형태이다. useMemo 사용 예시 - useMemo를 사용하지 않았을 경우 const Calculation = ({ a, b }) =>.. 2023. 9. 21. [React] React-calendar Introductionreact-calendar 라이브러리의 사용법과 css custom 하는 법을 알아보려고 한다. https://www.npmjs.com/package/react-calendar react-calendarUltimate calendar for your React app.. Latest version: 4.6.0, last published: 2 months ago. Start using react-calendar in your project by running `npm i react-calendar`. There are 422 other projects in the npm registry using react-calendar.www.npmjs.com react-calendar 설치np.. 2023. 9. 17. [React] Styled-components에서 스크롤 애니메이션 구현 Introduction스크롤 y 값을 통해서 특정 스크롤 위치가 되었을 때 애니메이션을 실행하는 코드를 구현해보려고 한다. 1. React에서 스크롤 이벤트 적용하기function App() { const [scr, setScr] = useState(0) // 스크롤 높이를 나타내는 변수 // addEventListener 를 이용하여 스크롤 이벤트가 발생할 때마다 scr를 갱신 useEffect(() => { window.addEventListener('scroll', (e) => { setScr(window.scrollY); }); return () => { window.removeEventListener.. 2023. 8. 31. [React] React 반응형 웹 Introduction React에서 반응형 웹을 만드는 방법을 알아보려 한다. ① react-responsive 설치 React 라이브러리인 react-responsive를 설치하고 useMediaQuery를 import 한다. npm install react-responsive import { useMediaQuery } from 'react-responsive'; ② 컴포넌트 별로 나누기 HomePC 에는 (1024px ~), HomeMobile 에는 (~ 1024px) 의 반응형 쿼리를 만들었다. //HomePC const HomePC = () => { const isPC = useMediaQuery({ query: "(min-width:1024px)" }); return ( {isPC && ~ .. 2023. 2. 23. [React] 로그인 Refresh Token 처리 Introduction 로그인에서 활용하는 refresh token에 대해 알아보고, 서버로부터 받은 refresh token과 access token의 처리 과정을 알아보려 한다. Refresh Token이란? 기존 JWT를 이용한 방식은 보안에 취약하다. token 값만 탈취하면 충분히 악용가능하므로 이러한 단점을 보완하기 위해 refresh token이 등장하였다. access token(JWT) 만 존재했던 기존의 방식과 다르게, access token + refresh token 두 가지 토큰을 이용하여 접근 권한을 따진다. access token은 refresh token보다 짧은 유효기간을 가진다. 위 그림의 형태로 access token과 refresh token을 활용한다. 먼저 로그인을.. 2023. 2. 22. 이전 1 2 3 4 다음
