React(8)
-
[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 -
[JS/CSS] styled-components가 뭘까?/ styled-components 기본 문법 정리!
(1) 왜 styled-components를 사용해야할까? (2) styled-components 환경설정하기 (3) styled-components의 기본문법 (4) styled-components에서 props 사용하기 프론트엔드 개발자의 기본소양 html , css, js! 이제 styled-components 안 쓰면 개구린 프론트 개발자라고 합니다 요즘 프론트 트렌드는 한 컴포넌트에 html js css 코드를 다 때려박아서 컴포넌트 별로 관리하는 게 대세라는데요.... 이는 재활용성도 높고 "아 이게 무슨 코드구나!" 읽기 좋고 유지보수에 유리한 코드를 작성할 수 있다고 하는데... 이를 실현시켜주는 게 styled-components! 한 번 배워봅시다 (1) 왜 styled-componen..
2022.05.05 -
[React] 정말 간단한 react 로딩화면 만들기 /react-loader-spinner 사용하기
로딩화면 없이 웹사이트가 멈춘상태가 유지된다면 유저는 "어? 오류가 났나?" "이 사이트 먹통이네" 라는 생각이 들게 합니다. 로딩화면의 구현은 정말 간단해 보이지만, css 애니메이션도 사용해야하고, setLoding을 구현하는 코드도 필요한 등, 요구사항이 꽤 많은데요~!! 하지만 react에선 이런 로딩화면을 구현해주는 라이브러리를 제공되고 있습니다 그건 바로~! react-loader-spinner! react-loader-spinner를 통해 로딩화면을 구현하는 방법에 대해 알아보겠습니다 (1) 라이브러리 설치 $ npm install react-loader-spinner --save 먼저 npm install을 통해 스피너 라이브러리를 설치해줍니다. (2) 라이브러리 import / 코드 구현..
2022.05.03 -
[React JS] 점 세 개(...)를 이용하여 변수와 배열 합치기 / 자바스크립트 ...의 의미
다들 자바스크립트 예제를 공부하다 [info, ...userArray] 이런 식으로 배열 앞에 ... 이 붙어있는 걸 볼 수 있을거다! 처음 보면 굉장히 당황스러운 문법...~~ 이게 대체 뭘까요?? const food = ['마라탕', '치킨', '불닭볶음면']; const juice = '공차'; (1) 배열 food와 string 변수 juice 선언하였다. 그렇다면 배열과 변수를 합쳐 ['공차', '마라탕', '치킨', '불닭볶음면'] 이 나오기 위해선 어떻게 해야할까요?? 흠,,,,, [juice, food]를 둘 다 써서 합쳐주면 되지 않을까요?! 땡! 변수와 배열을 합친 결과 => ['공차', Array(3)] 로 그저 공차 + 배열로 이루어진 값이 콘솔에 찍혔습니다... 이럴 때 필요한 게..
2022.04.27