React Effect Hook / Ajax

 

Side Effect

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수

React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생

 

Pure Function

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미

 

Effect Hook

API

useEffect((함수)=>{
}, [종속된 배열])

• 컴포넌트 생성 후 처음 화면에 렌더링(표시)
• 컴포넌트에 새로운 props가 전달되며 렌더링
• 컴포넌트에 상태(state)가 바뀌며 렌더링

 

Ajax(Asynchronous Javascript And XML)

 

 비동기 자바스크립트와 XML을 사용하는 기술

 

fetch

fetch(url)
.then((response)=>{
	서버로부터 데이터 응답시 response인자로 데이터 들어옴
    	그 데이터 실행 함수 입력
})
.catch(error => {
	오류 발생 시 출력함수
})