본문 바로가기

react57

[도서] 리액트를 다루는 기술 #리액트 없이 쓰는 리덕스 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.
React 리액트 다음 카카오 주소 검색 API 사용 방법 오늘은 다음 카카오 주소 검색 API 사용 하는 방법을 정리해보려고 한다. 지금까지 사용해봤던 라이브러리 중 가장 간단한 방법이어서 접근하기가 쉬웠다. 이번에 캘린더 라이브러리 사용해보면서 가장 힘들었던 점이 커스텀이었는데 다음 카카오 주소 검색 라이브러리는 커스텀 할 수 있는 부분이 없지만 width 값 조절은 간단해서 쉽게 적용시킬 수 있었다. 1️⃣ 먼저 라이브러리 설치하기 yarn add react-daum-postcode // yarn npm install react-daum-postcode // npm // 그리고 맨 위에import 해주기 import DaumPostcode from 'react-daum-postcode'; 2️⃣ 버튼 클릭했을 때의 이벤트, 주소 선택했을 때의 이벤트 만들기.. 2022. 10. 11.
React 리액트 로그인 토큰 만료됐을 때 모달 띄우는 방법 로그인을 구현할 때 30분, 1시간, 2시간 이렇게 만료 시간을 정해서 로그아웃이 되도록 구현했다! 그런데, 로그아웃이 되었는지 알려주지 않으니까 마이 페이지 들어가서야 아 로그아웃 됐구나 라는 생각이 들었다 ㅠㅡㅠ 그래서 로그아웃이 되었음을 알려주는 모달을 만들었다. 처음 구현해본 거라서, 더 좋은 방법이 있을 것 같은데 있다면 공유해주세요❤️ 1️⃣ 일단, 나는 헤더에 코드를 작성했다. 헤더 컴포넌트는 전 컴포넌트에서 사용하기 때문에, 코드를 여러번 작성하지 않아도 된다. 🔷 먼저 전체 코드 기록하기! 여기까지가 모달 뜨는 부분이고 아래에 헤더 코드 더 있다는 점 참고! // 토큰 만료되면 로그아웃 const navigate = useNavigate(); const token = getCookie('.. 2022. 10. 10.

티스토리툴바