리액트(3)
-
[React] Recoil이 뭔데 대체! / React를 위한 상태 관리 라이브러리 Recoil 개념 쉽게 알아보기
"상태 관리가 필요한 이유" 컴포넌트에서 다른 컴포넌트로 값을 넘기는 방법은 2가지가 있습니다! 1) 부모컴포넌트 => 자식 컴포넌트로 props 넘기기 2) 상태관리 라이브러리 (Redux, Recoil 사용하기) 만약 1) 부모=> 자식 컴포넌트로 props 넘기기를 이용하여 꼭대기 Provider1 ==> 마지막 6 로 값을 전달하면 어떤 문제가 발생할까요? A. Traveling Props가 발생! Traveling Props란? 여행하는 Props란 뜻으로 props가 전달=>전달=> 전달=>하게 되어 이리 저리 컴포넌트 세계여행을 떠나게됩니다. 그렇게 되면 코드가 굉장히 복잡해지고 번거로워지고 헷갈리게 되겠죠? 그러나, Recoil과 같은 상태관리 라이브러리를 사용하게 되면, 직통열차처럼 한 ..
2022.06.09 -
[React] React에서 차트 데이터 보여주는 법/ React에서 APEXCHARTS 사용하기
//노마드 코더 리액트 마스터 강의 내용을 공부용으로 정리한 것입니다 //챌린저 내용은 전혀 없습니다 APEXCHARTS란? 자바스크립트에서 사용할 수 있는 차트 라이브러리로, 차트를 시각화해서 보여준답니다! 앵귤러, 리액트, 웹 컴포넌트, JQuery, ASP.NET 등 다양한 프레임워크와 통합하여 사용할 수 있어 차트를 시각화하여 사용자에게 보여줄 수 있게 도와줍니다! 저는 react와 연계해서 사용할 것이기 때문에 React-ApexChart - A React Chart wrapper for ApexCharts.js Create React Charts using a React Chart component for ApexCharts. Build beautiful and interactive visua..
2022.05.21 -
[React] react query에 대해 알아보기
*이는 노마드코더 리액트마스터 강의를 통해 배운 내용을 정리한 개념입니다 * 챌린지 내용은 전혀 없습니다 개요 React Query : 서버 상태 관리를 도와주는 라이브러리! 장점 (1) 캐시를 사용한다 이전 페이지가 돌아왔을 때 다시 로딩되는 것이 아닌, 캐시에 저장되기 때문에 다시 한 번 API를 불러오는 작업이 없다! 한 번만 불러오고 끝! (2) 자동으로 데이터를 가져온다. 가져온 데이터가 업데이트 되면 자동으로 데이터를 다시 가져온다. (3) ★★★★★ 클린 코드 작성이 가능하다.★★★★★ 기존의 api 연동 방식은 fetch를 사용하여 긴 코드를 주저리 주저리 쓰는 것이었지만, react query를 사용한다면, 짧은 코드만으로 api 연동이 가능하다! 예시) 기존 fetch만을 사용하여 암호..
2022.05.19