react 15

[React] useCallback 사용한 성능 최적화

useCallback React Hooks 중 하나로서 useMemo와 같이 Memoization 기법으로 컴포넌트 성능을 최적화시키는 방법이다. useMemo나 memoization을 모른다면 아래의 링크를 통해 꼭 보고 오자! [React] Memoization과 useMemo 사용법 useMemo React Hooks 중에 하나로서 컴포넌트 성능 최적화를 위해 사용한다. 성능 최적화를 위해 사용하는 Hooks에는 useCallback도 있다. [React] useCallback 사용한 성능 최적화 useCallback React Hooks 중 하나로서 mi-dairy.tistory.com useCallback는 첫 번째 인자로 들어간 "콜백함수 그 자체"를 memoization 한다. 즉 콜백함수를..

[React] Memoization과 useMemo 사용법

useMemo React Hooks 중에 하나로서 컴포넌트 성능 최적화를 위해 사용한다. 성능 최적화를 위해 사용하는 Hooks에는 useCallback도 있다. [React] useCallback 사용한 성능 최적화 useCallback React Hooks 중 하나로서 useMemo와 같이 Memoization 기법으로 컴포넌트 성능을 최적화시키는 방법이다. useMemo나 memoization을 모른다면 아래의 링크를 통해 꼭 보고 오자! [React] 성능 최적화를 위 mi-dairy.tistory.com useMemo에서 Memo는 Memoization을 뜻하는데 이때 Memoization이란 동일한 값을 리턴하는 코드를 반복적으로 호출해야 할 때 제일 처음 호출했을 때 해당 값을 메모리에 저장..

[React] useRef를 통해 DOM요소에 직접 접근하기

useRef의 변수 관리 저장공간으로써 사용하는 방법은 아래의 링크를 통해서 보면 된다. [React] useRef는 언제 왜 사용할까? useRef useRef는 함수형 컴포넌트 내에서 사용하며 React Hooks 중에 하나이다. 사용법 useRef를 사용하기 위해선 먼저 다음과 같이 import를 해주어야 useRef 사용이 가능하다. import { useRef } from 'react'; 이렇 mi-dairy.tistory.com 이번에는 useRef를 통해 DOM 요소에 직접 접근하는 방법을 알아볼 것이다. 사용법 const ref = useRef(value); 위의 코드를 통해 ref에는 객체가 반환되게 되는데 그때 반환된 객체를 다음과 같이 태그의 ref 속성으로 넣어주기만 하면 우리는 쉽..

[React] useRef는 언제 왜 사용할까? 무한루프 해결방법

useRef useRef는 함수형 컴포넌트 내에서 사용하며 React Hooks 중에 하나이다. 사용법 useRef를 사용하기 위해선 먼저 다음과 같이 import를 해주어야 useRef 사용이 가능하다. import { useRef } from 'react'; 이렇게 import 된 useRef는 코드에서 다음과 같이 사용된다. const ref = useRef(value); 이때 ref 에는 객체가 반환되게 되는데 그때 반환된 객체는 다음과 같이 생겼다. { current: value } 다음과 같이 useRef의 인자로 넣어준 초기값은 ref 객체 내의 current에 저장되게 된다. 또한 ref 객체는 언제든지 수정이 가능하여 원하는 값으로 바꿔줄 수 있다. const ref = useRef("v..

[JavaScript] Redux 사용법

1. Redux란?Redux는 JavaScript 상태 관리 라이브러리라 JavaScript든 React든 잘 어울린다. 1.1 초기 설정JavaScript에서 Redux를 사용하려면 따로 설정할 게 없다.React에서 Redux를 사용하려면 index.js에 App.js를 Provider 컴포넌트로 감싸 앱의 다른 컴포넌트에서 store를 사용할 수 있도록 해야한다.import { Provider } from "react-redux";import store from "./store"; // state가 저장되어 있는 store 파일 위치ReactDOM.render( , document.getElementById("root")); 1.2 메소드useSelector() : state 데이터 ..