왕가's history

useCallback & useMemo 언제 사용해야 될까? 두 개의 hook에 대해서 다시 한번 다뤄보려고 합니다. 두 hook은 메모이제이션 되니깐 함수나 결과값이 있는 거에 전부 사용하면 좋지 않을까??라는 생각을 할 수 있을 것입니다. 그런 생각에 성능 좋아지겠지 하고 사용하다 보면 되려 성능저하가 될 수 있습니다. 왜냐면 결국 메모이제이션하는데에도 그만한 비용이 들기 때문입니다. 그렇기에 언제 쓰고, 언제 쓰면안좋은지에 대해 작성하려고 합니다. ❌사용하지 말아야 하는 경우 복잡하지 않은 연산에 사용하는것은 오히려 메모리 낭비입니다. onClick이벤트로 setState해주는 경우 같이 단순한 상황이라면, 리렌더링 된다고 하더라고 다시 그려주는 편히 훨씬 낫다고 볼 수 있습니다. React에서도 ..

CustomHook 개발하다 보면 같은 로직을 작성하는 경우가 많이 생기게 됩니다. 이럴 때 반복되는 코드를 없애기 위해 직접 hook을 만들어 사용하면 도움이 될 것입니다. 뿐만 아니라, 로직이 너무 길거나 가독성이 떨어질 경우도 있고, 로직과 태그들 사이에 구분이 짓고 싶을 때 사용해도 아주 유용합니다. (함수를 쪼개서 만든다고 생각하면 될 것입니다. 우리는 hook을 사용할 뿐...) 예 HTML 삽입 미리보기할 수 없는 소스 name이랑 email 두 개의 state를 만들었습니다. name은 직접 만든 useInput이라는 커스텀훅을 사용하였고, email은 컴포넌트에서 작성하였습니다. 로직상 두 개의 차이점이 없는 상황입니다. 만약 useInput이라는 커스텀 훅을 만들지 않았다면, email..

Fragment 태그 처음에 컴포넌트관련해서 짧게 설명했던 컴포넌트입니다. React에서 제공해 주는 기본 컴포넌트이며, 동일한 레벨의 태그를 반환해 줘야 될 때, 그 상위로 달아주는 용도로 사용하게 됩니다. 그렇게 되면 하나의 태그가 반환되기 때문입니다. 예 HTML 삽입 미리보기할 수 없는 소스 (생긴게 이상하긴 하지만...) 전체를 태그로 감싸줘서 h1, h2, span 2개가 동일 선상의 레벨로 그려지게 됩니다. 의미 없는 div나 span 등 태그를 사용하기보다는 Fragment태그를 활용하면 실제 HTML 그려질 때 좀 더 효율적으로 그릴 수 있습니다. 뿐만 아니라 map 돌릴 때 보면, key값을 입력해야 되는데 를 활용할 수 있습니다. 생각보다 자주 사용하게 되는 유용한 태그...

useContext 2023.06.23 - [Front-End/React] - React] Hook : useContext 앞 게시글에서 얘기했던 useContext의 단점은 리렌더링이 자주 발생하게 된다는 것입니다. 이를 개선하고자 합니다. 예 HTML 삽입 미리보기할 수 없는 소스 앞에 예를 들었던 마트 코드에서는 2층 과일, 3층 음료수로 변경하였습니다/ 만약 addDrink뿐만 아니라 addFruit를 context추가하여 사용하고, 이를 Emart2F라는 컴포넌트를 새로 만들어서 사용한다고 생각하면, addFruit 하게 될 때 Emart3F도 리렌더링 되는 현상을 볼 수 있을 것입니다. 이를 해결하려고 몇 가지 수정했습니다. Emart.js import React, { useState, use..

useContext 개발하다 보면 props를 여러 번 넘길 때가 찾아오곤 합니다. 증조부모 → 조부모 → 부모 → 자식 → ... 이렇게 props를 계속 넘기다 보면 엄청난 노가다를 해야 될 수도 있고, 유지보수 측면, 가독성 등 안 좋은 점이 많습니다. 이를 개선하기 위해 전역적으로 데이터를 관리할 수 있는 Context를 사용하면 됩니다. Context를 사용하면 증조부모에서 자식까지 한 번에 데이터를 전달할 수 있습니다. (사용하기에 다른 hook보다 복잡할 수 있습니다.) createContext(initialValue) context객체 생성 createContext호출 시, Provider와 Consumer 반환 Context.Provider 생성한 context를 하위 컴포넌트에 전달 u..

본인이 작성한 흐름 따라 값이 변할 것으로 예상하고 setState를 사용했을 때, 바로 다음줄에 값이 변하지 않는 것을 종종 확인할 수 있습니다. 이는 useState설명할 때처럼 비동기로 동작하기 때문입니다. (관련 설명은 아래 글 확인하시면 될 것 같습니다.) 2023.06.04 - [Front-End/React] - React] React 란...? 2023.06.06 - [Front-End/React] - Hook) useState 그렇다면 useState를 동기로 처리하려면 어떻게 해야 될지 2가지 방법이 있습니다. useEffect 사용 HTML 삽입 미리보기할 수 없는 소스 useEffect를 사용하여 의존성을 부여하고, content가 바뀔 때마다 갱신해 주면 됩니다. 2023.06.20..

