[React] React state, useEffect

state

• prop : 컨퍼넌트를 사용하는 외부자를 위한 데이터
• state : 컨퍼넌트를 만드는 내부자를 위한 데이터

// 상태 생성시

// **  원시데이터타입
Const [value, setValue] = useState(PRIMITIVE);
string number boolean

// **  범객체
Const [value, setValue] = useState(Object);
object, array

// 처리방벙이 달라짐 = 데이터 복제
newValue = {...vaue}
newValue변경 // 복제본 바꿈
setValue(newValue) 
// 컴퍼넌트 다시실행


newValue = [...vaue] //복제
newValue변경 // 복제본 바꿈
setValue(newValue)


// setValue시 value값이 변경이 있는지 확인함
// 변경시에만 컴퍼넌트 다시 렌더링

 

 

useEffect

• 상태값이 바뀌었을 때 동작하는 함수 작성가능
• 첫 번째 매개변수 함수
• 두 번째 매개변수 배열 - 의존성배열(이 배열이 변경될 때만 작동함)

useEffect(() => {
	fetch('http://api경로')
	//API비동기 통신을 위해 
	.then(res=>{
		return res.json();
		// 실제 json은 아니고 response응답임
		// json 메소드를 이용해서 json응답 반환
	}) 
}, []);
// 빈배열넣어줌
// 상태값과 무관하게 딱한번만 호출되게 하기위해

• 랜더링결과가 돔에 반영된 직후 작동함
  —> API호출 의 목적으로 사용
  —> 랜더링이 완료된후 최초의 한 번만 작동하게 하면 됨
• 두 번째 매개변 후 배열을 빈 배열로 넣어줌

 

JSON SERVER 이용

//json-server 글로벌(-g) 설치
npm install -g json-server

//json-server 3001번 포트에서 실행
json-server --watch ./src/db/data.json --port 3001