왜 이렇게 동작할까?Zustand의 selector는 엄격한 동등성 검사(old === new)를 통해 변화를 추적하고 상태 변경을 컴포넌트에 알려 리렌더링을 시키기 때문에 셀렉터를 아토믹하게 유지하는 게 중요하다고 합니다.// 🚨 selector는 모든 호출에서 새 객체를 반환합니다.const { bears, fish } = useBearStore((state) => ({ bears: state.bears, honey: state.honey,}))// 😮 그래서 이 둘은 동등합니다.const { bears, honey } = useBearStore() // ⬇️ 최적화되었기 때문에 훨씬 더 좋습니다.const bears = useBearStore((state) => state.bears)cons..

개념 정리본격적으로 렌더링에 대해서 보기 전에 렌더링과 관련된 리액트 패키지 4가지를 먼저 살펴보겠습니다. 패키지 구조React리액트 코어 패키지는 컴포넌트를 정의하는 역할만 합니다. 그리고 다른 패키지에 의존성이 없어서 다양한 플랫폼에 올려서 사용이 가능합니다. 그래서 화면을 그리는 패키지가 따로 있는데 그게 바로 렌더러 패키지 입니다.Renderer렌더러는 저희한테 익숙한 리액트-돔과 모바일에서 사용하는 네이티브 렌더러 등이 있고 호스트 렌더링 환경, 그러니까 플랫폼에 의존적입니다. 이렇게 렌더러가 다양하기 때문에 리액트가 그려질 수 있는 플랫폼 환경이 다양합니다. 즉 렌더러의 역할은 브라우저나 모바일 같은 호스트와 리액트를 연결하는 그런 역할을 합니다.Scheduler스케줄러는 이름 그대로 스케줄링..

React에서 상태(state)는 컴포넌트의 라이프사이클 동안 정보를 유지하는데 사용되는 중요한 개념입니다. useState 훅을 이용하여 컴포넌트의 상태를 관리하면, 상태가 변경될 때마다 컴포넌트가 다시 렌더링 됩니다. 그런데, 상황에 따라서 컴포넌트의 상태가 유지되거나 초기화되는 경우가 있는데, 이는 컴포넌트가 렌더링 되는 방식에 따라 달라집니다.삼항 연산자(? :)와 논리 연산자(&&)를 이용하여 컴포넌트를 렌더링 하는 경우, 두 연산자가 UI 트리(가상 DOM)에 미치는 영향은 서로 다릅니다. 이로 인해 React의 diffing 알고리즘이 컴포넌트를 다르게 인식하고 처리하며, 결론적으로 컴포넌트의 상태 유지에서 차이가 나게 됩니다.삼항 연산자와 컴포넌트의 상태삼항 연산자를 사용하면, 두 표현식 ..

📍Proxy 를 쓰는 이유 리액트는 프론트엔드 개발 서버를 열어서 코드의 수정사항을 감지하고 바로바로 브라우저에 렌더링해준다. 이때 프론트엔드 개발 서버와 백엔드 서버의 출처(origin)이 다르기 때문에 CORS정책에 위배되어 데이터를 받아오지 못하게된다. CORS: 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 백엔드 개발자에게 프론트엔드 개발 서버의 도메인을 허용해달라고 요청하고 백엔드에서 CORS 설정을 해주어 응답헤더를 전달 받는 것이 정석적인 해결방법이지만 Proxy를 설정하면 CORS 정책을..

번들링 번들링이란? 번들링은 코드, 프로그램을 묶어서 패키지로 제공하는 행위를 의미합니다. 프론트엔드 개발자에게 번들은 “사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음" 입니다. 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 프론트엔드 개발자가 번들링한 여러 파일을 받습니다. 이 파일을 브라우저가 실행하여 웹 애플리케이션을 사용자에게 제공합니다. 웹팩 webpack은 2022년 9월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러입니다. Webpack이란 Webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러입니다. 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하..

리덕스의 역사 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 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰습니다. 이런 문제를 개선..