doeunn.log

🚀 일단 다시 Redux 라는 것을 쓰는 이유를 기억해보자 리덕스는 전역 상태 관리 라이브러리 중 하나입니다. 컴포넌트에서 컴포넌트로 props를 통해 전달을 한다고 하면 깊이가 깊어질 수록 불필요한 props 전달이 생길 수 있습니다. 이러한 구조는 유지보수 또는 props 추적을 힘들게 하는 Props drilling을 야기하게 됩니다. 위 그림은 기존의 props를 통한 상태 관리 방식입니다. 위 그림처럼 상태 변경이 한 번 일어났을 뿐인데 해당 데이터를 변경하기 위해 또 다른 상태 변경이 여러 번 일어나고 있습니다. 이러한 구조는 side effect를 야기할 수 있으며, 발생한 오류를 추척하기도 힘들어지게 됩니다. 대체 어디에서부터 에러가 났는지 계속 타고타고 올라가봐야 알 수 있을 것 입니다...

🚀 Prettier, Eslint, Husky ? Prettier와 Eslint는 일정한 규칙에 맞는 코드 퀄리티 및 스타일을 유지할 수 있게 검사해주는 도구이며, husky는 깃 커밋, 푸시 전에 알아서 Prettier와 Eslint 검사하는 명령어 자동으로 실행할 수 있게 하는 역할입니다. Prettier 깔끔한 코드와 협업을 위해선 일관성 있는 코드 스타일을 유지하는 것이 매우 중요합니다. Prettier는 일관적인 코드 스타일을 유지할 수 있게 도와주는 툴입니다. 그래서 여러 설정이 존재하지만 주로 줄 바꿈, 공백, 들여 쓰기 등과 같은 스타일을 교정해줍니다. 만약에 항상 singleQuote를 사용하겠다고 설정하면 doubleQuote를 사용해도 저장하는 순간 모두 singleQuote로 알아서..

🚀useNavigate ? useNavigate를 사용하면 새로고침 없이도 페이지를 이동할 수 있게 됩니다. Link 태그와는 달리 클릭을 통한 함수 호출로 페이지를 이동한다는 개념 보다는 특정 조건을 충족할 경우 페이지 이동을 하도록 할 수 있습니다. const navigate = useNavigate(); 🚀 useNavigate로 데이터 보내고, useLocation으로 데이터 받자 useNavigate는 단순히 특정 조건에 충족할 경우 페이지를 이동하는 기능 뿐만 아니라 이동할 때 데이터를 실어서 보낼 수 있습니다. 보내고 나면 useLocation을 통해 그 데이터를 받아서 사용하게 되는 것인데요. useNavigate('/submit', { state: { title, content, } })..

🧑🏻‍💻 들어가기 전 리액트의 Context와 Redux를 둘 다 사용해 보았을 때 사용 순서가 조금씩 다르지만 둘 다 전역 상태 관리를 하게 해준다는 점에서 많이 비슷하다고 느껴졌던 것 같습니다. 이번 글에서는 둘의 차이점 및 사용해야 하는 경우에 대해 정리해 보고 앞으로 상황에 적절하게 사용하려고 합니다. 🚀 Redux? 리덕스는 상태의 중앙 관리를 위한 상태 관리 도구입니다. React뿐만 아니라, Angular, Vue에서도 사용할 수 있습니다. 한마디로 리덕스는 '전역 상태'를 생성하고 관리하기 위한 라이브러리라고 볼 수 있습니다. 리덕스는 크게 전역 상태를 보관하는 가장 큰 저장소, 저장소 안에 상태 관리를 위한 여러 리듀서, 리듀서에 행동을 지시하는 디스패치, 어떤 행동을 할 지를 작성하는 ..

🚀 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를 ..