프레임워크/React27 [React] useCallback useCallback도 useMemo와 마찬가지로 메모 이제이 션 기법을 사용하여 컴포넌트의 성능 최적화 해주는 React Hook입니다. 메모지 에이션이란? 이전에 이미 계산한 값을 캐싱해둠으로써 해당 값이 필요할 때마다 반복적으로 계산하는 게 아니라 메모리에서 꺼내서 재사용하는 최적화 기법을 말합니다. useMemo란? 첫 번째 인자로 들어온 Callback 함수에서 return 하는 값을 메모 이제이 션 해두었다가 재사용 하는 기법입니다. useCallback이란? useMemo와 마찬가지고 첫번째 인자로 들어온 Callback 함수를 재사용 하지만, useMemo와 다르게 callback 함수 자체를 메모이제이션 해두었다가 재사용하는 기법입니다. React에서 함수형 컴포넌트는 함수 자체이기 때문.. 2022. 2. 18. [React] useMemo 컴포넌트 최적화를 위해 사용되는 대표적인 Hook에는 useMemo와 useCallback이 있습니다. [ useMemo란? ] useMemo에서 memo란 Momoization(메모이제이션)을 뜻합니다. 메모이제이션은 동일한 값을 return 하는 함수를 반복적으로 호출 해야 한다면 맨 처음 값을 계산 할 때 해당 값을 메모리에 저장 해서 필요할 때마다 또다시 계산하지 않고 메모리에서 꺼내서 재사용하는 기법을 말합니다. 즉, 자주 사용하는(필요한) 값을 맨 처음 계산 할 때 캐싱을 해두고 값이 필요할 때마다 다시 계산을 하는 게 아니라 캐시에서 꺼내서 사용한다는 것입니다. 이때 함수형 컴포넌트는 말 그대로 함수라는 사실을 기억 해야 합니다! 함수형 컴포넌트가 렌더링이 된다는 건 그 함수가 호출 된다는 .. 2022. 1. 31. [React] useEffect [ 개념 ] 어떠한 컴포넌트가 마운트 되었을 떄, 업데이트 될 때, 언마운트 되었을 때 특정 작업을 처리 할 코드를 실행할 때 useEffect를 사용합니다. 기본적으로 useEffect Hook은 인자로 콜백 함수를 받습니다. (콜백 함수란? 다른 함수의 인자로 전달된 함수를 말합니다.) useEffect는 아래와 같이 두가지 형태만 알고 있으면 됩니다. 첫번째 형태는 useEffect의 인자로 하나의 콜백 함수만 받는 형태이고 두번째 형태는 useEffect의 첫번째 인자로 콜백 함수, 두번째 인자로는 배열(dependency array)를 받는 형태 입니다. 첫번째 형태를 사용할 경우 컴포넌트가 렌더링 될 때마다 콜백 함수가 실행 됩니다. 두번째 형태는 매번 렌더링 될 때마다 실행 되는 것이 아니라.. 2022. 1. 29. [React] useState React에서 함수형 컴포넌트로 개발 한다면 React Hooks이라는 매우 편리한 기능을 사용 할 수 있습니다. 이번에는 React Hooks 중에서도 가장 기본적인 useState에 대해 정리 해보겠습니다. [ 개념] React에서 state라는 건 무엇일까요? state란 컴포넌트가 가질 수 있는 상태를 의미합니다. 예를 들어 Watch라는 컴포넌트가 있다면 state로는 time을 가지고 있을 것입니다. useState는 컴포넌트의 상태를 간편하게 생성하고, 업데이트 할 수 있는 도구를 제공 해줍니다. state에 생성과 동시에 가져야 하는 초기값을 useState 함수의 인자로 넣어주면 state와 setState라는 두 가지 요소를 배열 형태로 return 해줍니다. (초기값이 없으면 null.. 2022. 1. 29. [React] useContext + Context API [ Context란? ] React로 만든 앱은 여러개의 컴포넌트로써 최상위 APP 컴포넌트로 부터 시작되어 트리 형태로 이루어져 있습니다. 일반적인 데이터 흐름은 위에서 아래로 진행 됩니다. 즉, 부모에서 자식으로 props를 전달 해주는 흐름입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨 줄 때는 아래와 같은 형식으로 일일이 넘겨 주어야 합니다. 컴포넌트도 많고, 트리도 깊은 상태에서 전역으로 쓰는 데이터가 있을 경우 일일이 단계별로 전달 해야 한다면 Prop Drilling이 발생 할 수 있습니다. 이런 문제를 해결 하기 위해서 React는 Context API를 제공 해줍니다. Context는 앱 안에서 전역적으로 사용되는 데이터들을 여러 컴포넌트들 끼리 쉽게 공유 할 수 있는 방법을 제.. 2022. 1. 26. [React] useRef - DOM 요소 접근 [ 개념 ] useRef()를 호출하면 ref 객체를 반환합니다. 이를 접근 하고자 하는 요소 태그에 ref 속성으로 넣어주면 원하는 태그에 언제든지 접근 할 수 있습니다. 예를 들어 text box와 같은 input 요소에 focus를 줄 때 사용 할 수 있습니다. 로그인 페이지에 접근 했을 때 ref를 사용하여 input 태그에 focus를 설정 해주면 사용자가 클릭 할 필요가 없어지기 때문에 편리 하겠죠?? ref를 사용하면 손쉽게 DOM 요소에 접근 할 수 있습니다. (바닐라 JS의 document.querySeletor()와 같은 역할을 합니다.) [ 실습 ] function App() { const inputRef = useRef(); useEffect(() => { inputRef.curre.. 2022. 1. 25. [React] useRef - 변수 관리 [ 개념 ] 함수형 컴포넌트에서 useRef()를 호출하면 ref를 반환 해줍니다. ref 객체는 언제든 지 수정 할 수 있습니다. 반환된 ref는 컴포넌트의 전 생의 주기를 통해 유지가 됩니다. 즉, 컴포넌트가 계속 리렌더링이 되어도 언마운드 되기 전까지는 값을 유지 합니다. [ useRef는 언제 사용 될까요?? ] 첫번째 - 저장공간 ref는 state와 비슷하게 어떠한 값을 저장하는 저장 공간으로 사용됩니다. 함수형 컴포넌트는 함수이기 때문에 렌더링이 일어나면 함수를 다시 불러 옵니다. 그 때문에 안에 있는 변수들이나 함수들이 다시 불러와 져서 초기화가 됩니다. 두번째 - DOM 요소에 접근 ref를 통해 실제적으로 DOM 요소에 접근해서 여러가지 일을 할 수 있습니다. 예를 들어 input 태그.. 2022. 1. 25. [React] 렌더링 최적화 Hook - useRef JavaScript에서 특정 DOM을 선택해야 할 때는 DOM selector를 사용하고, React에서도 특정 요소의 크기를 가져오거나 focus를 설정할 때 특정 DOM을 선택해야 하는 상황이 있습니다. 이럴 때, React 함수형 컴포넌트에서는 React Hook 중 하나인 useRef() 함수를 사용합니다. 클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef() 함수를 사용합니다. [ Ref란 무엇인가 ] reference의 줄임말로, DOM을 직접 참조하기 위해 사용합니다. 클래스형 컴포넌트에서는 createRef, 함수형 컴포넌트에서는 useRef를 사용하는 데 둘의 동작 방식은 동일하다. HTML에서 id를 사용해서 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서.. 2022. 1. 20. [React] 렌더링 최적화 Hook - useCallback, useMemo Clean Coding에 대한 책을 읽고, 정리를 하다 보니 useState, useEffect만으로는 성능 최적화나 클린한 코드가 되지 않는구나를 뼈저리게 느끼게 되었고 찾아보니 성능 최적화를 위한 Hook이기 때문에 필수적으로 사용 할 필요는 없지만. 필수가 아니라는 이유 만으로 해당 기술의 장단점을 파악하지 않고, 넘어가는 건 좋지 못한 것 같아 정리를 하게 되었다! 이제는 사용해보자 useMemo & useCallback - 이화랑 블로그 이제는 사용해보자 useMemo & useCallback 이제 useState와 useEffect에 완전히 익숙해졌다고 느꼈는데, 컴포넌트 내에서 저 두 개의 hook 만으로도 props나 state를 다루는 로직에 관련된 기본적인 기능을 모두 leehwaran.. 2022. 1. 18. 이전 1 2 3 다음 728x90
