왕가's history

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는 ..

Strict Mode production환경에서 일어날 수 있는 오류를 React에서 잡아주기 때문에 사용됩니다. Strict Mode가 켜져 있는 상태이면, 개발 중에 React는 실제 설정 전에(setup - cleadnup) 한 번 더 실행하게 됩니다. 이는 올바르게 구현되었는지 확인하기 위함이며, 두번 일어났는데, 결괏값이 서로 다르면 해당 코드는 문제가 있다는 것을 파악할 수 있습니다. 개발 모드에서만 활성화 되기 때문에 production에서는 영향이 없음 CRA로 프로젝트 생성시 default로 태그가 달려 있음 import React from 'react'; function ExampleApplication() { return ( ); } React.StrictMode로 감쌀 수 있다. 혹..

React를 사용했을 때, 화면이 그려지는 동작 순서와 화면을 다시 그리게 되는 리렌더링 순서입니다. Mount (마운트) 컴포넌트가 생성되어 렌더링 되는 과정을 마운트라고 하며, 렌더링 된 컴포넌트가 삭제되는 과정을 Unmount(언마운트)라고 합니다. 함수 컴포넌트 호출 구현부 실행 props 전달받고, hook 내부 변수, 함수 생성. (내부 변수 및 함수는 hook에 있는 state나 function을 제외. 이들은 별도로 메모리에 저장되어 관리함.) 가상 DOM을 생성 커밋 실제 DOM에 반영 useLayoutEffect 화면에 Paint 하기 전에, useLayoutEffect에 등록해 둔 effect '동기'로 실행된다. 실제로 해당 훅은 잘 사용하지 않는 것으로 알고 있음. 공식 문서를 확..

useEffect Side-Effect를 처리하기 위한 Hook입니다. Side-Effect : 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위로, 렌더링 된 이후 비동기로 처리되어야 하는 부수적인 것들을 지칭 uesEffect(() ⇒ { … } ,[deps]) 두 번째 인자인 deps에 state값을 넣고, state값이 변할 때마다 해당 useEffect를 실행. 빈 배열로 입력할 경우, 렌더링 후 1번만 실행. 종속성 배열을 아예 지정하지 않았을 경우, 리렌더링 될 때마다 실행. useEffect가 실행되는 시점은 렌더링 결과가 DOM에 반영될 때, 컴포넌트가 사라지기 직전 마지막으로 호출됩니다. 2023.06.20 - [Front-End/React] - React 동작..

Hook React에서 함수형 컴포넌트를 사용 시, state와 다른 React 기능들을 사용할 수 있게 해 줌. 주의 사항 Hook은 최상위, 함수의 제일 바닥에서만 사용해야 한다. 반목문, 조건문, Hook 내부 등에서 호출하면 안 된다. Hook은 React 함수 내에서 사용 Custom Hook에서 Hook을 호출할 것 Hook은 호출되는 순서가 중요하다. React에서 제공해 주는 여러 기능들? 함수들?로 보면 될 것 같습니다.