Programming/React (19) 썸네일형 리스트형 [React] React Hooks : 1. Hooks 란 무엇인가? Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org 1. Hooks란? React의 v16.8.0 [현재 v18.0.0] 등장 이후 사용할 수 있게 된 함수형 컴포넌트가 클래스형 컴포넌트의 state(상태), Lifecycle(수명 주기) 등의 기능들을 사용할 수 있도록 돕는 React의 내장 기능들을 말한다. 2. Hooks를 사용할 수 없는 상황 1) 클래스형 컴포넌트 내에서는 사용할 수 없다. 2) 내부 이벤트 핸들러 3) useMemo, useReducer 등의 같은 Hook 안에서 사용할 수 없다. 4) 일반적인 Javascript 함수 내부 최상위 레벨에서 호출해야 하며, 조건문, 루프, .. [React] string props 전달시 줄 바꿈 처리 React 프로젝트에서 간단하게 줄 바꿈 처리하는 방법. 줄바꿈 할 부분을 \n으로 전달 후 해당 string 값이 전달되는 문자 태그의 CSS에 .description { white-space: pre-line; } white-space: pre-line CSS를 추가하면 \n을 통한 줄 바꿈 가능. [React/AOS] React에서 AOS(Animate On Scroll) 라이브러리 사용하기 디자이너에게 스크롤을 내리면 스르륵 나타나는 효과를 넣어달라는 요청을 받았다. 직접 구현하려다가 좋은 라이브러리를 찾아서 이렇게. 1. 사용하게 될 라이브러리 GitHub - michalsnik/aos: Animate on scroll library Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub. github.com 2. npm/yarn의 경우에 맞춰 aos를 설치. // yarn yarn add aos // npm npm install aos --save 3. 가능한 최상단 컴포넌트에서 aos를 불러오기. import AOS from "aos"; import "aos/.. [React] ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API 오류 작업 도중 하단의 내용처럼 오류가 뜨길래 눈에 거슬려서 처리함. Before After 1. 'react-dom' 경로 'react-dom/client'로 변경 2. 기존 작성방식 변경해서 불러오기 [web3-react] Metamask/Wallet Connect 메타마스크 연결하기 Example Metamask/Wallet Connect 기능을 사용하기 위해 web3-react 라이브러리를 사용하게 되었다. 현재 v8까지 나온 모양이나 beta 버전이기에 하단의 링크에 연결된 v6버전 기준으로 작성하겠다. GitHub - NoahZinsmeister/web3-react: A simple, maximally extensible, dependency minimized framework for building modern Ethereum A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps - GitHub - NoahZinsmeister/web3-react: A simple, ma.. [React] Module not found: cant resolve <library> React 개발시 외부 라이브러리가 설치되어있지 않을 경우 많이 접하게 될 오류. 어떤 라이브러리가 설치되어있는지 알 수 없으므로 // npm의 경우 rm -rf package-lock.json rm -rf node_modules // yarn의 경우 rm -rf yarn.lock rm -rf node_modules node_modules 폴더와 package-lock.json/yarn.lock을 rm -rf로 지워준 후 // npm의 경우 npm install // yarn의 경우 yarn install 해서 필요한 라이브러리를 받아주도록 한다. [React] Resize event / 화면 가로 사이즈 변경 감지 이벤트 import { useState, useEffect } from "react"; import { debounce } from 'lodash'; const App = () => { // window width 사이즈 const [windowSize, setWindowSize] = useState(window.innerWidth); // 무한 로딩 방지하고 1초에 한번씩 사이즈 측정 const handleResize = debounce(() => { setWindowSize(window.innerWidth); }, 1000); // window width 사이즈 변경 감지 useEffect(() => { window.addEventListener('resize', handleResize); return ().. [React] React-Router-Dom V6에서 useLocation(); 불러오기 오류 React Router Dom 사용 중 현재 열린 링크의 위치를 알아내기 위해 useLocation을 사용해야 하는데, React js: Error: useLocation() may be used only in the context of a component 위의 오류가 콘솔에 뜨고 화면 전체가 날아가서 안 보이는 현상이 발생. 기존 상태 Index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); App.js import React, {.. 이전 1 2 3 다음
