728x90 반응형 hooks6 [React] Hooks - useReducer 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useReducer에 대해 적어보는 시간을 가져보려고 합니다. useReducer란? useReducer는 hooks에서 useState와 동일하게 데이터 변화에 따른 반응성을 제공해주는 역할을 담당합니다. ※ [React] Hooks - useState 하지만 useState와의 차이점은 명확합니다. 일반적으로 리액트를 이용하여 개발하다 보면 보통 useState를 이용하여 데이터에 반응성을 제공해주고는 합니다. 여기서 만약 사용해야 되는 하위 변수값들이 많을 경우 어떻게 될까요? 예를 들어 A라는 객체에 해당되는 변수가 10개, B라는 객체에 해당되는 변수가 10개 있다면 각각의 useState들이 어떤 목적을 위한 데이터인지가 점점 헷갈리기 시작.. 2021. 9. 27. [React] Hooks - useMemo 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useMemo에 대해 적어보는 시간을 가져보려고 합니다. useMemo란? useMemo는 hooks에서 메모이제이션을 이용하여 변수 값들을 재사용함으로 써 최적화를 해주는 역할을 담당합니다. 예를 들어 컴포넌트 내부에 상황에 따라 변경되지만 자주 변경되지 않는 A라는 값이 있다고 가정해보겠습니다. 또한 컴포넌트는 리렌더링이 빈번하게 일어난다고도 가정해보겠습니다 이런 상황에서 리 렌더링이 일어날 때마다 A라는 값은 계속 동일한 값임에도 불구하고 같이 리 렌더링이 되기 때문에 다시 그려주는 작업을 수행해야 합니다. 만약 메모이제이션을 이용하여 값을 저장해 두고 있으면 어떨까요? 메모이제이션을 이용한다면 리 렌더링이 일어남에도 불구하고 단순히 저장된 값을.. 2021. 9. 22. [React] Hooks - useCallback 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useCallback에 대해 적어보는 시간을 가져보려고 합니다. useCallback이란? useCallback은 hooks에서 메모이제이션을 이용해 함수를 재사용함으로 써 최적화를 해주는 역할을 담당합니다. 예를 들어 어떤 상황에서든 항상 동일한 결과값을 제공해주는 함수(= 순수 함수)가 있다고 가정해보겠습니다. 리액트를 개발하다보면 빈번하게 리 렌더링의 상황이 발생되는데 이때 항상 동일한 결괏값을 제공해주는 함수들도 함께 리 렌더링이 이루어집니다. 이것은 다른 말로 데이터를 지웠다가 똑같은 상태의 함수를 다시 생성하는 불필요한 작업을 한다고도 말할 수 있습니다. 그리고 이런 작업들이 한 개, 두 개 점점 쌓여나가면 결국 서비스의 속도에 영향을 미칠.. 2021. 9. 15. [React] Hooks - useRef 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useRef에 대해 적어보는 시간을 가져보려고 합니다. useRef란? useRef는 hooks에서 컴포넌트의 전 생명주기 동안 객체 값을 유지해주는 역할을 담당합니다. 여기서 값을 유지해준다는 것은 말 그대로 어느곳에서라도 한번 저장된 값을 그대로 유지시켜 준다는 것입니다. 리액트를 이용하여 어느정도 개발해보신 분들이라면 useState나 또는 let을 이용한 일반 변수값을 선언한 뒤 데이터를 업데이트할 때 본인이 생각한 데이터로 업데이트가 되지 않았던 현상을 겪어보셨을 수도 있습니다. 예를 들어 setTimeout, setInterval을 사용한다거나 또는 액션함수에서 업데이트한 데이터가 업데이트되지 않고 그대로 유지되는 등의 케이스들이 있습니다... 2021. 9. 13. [React] Hooks - useState 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useState에 대해 적어보는 시간을 가져보려고 합니다. useState란? useState는 hooks에서 데이터 변화에 따른 반응성을 제공해주는 역할을 담당합니다. 여기서 말하는 반응성이라는 것은 말 그대로 화면에 사용되는 데이터가 변경될 때 변경된 데이터가 화면에 업데이트되어 보이는 것인지를 말합니다. 예를 들어 숫자 값을 증가시킨다고 할 때 반응성이 제공될 때에는 숫자를 증가할 때 마다 숫자가 증가되는 것이 실시간으로 화면에 보이게 되는 것이고, 반응성이 제공되지 않을 때에는 실제로 숫자는 증가하지만 화면에는 기존 값이 유지되어 있는 것입니다. 클래스형 컴포넌트에도 useState와 동일한 역할을 처리해주는 것이 있었습니다. 클래스형 컴포넌트.. 2021. 9. 5. [React] Hooks - useEffect 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useEffect에 대해 적어보는 시간을 가져보려고 합니다. useEffect란? useEffect는 hooks에서 컴포넌트가 마운트, 언마운트, 업데이트될 때 원하는 작업이 수행될 수 있도록 도와주는것을 담당합니다. 클래스형 컴포넌트에서 사용되는 유사한 라이프 사이클 메서드는 다음과 같이 있습니다. ComponentDidMount ComponentDidUpdate ComponentWillUnmount useEffect의 사용방법은 간단합니다. 우선 useEffect는 리액트 사용을 위해 impor해오는 'react' 패키지에서 제공해주는 기능이기 때문에 import만 해준다면 바로 가져다 사용할 수 있습니다. 그리고 vscode에서 제공해주는 use.. 2021. 9. 2. 이전 1 다음 728x90 반응형