useReducer 단순히 state 값을 저장하는 것이 아니라, state를 바꾸기 위한 로직, 함수 등을 관리할 수 있는데, 이럴 때 useReducer를 사용하면 관리에 용이합니다. 간단히 말해 state를 바꾸기 위한 여러 함수들을 하나로 묶어서 관리할 수 있다고 보면 됩니다. const [state, dispatch] = useReducer(reducer, initialState); 하나의 state에 dispatch를 통해 값을 변환해 줍니다. (dispatch가 setState역할을 한다고 보면 될 듯싶습니다.) state : 컴포넌트에서의 state dispatch: action을 발생하는 함수 (setState와 비슷) reducer : reducer 정의 initialState : 초기..

useCallback useMemo와 비슷하게 메모리 낭비 및 성능최적화를 위해 사용되는 hook입니다. useMemo는 값을 저장하고 있었다고 하면, useCallback은 함수를 기억하고 있습니다. 컴포넌트 내부에서는 주로 간단한 함수보다는 함수 생성 자체의 비용이 클 때 사용하지만, 자식 컴포넌트에 함수를 props로 넘길 때는 해당 함수는 useCallback으로 감싸야한다. const 변수 = useCallback(()⇒{}), [deps]); deps에 의존성을 부여하여 해당 값이 변할 때 호출하게 됩니다. 이전에 사용했던 useEffect와 동일합니다. 예 HTML 삽입 미리보기할 수 없는 소스 onClick함수에 useCallback을 줌으로써 리렌더링 될 때, 함수가 다시 정의되는 것을 ..

useMemo 개발을 하다 보면, 리렌더링 될 때마다 전체가 동작하기 때문에 불필요한 부분도 계속 실행됩니다. 변수 값이 동일하거나 리렌더링 될 때마다 실행되면 메모리 낭비가 될 수 있으니, Hook을 사용하여 메모리에 값을 저장해 놓고, 필요할 때만 갱신할 수 있도록 합니다. const 변수 = useMemo(()⇒{}), [deps]); deps에 의존성을 부여하여 해당 값이 변할 때 호출하게 됩니다. 이전에 사용했던 useEffect와 동일합니다. 예 HTML 삽입 미리보기할 수 없는 소스 바닥에서 찍은 memo는 input태그 값이 변경될 때마다 찍히는 것을 확인할 수 있고, useMemo안에 있는데 test는 버튼을 누를 때, setClick으로 인해 click값이 변경될 때만 찍히는 것을 확인..

useRef useRef를 사용하면 값을 참조하거나 DOM에 접근하여 태그를 조작할 수 있습니다. const ref = useRef(초기값); 값을 참조하는 Ref ref는 state가 아니라 일반 JS객체이기 때문에 변경시점을 인식하지 못합니다. 따라서 화면에 그려지는 것에 관여하기보다는 정보를 저장하는데 적합하며, 리렌더링 사이에 값을 저장해 놓을 수 있습니다. 지역 변수와는 다르게 리렌더링 될 때 값이 초기화되거나 변하지 않고, 직접 값을 변경해주어야 합니다. ref를 통해 접근할 때는 ref.current를 사용하면되고, 모든 타입의 값이 될 수 있습니다.. (boolean, string, number 등..) 예 HTML 삽입 미리보기할 수 없는 소스 alert으로 뜨는 ref.current는 ..