본문 바로가기

React3

[React] Axios 사용법 정리 Axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. 지원브라우저 Axios와 Fetch의 차이점 X Axios Fetch 1 요청 객체에 url을 가지고 있다 요청 객체에 url이 없다 2 설치과정이 필요하다 대부분의 최신 브라우저에 내장되어 있어 설치가 필요없다 3 내장된 XSRF 보호기능이 있다 기능 없음 4 data 속성을 사용한다. body 속성을 사용한다. 5 data에는 객체가 포함되어 있다 body는 문자열화 되어야 한다. 6 status가 200 이고 statusText가 'OK' 일 때 요청은 정상이다 응답 객체에 OK 속성이 포함되어 있으면 요청은 정상이다 7 JSON 데이터의 자동 변환을 수행한다. json.. 2022. 8. 21.
[React] Lists and Key React에서 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열 내장함수인 map()을 사용합니다. 아래는 peoples라는 배열의 전체 요소를 ...로 렌더링 하는 예제입니다. import React from 'react' const Test = () => { const peoples = [ {id:0, name: 'Lily', age: 14}, {id:1, name: 'Sophia', age: 15}, {id:2, name: 'Isabella', age: 11}, {id:3, name: 'Zoe', age: 19} ]; const listItems = peoples.map(people => {people.name} ) return {listItems} } export default Test 위 코드.. 2022. 8. 12.
[React] useState 사용법 정리 useState 개요 React 16.8 이전 버전에서는 함수형 컴포넌트에서 상태를 관리할 수 없었지만, React는 React 16.8에서 Hook이라는 개념을 추가하며 Hook을 통해 class를 작성하지 않고도 state와 같은 React 기능들을 사용할 수 있습니다. 오늘은 Hook 중 하나인 use.State를 정리하겠습니다. useState 변수 선언 import React, { useState } from 'react'; 리액트에서 useState 함수를 불러옵니다. function 예제() { const [state, setState] = useState(0); //const [상태값 저장, 상태값 갱신 변수] = useState(초기값); useState는 상태 변수와 상태를 갱신할 수 .. 2022. 8. 6.

티스토리툴바