doeunn.log

🚀 useReducer와 useContext 복습 useReducer는 state를 업데이트 하는 로직을 분리해서 dispatch를 통해서만 state를 업데이트했었습니다. 이때 dispatch에는 action 객체를 보내게 되는데요. 이 객체에는 원하는 로직과 필요한 데이터를 담아서 보냈었습니다. useContext는 전역 상태 관리를 할 수 있는 hook 함수였습니다. 빈 저장소를 만들고 이 저장소를 useContext에 넘겨주게 됩니다. 최상위 컴포넌트로 방금 만든 저장소.Provider 하고 value로 전역에서 사용하고 싶은 데이터를 넘겨주면 props로 데이터를 넘겨주지 않아도 어떤 자식 컴포넌트에서 전역으로 관리되고 있는 데이터를 사용할 수 있었습니다. → 이 두 hook 함수를 함께 사용한..

🔎 useContext 리액트로 만들어진 웹은 여러 개의 컴포넌트들로 이루어져 있습니다. 리액트에서의 일반적인 데이터 흐름은 부모 컴포넌트에서 자식 컴포넌트로 prop로 데이터를 전달합니다. 하지만 이렇게 부모에서 자식으로 또 다시 자식으로 props를 전달하다가 보면 depth는 굉장히 깊어지고 이에 따라 그 데이터를 추적하기 매우 어려워진다는 치명적인 단점이 생기게 됩니다. 또 그리고 전역적으로 사용하는 정보(ex. 사용자 정보, 테마, 언어 등)를 props로 단계별로 일일이 전달해야 한다면 깊이가 깊어지는 것는 물론이고 코드의 복잡도, 변경 시에 데이터를 추적하는 것이 매우 힘들 것입니다. 그래서 리액트에서는 이러한 문제를 해결하기 위해 Context API를 제공하고 있습니다. ❓ Context..

🔎useReducer 이해하기 상태를 업데이트 할 때에는 useState를 사용해서 새로운 상태를 설정해주었습니다. 상태를 관리하게 될 때 useState를 사용하는 것 말고도 다른 방법이 있습니다. 바로, useReducer를 사용하는 것인데요. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용도 가능합니다. 정리하자면, useReducer의 역할은 복잡한 상태 업데이트 로직을 컴포넌트 안에서 관리하지 말고 바깥에 따로 빼서 관리할 수 있도록 하는 것! useReducer를 사용해 보기 전에 useState를 사용한 코드를 잠시 먼저 보겠습니다. 다음 코드는..

🔎 불변성 ? 사전적으로 불변성이란 값이나 상태를 변경할 수 없는 것을 의미합니다. 이 의미를 정확하게 이해하기 위해 자바스크립트의 원시타입에 대해 먼저 알아보도록 합시다. ❓ 원시타입 vs 참조타입 자바스크립트에서 원시타입에는 Number, Strimg, Boolean, null, undefined, Symbol 참조타입에는 Object, Array가 있습니다. 이때 원시타입은 고정된 크기로 메모리에 저장, 실제 데이터가 변수에 할당되며 참조타입은 데이터 크기가 정해지지 않고 메모리에 저장, 데이터의 값이 heap에 저장되며 변수에 heap 메모리의 주소값이 할당됩니다. 즉, 원시타입들은 불변성을 유지하고, 참조타입들은 변경이 가능한 값들이라는 말입니다. 원시타입은 불변성을 유지한다 let string..

🔎 커스텀 Hooks 우리는 중복된 코드를 보게 되면 재사용이 가능한 함수로 추출해서 중복 코드를 제거하고 싶어하죠? React에서도 여러 개의 hook을 조합해서 기능을 만들게 되는데 여러 컴포넌트에서 동일한 기능에 대해 동일한 hooks를 복사 붙여넣기 하다보면 중복된 코드들을 볼 수 있을 것입니다. 이 중복된 hooks에 대해서도 따로 커스텀 훅을 통해 간결하게 관리할 수 있게 됩니다. 예를 들어 상태 관리를 하는 기능을 우리가 useState 한줄로 불러와서 사용하는 것처럼 말이죠! 우리가 만든 기능에 대해서도 하나의 hook으로 관리해서 어느 컴포넌트에서라도 바로 불러와서 사용할 수 있다면 말이죠? React에서는 내가 원하는 인터페이스와 기능을 담은 나만의 커스텀 훅을 만들 수 있습니다. 커스..

🔎 함수 메모이제이션 useCallback은 함수를 메모이제이션(memoization)하기 위헤서 사용되는 hook 함수입니다. 첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해 놓고 재사용할 수 있게 해줍니다. const memoizationCallback = useCallback(함수, 배열); 예를 들어, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다면 이 함수는 해당 컴포넌트가 렌더링될 때마다 새로운 함수가 생성됩니다. const add = () => x + y; 하지만 useCallback()을 사용하면, 해당 컴포넌트가 렌더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환합니다. 즉 x 또는 y 값이 바뀌면..