React - HookFlow / TIL - 16
회고
- 막연히 동작이 돌아가는것에 심취해 있던 누군가 나에게 정말 간단한 실행순서에 대해 물어 보았을때 나는 그 물음에 제대로 대답할 수 있을까?
Hook Flow
- hook들의 호출 타이밍
useEffect
->render
가 끝난 뒤
update시
->useEffect clean up
/useEffect
dependency array
-> 전달 받은 값의 변화가 있는 경우에만
예제 코드
-
부모 컴포넌트 (App) 과 자식 컴포넌트(Child) 가 있다. 화면에 렌더는 App 컴포넌트가 담당한다.
-
여기서 과연 이렇게 여러개의 콘솔들의 순서들은 어떻게 될까?
const Child = () => {
console.log(' Child render start');
const [text, setText] = React.useState(() => {
console.log(' Child useState');
return '';
});
React.useEffect(() => {
console.log(' Child useEffect, no deps');
return () => {
console.log(' Child useEffect [Cleanup], no deps');
};
});
React.useEffect(() => {
console.log(' Child useEffect, empty deps');
return () => {
console.log(' Child useEffect [Cleanup], empty deps');
};
}, []);
React.useEffect(() => {
console.log(' Child useEffect, [text]');
return () => {
console.log(' Child useEffect [Cleanup], [text]');
};
}, [text]);
function handleChange(event) {
setText(event.target.value);
}
const element = (
<>
<input onChange={handleChange} />
<p>{text}</p>
</>
);
console.log(' Child render end');
return element;
};
const App = () => {
console.log('APP render start');
const [show, setShow] = React.useState(() => {
console.log('APP useState');
return false;
});
React.useEffect(() => {
console.log('APP useEffect, no deps');
return () => {
console.log('APP useEffect [Cleanup], no deps');
};
});
React.useEffect(() => {
console.log('APP useEffect, empty deps');
return () => {
console.log('APP useEffect [Cleanup], empty deps');
};
}, []);
React.useEffect(() => {
console.log('APP useEffect, [show]');
return () => {
console.log('APP useEffect [Cleanup], [show]');
};
}, [show]);
function handleClick() {
setShow(prev => !prev);
}
console.log('APP render end');
return (
<>
<button onClick={handleClick}>Search</button>
{show ? <Child /> : null}
</>
);
};
ReactDOM.render(<App />, rootElement);
해석
기본적으로 버튼이 처음에 렌더가 이루어지고 show
상태가 true
Child 컴포넌트가 렌더링 된다.
인풋에 타이핑을 하게되면 Child 컴포넌트의 text
가 출력된다.
- 초기
App의 render start , state , end => App의 useEffect
APP render start
APP useState
APP render end
APP useEffect, no deps
APP useEffect, empty deps
APP useEffect, [show]
- 버튼을 클릭했을때
Child의 render start state end => App의 useEffect CleanUp => Child의 useEffect => App의 useEffect
APP render start
APP render end
Child render start
Child useState
Child render end
APP useEffect [Cleanup], no deps
APP useEffect [Cleanup], [show]
Child useEffect, no deps
Child useEffect, empty deps
Child useEffect, [text]
APP useEffect, no deps
APP useEffect, [show]
- 인풋에 타이핑 했을때
Child의 render start end => Child의 useEffect Cleanup => Child의 useEffect
Child render start
Child render end
Child useEffect [Cleanup], no deps
Child useEffect [Cleanup], [text]
Child useEffect, no deps
Child useEffect, [text]
- 다시 검색버튼을 누르고 child 컴포넌트가 사라졌을때
App의 start end => Child의 useEffect Cleanup => App의 useEffect Cleanup => App의 useEffect
APP render start
APP render end
Child useEffect [Cleanup], no deps
Child useEffect [Cleanup], empty deps
Child useEffect [Cleanup], [text]
APP useEffect [Cleanup], no deps
APP useEffect [Cleanup], [show]
APP useEffect, no deps
APP useEffect, [show]
Author And Source
이 문제에 관하여(React - HookFlow / TIL - 16), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jujihong2/React-HookFlow-TIL-16저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)