React
-
React-Query 기본 사용법REACT 2023. 3. 2. 14:52
React-Query는 React 애플리케이션에서 데이터 관리를 위한 라이브러리입니다. React-Query를 사용하면 서버에서 가져온 데이터를 캐싱하고, 상태 업데이트와 재요청 등을 자동으로 처리할 수 있습니다. React-Query를 사용하려면 다음과 같은 단계를 따릅니다. React-Query 설치 npm install react-query yarn add react-query Query 컴포넌트 작성 React-Query에서 제공하는 useQuery 훅을 사용하여 데이터를 가져옵니다. useQuery 훅은 data, isLoading, isError 등의 상태 값을 반환합니다. import { useQuery } from 'react-query'; function App() { const { da..
-
[스파르타코딩클럽] 리액트 React.js week 1-3SPARTA CODING CLUB 2021. 8. 9. 15:50
JSX 리액트에서는 딱 하나의 html 파일만 존재합니다. (public 폴더 아래에 있는 index.html) 그럼 리액트에서 어떻게 뷰를 그릴까요? JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그립니다. HTML을 품은 JS === JSX! 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 할 수 있어요. JSX 규칙 태그는 꼭 닫아주기 // input 태그를 닫지 않고 넣어볼거예요! function App() { return ( ); } 무조건 1개의 엘리먼트를 반환하기 return ( 안녕하세요! 리액트 반입니다 :) // 에러! ); JSX에서 javascript 값을 가져오려면 중괄호를 사용 const cat_name = 'perl'; // r..
-
[스파르타코딩클럽] 리액트 React.js week 1-2SPARTA CODING CLUB 2021. 8. 4. 21:04
Array 내장 함수 map: 배열에 속한 항목을 원하는 대로 변환하고 새로운 배열을 만들 때 사용하는 함수. 원본 배열은 변하지 않는다. const array_num = [0, 1, 2, 3, 4, 5]; const new_array = array_num.map((array_item) =>{ return array_item + 1; }); // 새 배열의 값은 원본 배열 원소에 +1 한 값입니다. console.log(new_array); // (6) [1, 2, 3, 4, 5, 6] // 원본 배열은 그대로 있죠! console.log(array_num); // (6) [0, 1, 2, 3, 4, 5] filter: 조건을 만족하는 항목들을 골라서 새 배열로 만들어 주는 함수. 원본 배열은 변하지 ..