axios란?, Hook이란?

📌axios란?
브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리
axios는 node.js와 브라우저를 위한 http클라이언트 이다.
-브라우저를 위해 XMLHttpRequests생성
-node.js를 위해 htttp요청 생성
-JSON 데이터 자동 변환
( 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다.)

설치 : npm install axios

📌(데이터를 주고 받는 방법)
npm install axios : axios를 사용하기 위해 터미널에 작성
구글 -> axiois -> doc보면서 사용법, 무엇인지 보기
(https://react.semantic-ui.com/usage/공식 문서 확인 하기)
css프레임워크를 사용하기 위해 다운 (만들어 놓은 것을 사용하기 위해서)
방법1
npm install semantic-ui-react semantic-ui-css
사용하기 위해 inedx.js에 import
import 'semantic-ui-css/semantic.min.css' (App 위에다 넣기)
OR
방법2
오류 나면 link로 inedx.html head에 넣어서 가지고 온다

(오류 나왔으면 터미널 닫고 다시 npm start로 하기 열려 있는 터미널 닫고)

📌부족한 개념 정리
1. useEffect란?
-페이지기 처음 렌더린 되고 낭 후 useEffect가 무조건 한번 샐행 된다.
-useEffect에 배열로 지정한 useState의 값이 변경되면 실행 된다.
==>렌더링, 변수의 값, 오브젝트가 달라지게 되면 인지 하고 업데이트 해주는역할
2. onChange : 사용자의 입력이 어떠한 방법으로 변경이 될때 마다 발생
(사용자가 추가적 텍스트 입력, 다른 옵션 선택, 확인란 체크, 기타 등등)

1. axios (jquery ajax랑 똑같음)
2. useState, useEffect

const[people, setPeople] = React.useState();
React.useEffect(()=>{
}) ==> 계속 반복
//
React.useEffect(()=>{
},[])  ==> 새로고침 하면 한번만 실행
//
React.useEffect(()=>{
},[people])  ==> 의존성 주입으로 people바뀔때 실행

3. 리액트 에서 html코드를 리턴할때는 최상위 부모가 있어야 한다.

Hook이란?
->React 16.8버전에 새로 추가된 기능으로, 클래스형 컴포넌트의 단점을 극복하기 위해 나온 함수형 컴포넌트
EX)클래스형 컴포넌트

class App extends Component{
	render(){
		reuturn;
	}
}

EX) 함수형 컴포넌트

function App() {
	return;
}

함수형 컴포넌트가 나오게 된 이유
1. 클래스 문법이 어렵다
2. 축소가 어렵다
3. reloading신뢰성이 떨어진다.
4. 최신 기술 적용이 효과적이지 않다.
==>하지만 클래스 컴포넌트의 단점을 극복할 수 있지만 클래스 컴포넌트의 장점이 었던 state, life cycle을 직접 다룰 수 없다
==>이를 해결하기 위해 나온것이 Hook이다.

Hook의 특징, 기능
hook은 react 개념에 보다 직관적인 api를 제공, 상태에 관련된 로직을 재사용 하기 쉽다.
함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능

📌함수형 컴포넌트 에서 state를 사용하려면??

📢useState
const [count, setCount] = useState();
useState는 Hook의 기술
setCount로 count state를 변경하면 렌더린이 다시 일어난다
📢useEffect(데이터를 받거나, 구독하기, DOM을 직겁 조작할 경우 사용)
react의 컴포넌트 내에서 데이터를 가져오거나 구독하고, DOM을 조작하는 작업은 effects이다.
이는 다른 컴포넌트에 영향을 줄 수 도 있고 렌더링 과정에서 구현 불가능한 작업 이다.
📍1.정리가 필요 하지 않는 effects : react가 DOM을 업데이트한 후 추가로 코드를 실행하는 경우
(렌더링 이후 매번 수행 한다)
📍2.정리가 필요한 effects : 외부 데이터에 구독을 설정해야 하는 경우
🎈useState VS useEffect차이
📢useState : 상태를 관리
📢useEffedct : 컴포넌트가 렌더링 된 이후에 수행해야 하는 작업을 의미
[useEffect는 callback함수와 dependency를 받는다 -> callback 함수 Effect를 기억했다가 -> 컴포넌트가
렌더린 된 이후에 함수를 실행 한다.][컴포넌트 갱신 될때 마다 계속 실행]