https://ko.legacy.reactjs.org/docs/hooks-effect.html
Life Cycle
react component Life Cycle
a. Mount
- 컴포넌트의 생성, 최초 렌더링되는 순간임
A 컴포넌트가 Mount 되었다 = A 컴포넌트가 처음 렌더링 되었다
활용) 컴포넌트에서 초기화 작업을 수행,
서버에서 데이터를 요청 및 화면 출력 작업
서버와 통신이 불가능한 경우 => exception 컴포넌트로 이동
react router 활용.
b. Update
- 컴포넌트가 다시 렌더링 되는 순간, 즉 리렌더링 되는 순간임
A 컴포넌트가 업데이트 되었다 = A 컴포넌트가 리렌더링 되었다.
활용) 상태 변수의 변화에 따른 처리를 수행할 때 사용.
// Update - 리렌더링, 상태변수 변경하기
const isMount = useRef(false);
useEffect(() => {
if (!isMount.current) {
isMount.current = true;
return;
} else {
console.log("");
}- deps(의존관계 배열) 이 존재하지 않음.
life cycle 의 update 를 기준을 개발자가 별도로 정의해서 사용 가능함.
어떠한 이벤트가 클릭 되었을 때만 life cycle 의 update 로 인정하겠다는 것.
두번째 매개변수인 의존관계 배열을 매개변수로 전달하지 않았음을 확인할 것!
c. UnMount
- 컴포넌트가 화면에서 사라지는 순간, 렌더링에서 제외되는 순간임
A 컴포넌트가 UnMount 되었다 = A 컴포넌트가 화면에서 사라졌다.
활용) 컴포넌트가 사용했던 메모리를 정리 (Clean Up)
const (이름) = () => {
useEffect( () => {
return () => { 실행할 문장 };
}, [])
};Life Cycle 순서
Mount (컴포넌트 생성) -> Update (컴포넌트의 상태 변화) -> UnMount(컴포넌트 소멸)
useEffect()
렌더링 자체에 의해 발생하는 부수 효과를 특정하는 것으로, 특정 이벤트가 아닌 렌더링에 의해 직접 발생한다.
1. useEffect 선언하기
useEffect(() => { 실행할 문장 }, []) 첫 번째 매개변수 : callback 함수,
두 번째 매개변수 : 배열 (option임. 넣어도 되고 안넣어도 됨.)
2. useEffect 의 동작
- deps (Dependency Array), 의존성 배열.
deps 에는 여러 개의 의존값이 올 수 있음.
- 컴포넌트 내에서 원하는 상태 변수의 값이 변경되었을 때 까지만 callback 함수가 실행됨.
callback 함수는 count 상태 변수에 의존하고 있는 상황임.
3. useEffect() 실행과 관련된 이해
Q. count 를 의존하고 있으므로 useEffect의 callback 함수를 사용하지 않고도, event handler (setCount) 에서 상태변경 함수를 호출한 후에, 변경된 상태값(count) 를 사용하면 되지 않나용 ?
A. 개소리하지 마십셩 . 안됨니다.
setCount 는 비동기 함수이기 때문에 useEffect() hook 을 사용해야 함.
정리하면 React 에서 state (상태) 는 비동기로 동작하기 때문에, 변경된 값에 따라서 부가적인 작업을 할 경우에는 반드시 useEffect Hook 을 사용해야 함.
(코드를 보아라 )
useEffect(() => {
console.log(`count: ${count}`);
}, [count]);
// event handler 만들기 (버튼클릭 되었을 때 실행되는 함수. )
const onClickButton = (value) => {
// 상태 변경 함수.(setCount) 호출은 되었으나, 완료가 되가 전에
// consol.log()가 호출된 것
// 순차처리가 되지 않았으므로 비동기 처리임.
setCount(count + value);
console.log("event handler : " + count);
};
