기존에 styled-components의 ThemeProvider로 다크모드를 구현하고 있었는데, 토글 버튼에 setTheme 함수를 직접 전달해주다 보니 props drilling이 우려되고 추상화도 잘 되지 않아서 코드가 지저분해 보였기 때문에 리팩터링을 하려고 마음먹었다. theme의 상태를 관리하기 위해서 보통 전역 상태 라이브러리를 많이 사용하지만, 현재 개인 프로젝트에서 전역으로 관리할 상태가 theme 밖에 없어서 패키지를 설치하지 않고 가볍게 사용할 수 있는 걸 찾으려고 했다. 처음엔 URI 쿼리 스트링으로 상태를 관리하는 방법을 생각했다. 하지만 유저가 URI를 직접 수정할 수 있어서 예기치 않은 변경이 발생할 수 있고, URI가 변경될 때마다 브라우저 히스토리가 쌓여서 히스토리가 불필요..

리덕스의 역사 MVC 아키텍처의 한계 리덕스는 flux 패턴이 적용된 상태 관리 라이브러리입니다. flux 패턴은 MVC 패턴의 한계를 극복하기 위해 만들어졌습니다. MVC 패턴의 구조는 이렇게 생겼습니다. Controller는 Model에 정의된 데이터를 조회하거나 업데이트하는 역할을 하며, 변경된 Model의 데이터를 View에 반영해 줍니다. 또한 사용자는 View를 통해 데이터를 입력하고 Model에 반영되며, View와 Model은 데이터를 양방향으로 주고받는 형태입니다. 이 패턴은 작은 규모에서는 관리가 가능했지만 규모가 커질수록 문제를 야기했습니다. 프로젝트가 커질수록 수많은 View와 Model들이 생겨나게 되었고 데이터가 어디로 흐르는지 파악하기 어려워졌습니다. 이러한 이유로 새 기능을 ..

컴포넌트 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점입니다. 먼저 컴포넌트를 만들고, 다시 페이지를 조립해나갑니다. 즉, 상향식(bottom-up)으로 앱을 만듭니다. 이것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋습니다. 그래서 기획자나 PM, 또는 UX 디자이너로부터 앱의 디자인을 전달받고 나면, 이를 컴포넌트 계층 구조로 나누는 것이 가장 먼저 해야 할 일입니다. Props 컴포넌트는 컴포넌트 바깥에서 props를 이용해 데이터를 마치 전달 인자(arguments) 혹은 속성(attributes)처럼 전달받을 수 있습니다. 즉 데이터를 전달하는 주체는 부모 컴포넌트가 됩니다. 이는 데이터 흐름이 하향식(top-down)임을 의미합니다. 이 원칙은 매..

state 애플리케이션의 "상태" 컴포넌트 내부에서 변할 수 있는 값 props 외부로부터 전달받은 값 컴포넌트의 속성(property)을 의미합니다. 이름이나 출생지처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다. React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있습니다. 객체 형태입니다. props로 어떤 타입의 값도 넣어 전달할 수 있도록..

💡 SPA 서버로부터 완전히 새로운 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아서 그 정보를 기준으로 현재의 페이지를 업데이트하는 웹 애플리케이션이나 웹 사이트 SPA의 등장 배경 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했습니다. 페이지 전체를 로딩하면서 깜빡이는 현상 등이 생기기 때문에 유저 경험이 좋지 않았습니다. 또한 사용자와 서비스 사이에 상호작용이 더욱 많아지면서 웹사이트가 더욱 복잡해졌습니다. 상호작용을 할 때마다 Header나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰습니다. 이런 문제를 개선..