타입스크립트(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 query에 대해 알아보기
*이는 노마드코더 리액트마스터 강의를 통해 배운 내용을 정리한 개념입니다 * 챌린지 내용은 전혀 없습니다 개요 React Query : 서버 상태 관리를 도와주는 라이브러리! 장점 (1) 캐시를 사용한다 이전 페이지가 돌아왔을 때 다시 로딩되는 것이 아닌, 캐시에 저장되기 때문에 다시 한 번 API를 불러오는 작업이 없다! 한 번만 불러오고 끝! (2) 자동으로 데이터를 가져온다. 가져온 데이터가 업데이트 되면 자동으로 데이터를 다시 가져온다. (3) ★★★★★ 클린 코드 작성이 가능하다.★★★★★ 기존의 api 연동 방식은 fetch를 사용하여 긴 코드를 주저리 주저리 쓰는 것이었지만, react query를 사용한다면, 짧은 코드만으로 api 연동이 가능하다! 예시) 기존 fetch만을 사용하여 암호..
2022.05.19 -
[TypeScript] 타입스크립트 interface 개념/ TypeScript에서의 interface는 뭘까?
목차 1. 타입스크립트에서의 nterface 개념과 기본문법 2. interface의 optional props 3. optional props의 default 값 설정하기 "interface" object shpae (string인지, number인지 등)을 Typescript에게 설명해주는 기능 타입스크립트는 props Types을 사용하여 prop이 있는지 없는지 확인해야하는데요! const User = (a:number, b:number) => a+b; plust(2, 3); //5 plus(2, "3"); // string b로 인해 오류 발생 props Types는 잘못된 코드가 있으면, 브라우저 콘솔에 에러를 띄우는데, 이는 코드 실행 후에만 알 수 있습니다. 따라서, 이미 run 돌리면 사..
2022.05.10