useState란?
const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);
// 이런식으로 사용합니다.리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태관리를 할 수 없었지만
리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.
useState 예시
import React, { useState } from 'react';
function Counter(){
const [number, setNumber] = useState(0);위의 코드에서는 기본값을 0으로 설정을 해주었다.
그래서 number = 0 이 된다.
setNumber은 number 변수의 값을 설정한다. 그래서 값을 setNumber로 변화를 시킬 수 있다.
const plus = () => {
console.log('1을 더합니다.');
setNumber(prev => prev + 1);
}
const minus = () => {
console.log('1을 뺍니다.');
setNumber(prev => prev - 1);
}위에서 말했듯이 setNumber은 변화를 시킬 수 있다.
기본 값은 0이지만
const plus에서 setNumber은 +1이 되고, const minus에서는 setNumber -1이 된다.
prev은 setState 함수에 파라미터로 함수를 넘겨주면 이전 값을 저장해주는 변수이다.
useEffect란?
- useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다
- useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, componet가 update됐을 때, 특정 작업을 처리할 수 있다.
즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다.
기본 형태
useEffect( function, deps )
// function: 수행하고자 하는 작업
// deps: 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열deps(=dependency)
Fetch란 무엇인가?
fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다.
XMLHttpRequest와 비슷하지만 fetch는 Promise를 기반으로 구성되어 있어서 더 간편하게 사용할 수 있다는 차이점이 있다.
기본 구조
fetch(url)
.then(res => {
console.log(res)
})
.catch(error => {
console.log(error)
})Fetch의 탄생 배경
fetch가 나오기 전까진 자바스크립트에서는 ajax를 쓰기란 매우 까다로웠다.
또, 익스플로러랑 기타 브라우저가 맞춰져 있지 않다 보니 커먼 라이브러리로 만들어 쓰거나 손쉽게 만들어져 있는 제이쿼리(jQuery)를 이용해왔다.
예를 들면, jQuery의 ajax() 메소드와 같은 것들을 사용해 단지 AJAX 구현만을 목적으로 사용해왔다.
여기서 AJAX란?
JavaScript의 라이브러리 중 하나이며, Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml의 약자)이다.
AJAX를 쓰는 이유는 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드할 수 있기 때문에 사용한다.
XMLHttpRequest는 무엇?
대부분의 웹 브라우저에서는 서버로부터 데이터를 요청하는 XML 객체들을 내장하고 있다.
이름만 보면 XML 데이터만 다룰 수 있을 것 같지만 모든 데이터를 다룰 수 있으며, AJAX 프로그래밍에서 주로 사용한다.
XMLHttpRequest를 이용하면 웹 페이지를 전부 로딩하고도 서버로부터 데이터를 요청하거나 전송받을 수 있으며, 웹 페이지를 전부 로딩하지 않고도 일부만을 갱신하는 게 가능해진다.
따라서, AJAX는 JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이라고 할 수 있다.
