useState&useEffect

1. React Hook

React는 클래스형, Hook는 함수형
리액트와 리액트 훅은 다른 라이브러리가 아니며, 클래스형으로 코드를 작성하는지 함수형으로 작성하는지의 차이이다.
함수형의 리액트 훅은 컴포넌트를 재사용하기 쉽고 코드가 짧아 가독성이 좋다.

impot React from 'react' 
const Test = () => {
	return (
			<div>test</div>
		)
}
export default Test
//리액트 훅의 기본형태
//변수의 이름은 항상 대문자로 시작
//return 안의 코드들은 JSX라 불린다.

2. useState

getter,setter로 이루어져 있으며,
getter - 변수값을 가져오는데 사용
setter - 변수의 값을 변경하는데 사용

impot React, {useState} from 'react' 
const Test = () => {
	const [name, Sername] = useState();
	return (
			<div>test</div>
		)
}
const [name, setName] = useState(); // useState 사용법
const 다음 두개의 변수를 지정 2번째 변수의 이름앞에 set을 붙여 setter임을 알려주는게 좋다

const [name, setName] = useState();
//아무런 값 없이 초기화

const [name, setName] = useState(10);
//숫자 int 계열의 초기화

const [name, setName] = useState('');
//string 문자 계열의 초기화

//처음값이 불분명하다면 ()안에 빈값으로 사용

3. useEffect

페이지가 처음 렌더링 되고 난 후 useEffect가 무조건 한번 실행된다.
또한 useEffect에 배열로 지정한 useState의 값이 변경될때 실행된다.
(렌더링, 변수의 값, 오브젝트가 달라지게 되면 그것을 인지하고 업데이트해주는 함수이다.
useEffect는 콜백 함수를 부르며, 여러개의 함수를 동작시킬 수 있다.)

useEffect(()=>{});
//가장 기본형태이나 사용하지 않음

useEffect(()=>{}.[])
//useEffect를 렌더링 후 단 한번만 실행하고 싶을때 사용

const [name,setName] = useState();
useEffect(()=>{},[name])
//렌더링후 한번, 배열안 변수값이 변화할때마다 실행