본문 바로가기

분류 전체보기162

[도서] 리액트를 다루는 기술 #리액트 없이 쓰는 리덕스 16.2 리액트 없이 쓰는 리덕스 - 리덕스는 리액트에 종속되는 라이브러리가 아니다. - angular-redux, ember redux, Vue에서도 사용 가능, Vue에서는 리덕스와 유사한 vuex를 주로 사용 - 바닐라(vanilla) 자바스크립트와 함께 사용할 수도 있다. 🔷 바닐라 자바스크립트 : 라이브러리나 프레임워크 없이 사용하는 순수 자바스크립트 그 자체 1️⃣ 액션 타입과 액션 생성 함수 정의 - 액션 : 프로젝트의 상태에 변화를 일으키는 것 - 액션 이름 : 문자열 형태, 주로 대문자 작성, 고유해야 한다. - 액션 객체 : 반드시 type 값을 갖고 있어야 하며, 그 외에 추후 상태를 업데이트할 때 참고하고 싶은 값은 마음대로 넣을 수 있다. // 액션 이름 const TOGGLE_S.. 2022. 10. 18.
TIL - 2022.10.18 Virtual DOM, useRef, useEffect, var, let, const, Async/Await, Promise ✅ 정리했었던 내용 복습 1️⃣ Virtual DOM과 Real DOM의 차이 - DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델 - DOM은 HTML에 동적인 변화가 있을 경우 전체 페이지(DOM Tree)를 검색해서 해당 부분을 교체한 후 전체 페이지에 대해 리렌더링을 해주어야 하는 문제점이 발생, 이에 대한 문제점을 해결하기 위해 나온 것이 Virtual DOM - Virtual DOM을 사용하면 실제 DOM에 조작하여 접근하는 대신, 추상화한 자바스크립트 객체를 구상하여 사용한다. - DOM의 상태를 메모리에 저장하고 데이터가 업데이트 되면 전체 UI를 Virtual DOM에 리렌더링 해서 이전 .. 2022. 10. 18.
[도서] 리액트를 다루는 기술 #리덕스 개념 미리 정리하기 16장. 리덕스 라이브러리 이해하기 - 리액트 상태 관리 라이브러리 - 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. - 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. - 전역 상태를 관리할 때 굉장히 효과적 - Context API를 통해서도 똑같은 작업을 할 수 있으나, 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있어 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다. - 코드의 유지 보수성을 높여주고 작업 효율도 극대화해준다. - 편리한 개발자 도구 지원 - 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해준다. 16.1 개념 미.. 2022. 10. 18.
TIL - 2022.10.17 상태 관리, Redux란? React, CS 공부 꾸준히 하자!! 리액트를 다루는 기술 책을 읽고 있는데 겹치는 부분도 많다. 여러 번 보면서 장단점을 파악하고 이해해야 할 것 같다. 사용하고 있지만 명확하게 이유를 모르고 코딩만 할 때가 있다. 그렇게 하지 않도록 꾸준히 공부를 해보기! ✅ 정리했었던 것 + 다시 정리하기! 1️⃣ 상태관리를 왜 할까? - 서로 다른 컴포넌트에 같은 데이터가 필요하다고 할 때, 각 컴포넌트가 부모 자식 관계로 되어 있지 않은 이상 직접적인 데이터 전달이 어렵다. - 데이터를 부모 컴포넌트로 보내고 다시 필요한 컴포넌트로 전달을 해야 하는데, 이렇게 Prop Drilling이 많아지면 이 Prop이 어디에서 왔는지 확인하기가 어려워 상태관리를 해야 한다. - 평소 State관리는 Redux로 하고 .. 2022. 10. 17.
[도서] 리액트를 다루는 기술 #리액트의 특징 1.2 리액트의 특징 1️⃣ DOM의 문제점 👌 동적 UI에 최적화되어 있지 않다. HTML은 자체적으로는 정적, 자바스크립트를 사용하여 이를 동적으로 만들 수 있다. 🔷 리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행한다. 2️⃣ Virtual DOM Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. 1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다. 2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다. 3. 바뀐 부분만 실제 DOM에 적용한다. "리액트는 프레임워크가 아니라 라이브러리" #출처 : 리액트를 다루.. 2022. 10. 17.
[도서] 리액트를 다루는 기술 #왜 리액트인가? 리액트를 사용하면서 리액트에 대해 입으로 장점을 내뱉는 것이 어렵다는 것을 새삼 느끼니, 지식부터 잘 쌓아서 오래갈 수 있는 개발자가 되어보자는 생각이 들었다. 멘토님의 추천과 리액트를 검색하면 가장 먼저 나오는 책이라는 점에 [리액트를 다루는 기술] 이라는 책을 구매해서 읽기 시작했고 나름 공부된 부분을 정리해보려고 한다. 리액트가 아닌 다른 프레임워크도 정보가 있으면 중간중간 함께 정리할 계획이다. 1.1 왜 리액트인가? 1️⃣ 자바스크립트 기반 프레임워크 : Backbone.js, Angular, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js 등 - MVC 아키텍처 : Model-View-Controller - MVVM 아키.. 2022. 10. 13.

티스토리툴바