Side Effect
함수 내에서 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 합니다.
let name = '3000';
upper(name);
function upper(name){
name = name.toUpperCase();
}React에서의 Side Effect
- Network 요청하기
- 데이터 가져오기
- 수동으로 React DOM 수정하기
Pure Function
오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 말합니다.
let name = '3000';
upper(name);
function upper(name){
return name.toUpperCase(); // toUpperCase는 Immutable 메소드입니다.
}특징
- Side Effect가 없습니다.
- 어떠한 전달 인자가 주어질 경우 항상 똑같은 값이 리턴되어 예측 가능한 함수이기도 합니다.
useEffect
React 컴포넌트 내에서 Side Effect를 실행할 수 있게 해주는 Hook입니다.
실행
- 컴포넌트가 생성되었을 때(Mount)
- 컴포넌트가 사라졌을 때(unMount)
- 컴포넌트에서 특정 props가 변경될 때
- state가 변경될 때
사용방법
첫번째 인자로 함수를 입력받고, 두번째 인자로 배열을 입력 받습니다
deps에 특정 값을 넣으면 해당 값이 변할 때 첫번째 인자의 함수가 실행이 됩니다.
useEffect(함수, [deps...])
useEffect(()=>{
console.log('user의 값 변경')
},[user])아무 인자도 전달해 주지 않을 때는?
빈 배열을 넣었을 때
useEffect(함수,[])컴포넌트가 처음 생성될 때(Mount)만 Effect 함수가 실행됩니다. 주로 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 때 사용합니다.
아무것도 넣지 않았을 때
useEffect(함수)컴포넌트가 처음 생성될 때나 사라질 때, props가 업데이트 될 때, state가 업데이트 될 때 Effect 함수가 실행됩니다.
