Front-End, CS 스터디/[도서] 리액트를 다루는 기술11 [도서] 리액트를 다루는 기술 #컴포넌트 반복 6.1 자바스크립트 배열의 map() 함수 - 반복되는 코드 형태일 때, 코드양을 더더욱 늘어날 것이며 파일 용량도 쓸데없이 증가하게 된다. - 보여 주어야 할 데이터가 유동적이라면 이런 코드로는 절대 관리할 수 없다. 1️⃣ 자바스크립트 배열의 map() 함수 - 배열 객체의 "내장 함수" map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. - map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. 👌 문법 arr.map(callback, [thisArg]); 🔷 callback : 새로운 배열의 요소를 생성하는 함수 - currentValue : 현재 처리하고 있는 요소 - index : 현재 처리하고 있는 요소.. 2022. 10. 28. [도서] 리액트를 다루는 기술 #리액트 없이 쓰는 리덕스 16.2 리액트 없이 쓰는 리덕스 - 리덕스는 리액트에 종속되는 라이브러리가 아니다. - angular-redux, ember redux, Vue에서도 사용 가능, Vue에서는 리덕스와 유사한 vuex를 주로 사용 - 바닐라(vanilla) 자바스크립트와 함께 사용할 수도 있다. 🔷 바닐라 자바스크립트 : 라이브러리나 프레임워크 없이 사용하는 순수 자바스크립트 그 자체 1️⃣ 액션 타입과 액션 생성 함수 정의 - 액션 : 프로젝트의 상태에 변화를 일으키는 것 - 액션 이름 : 문자열 형태, 주로 대문자 작성, 고유해야 한다. - 액션 객체 : 반드시 type 값을 갖고 있어야 하며, 그 외에 추후 상태를 업데이트할 때 참고하고 싶은 값은 마음대로 넣을 수 있다. // 액션 이름 const TOGGLE_S.. 2022. 10. 18. [도서] 리액트를 다루는 기술 #리덕스 개념 미리 정리하기 16장. 리덕스 라이브러리 이해하기 - 리액트 상태 관리 라이브러리 - 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. - 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다. - 전역 상태를 관리할 때 굉장히 효과적 - Context API를 통해서도 똑같은 작업을 할 수 있으나, 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있어 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다. - 코드의 유지 보수성을 높여주고 작업 효율도 극대화해준다. - 편리한 개발자 도구 지원 - 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해준다. 16.1 개념 미.. 2022. 10. 18. [도서] 리액트를 다루는 기술 #리액트의 특징 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. 이전 1 2 다음
