React
-
react-currency-format 라이브러리 활용하기React 2022. 6. 30. 00:06
카드 결제를 위해 카드 번호를 입력할 때 우리는 빈칸에 그냥 숫자만 입력하는데 위 그림과 같이 자동으로 4글자 단위로 띄어쓰기가 되는 경우가 있습니다. 다른 예로는 쇼핑몰 사이트에서 5000원의 상품을 데이터로 받으면 장바구니에서는 이를 합계에 포함시킬 수도 있고, 또는 5000원이라는 value를 활용하여 다른 형태의 컴포넌트로 나타내고 싶을 수도 있습니다. 이 때 react-currency-format 이라는 라이브러리를 사용하면 구현이 편리합니다. 터미널에 아래 코드를 입력하면 설치할 수 있습니다. (버전 문제로 설치가 안될 경우 npm 강제설치를 하면 된다고 한다.) npm install react-currency-format 설치가 끝나면 작성하고 있는 코드 맨 윗줄에 라이브러리를 import ..
-
Could Not resolve dependency tree 에러React 2022. 6. 29. 10:53
문제의 원인은 React의 버전이 높아서 설치하려는 라이브러리가 따라가지 못하여 발생한 것이다. 에러코드에서 17.0.0으로 안내를 해주고 있기 떄문에 해당 버전에 맞게 다운그레이드 해주면 된다. npm install react@^17.0.1 react-dom@17.0.1 --legacy-peer-deps --lagacy-peear-deps 는 기존 버전을 다 무시하고 일단 설치하는 명령어이다. react와 react-dom은 서로 의존적인 관계라 하나를 낮추게 될 경우 다른 하나랑 안맞아서 설치가 안되기 때문에 반드시 강제로 설치를 해줘야한다. 다운그레이드로 설치를 하고 npm start로 렌더링을 해보면 다음과 같은 오류가 나타난다. Compiled with problems:X ERROR in ./s..
-
리액트 Hooks) useCallbackReact 2022. 6. 17. 15:44
함수 컴포넌트는 함수다. 함수 컴포넌트는 상태변화시 다시 렌더링이 된다. 렌더링시, 함수 내부 변수는 초기화가 된다. 그리고 함수는 객체다. 초기화가 된다는건 새로운 객체가 다시 만들어지고, 메모리 주소도 새로 생성 된다. 대부분의 경우 이러한 방식은 문제없지만, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해 주는 것이 좋다. 예제 1) import { useEffect, useState } from "react"; function App() { const [number, setNumber] = useState(0); const someFunction = () => { console.log(`someFunc: number: ${number}`); }; u..
-
리액트 Hooks) useRefReact 2022. 6. 17. 14:08
useRef가 유용한 두 가지 상황 1) 저장공간 State가 변하게 되면 렌더링이 되고 컴포넌트 내부 변수들이 초기화가 된다. 하지만 Ref가 변하면 렌더링이 되지 않고 따라서 변수들의 값이 유지된다( 불필요한 렌더링을 막을 수 있음). 또한 State의 변화로 렌더링이 된다 하더라도 Ref의 값은 유지된다. 2) DOM 요소에 접근 ex) Input 을 클릭하지 않아도 focus() 를 주고 싶을 때, 로그인 화면이 주어졌을 때 클릭하지 않아도 자동으로 focus()가 가게끔 할 때 예시 1) 버튼을 누르면 카운트가 증가하고 렌더링이 될 때마다 콘솔을 출력해보자. import { useEffect, useState } from "react"; function App() { const [count, s..
-
리액트 Hooks) useMemoReact 2022. 6. 17. 11:39
다음 코드를 보자. function calculate() { return 10; } function Component() { const value = calculate(); return {value}; } 함수형 컴포넌트가 렌더링 된다는 말은 그 함수가 호출된다는 말이다. 함수가 호출될 때마다 내부의 모든 변수들이 초기화 된다. 위 코드의 calculate()는 컴포넌트가 렌더링이 될 때마다 호출될 것이고, 무의미한 계산을 하는 반복적인 일이기 때문에 상당히 비효율적이다. 이때 useMemo를 사용하여 Memoization을 해주면 이런 상황을 간편하게 해결할 수 있다. useMemo의 구조 const value = useMemo(() => { return calculate(); }, [item]); 첫..