doeunn.log

🚀 Arrays.fill() 이번에는 배열을 같은 값으로 채우는 fill() 함수에 대해 알아보겠습니다. arr.fill(value, start?, end?) 🚀 fill() 함수 배열의 start index부터 end index 전까지 value값으로 채워주는 함수입니다. 🚀 파라미터 value 배열에 채울 값을 지정합니다. start value 값을 채울 배열의 시작 index입니다. 입력하지 않으면 기본값은 0입니다. end value 값을 채울 배열의 종료 index입니다. 입력하지 않으면 기본값은 배열의 길이(arr.length)입니다. ➕ 리턴값 지정한 값으로 채워진 배열을 리턴합니다. 🚀 예제1 const arr1 = ['a', 'b', 'c', 'd']; arr1.fill('A'); // ..

🚀 Redux(리덕스)란? Redux(리덕스)란 자바스크립트 상태관리 라이브러리입니다. ❓ 상태관리 도구가 필요한 이유 우리가 리액트에서 자식 컴포넌트에게 데이터를 전달하기 위해 props를 사용했었습니다. 그런데 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능했었는데요. 자식 컴포넌트 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받았었습니다. 그런데 자식이 많아진다면, 그리고 자식의 자식의 자식 컴포넌트들이 많아진다면 상태 관리가 매우 복잡해질 것입니다. 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야 하는 문제를 Props drilling 이슈라고 하기도 합니다. component G에서 데이터가 필요한 건데 이 데이터를 전달 받기 위해서는 A에서 B로 B에서 C..

🚀 Flux 패턴 Flux 패턴은 2014년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, Client-Side 웹 애플리케이션을 만들기 위해 사용하는 디자인 패턴입니다. ➕ 애플리케이션 아키텍처 애플리케이션 아키텍처는 애플리케이션을 설계하고 구축하는 데 사용하는 패턴과 기술을 의미합니다. 등장배경 페이스북이 Flux 패턴이 필요했던 이유는 대규모 애플리케이션에서 데이터 흐름을 일관성 있게 관리함으로써 프로그램의 예측가능성(Predictability)을 높이기 위함이었습니다. 먼저 기존 애플리케이션이 보편적으로 사용하던 MVC(Model, View, Controller)을 알아봅시다. MVC는 Model, View, Controller의 약자입니다. Model에 데이터를 저장하고, Controller를 ..

🚀 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를 사용한 코드를 잠시 먼저 보겠습니다. 다음 코드는..