본문 바로가기

Frontend146

Framer Motion 시작하기 Documentation | Framer for Developers Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com Framer Motion은 React에서 애니메이션과 상호작용을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 위의 사이트에서 다양한 예제를 확인할 수 있다.  Framer Motion 시작하기 Framer motion을 사용하기 위해서 우선 설치가 필요하다.npm install framer-motion --save 1. framer-motion 에서 motion을 받아온다.import { motion } from "fra.. 2024. 9. 24.
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://blog.kakaocdn.net/dna/dnf8m5/hyXaIPpCeZ/AAAAAAAAAAAAAAAAAAAAAJ7j3zo4LtDylkQ0aO4EY9KLcIDm-ykOx4WX_4RaoZP1/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1761922799&allow_ip=&allow_referer=&signature=Shmn%2FFazuJDBKJuRnIjQ4br%2FzdU%3D 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.

티스토리툴바