Life cycle hook 개발 #3
Conversation
hyesungoh
requested review from
kooku0,
eunddodi and
hansol-FE
as code owners
Codecov ReportBase: 100.00% // Head: 100.00% // No change to project coverage 👍
Additional details and impacted files@@ Coverage Diff @@
## main #3 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 1 7 +6
Lines 21 46 +25
Branches 6 8 +2
=========================================
+ Hits 21 46 +25
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
Bundle SizesCompared against c1a7ed4 Route: No significant changes found Dynamic import: None found. |
| const didMountRef = useRef<boolean>(false); | ||
|
|
||
| useEffect(() => { | ||
| if (!didMountRef.current) { | ||
| didMountRef.current = true; | ||
| return; | ||
| } |
There was a problem hiding this comment.
18을 따로 대응할 생각은 없었어요 ㅋㅋㅋㅋ
아마 react18 dev에서 effect가 두 번 호출되는 사항을 말씀하신... 거죠..?
단순히 mount 시에는 실행되지 않게 하고, 디펜던시가 업데이트된 후에 실행되도록 작성하기 위한 부분이에요
논외지만 지금 생각해보니 did mount, did update에서
EffectCallback타입이 아니라VoidFunction타입이 더 적절할 것 같네요 ...
There was a problem hiding this comment.
네 맞아요. effect 두번 호출되는거.. ㅠ
| const STATE_CHANGE_BUTTON_TEXT = 'change'; | ||
| const mockCallback = jest.fn(); | ||
|
|
||
| const App = () => { | ||
| const [state, setState] = useState<number>(0); | ||
|
|
||
| useDidUpdate(mockCallback, [state]); | ||
|
|
||
| return ( | ||
| <div> | ||
| <button type="button" onClick={() => setState((prev) => prev + 1)}> | ||
| {STATE_CHANGE_BUTTON_TEXT} | ||
| </button> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| afterEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| it('마운트 시 effectCallback이 실행되면 안된다', () => { | ||
| render(<App />); | ||
| expect(mockCallback).not.toBeCalled(); | ||
| }); |
There was a problem hiding this comment.
뭔가.. 간단하게 만들 수 있을 것 같은뎅..
import { renderHook } from '@testing-library/react-hooks';
import useDidMount from './useDidMount';
describe('useDidMount', () => {
const effectCallback = jest.fn();
beforeEach(() => {
effectCallback.mockClear();
});
it('default export이여야 한다', () => {
expect(useDidMount).toBeDefined();
});
it('effectCallback이 실행되어야 한다', () => {
renderHook(() => useDidMount(effectCallback));
expect(effectCallback).toBeCalled();
});
it('rerender 시 1번 실행되어야 한다', () => {
const { rerender } = renderHook(() => useDidMount(effectCallback));
rerender();
expect(effectCallback).toBeCalledTimes(1);
});
it('mockCallback이 실행되어야 한다', () => {
renderHook(() => useDidMount(effectCallback));
expect(effectCallback).toBeCalledTimes(1);
});
it('mockCallback은 상태가 변해도 1번 실행되어야 한다', () => {
const { rerender } = renderHook(() => useDidMount(effectCallback));
rerender();
expect(effectCallback).toBeCalledTimes(1);
});
});
맞아요 ㅋㅋㅋㅋ 지금만 해도 index의 테스트 파일들도 있어서 ㅋㅋㅋㅠ 그럼 평소에 이렇게 가져가시나요? 이렇게도 가져갈 수도 있을 거 같고 .. 아니면 한 depth 더 들어갈 수도 잇을 거 같구요 급한 건 아니라, 수요일이나 토요일 회의 시간에 의견 나눠봐도 좋을 거 같슴다 ~ 의견 감사드려요 👍 👍 |
Deploying with
|
| Latest commit: |
3dae954
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8365aa7a.12-team3-web.pages.dev |
| Branch Preview URL: | https://feat-life-cycle-hooks.12-team3-web.pages.dev |
|
useEffect가 모두 가지고 있는 기능이고 이걸 세분화해서 가독성을 높인건 알겠는데 성능적인 이점은 뭐가 있는지 궁금하네요... 저 아직 리액트 초보입니다.ㅠㅠ |
말씀하신대로 가독성이 중점적인 이유입니다! 제가 생각하기에 성능적인 장점이라면, useEffect(() => {
마운트때만해야되는일();
업데이트시에만해야되는일();
return 언마운트시에해야되는일();
}, [디펜던시]);이처럼 한 effect에 작성하게 되면, 불필요하게 실행되는 코드들이 있지만 useDidMount(() => {
마운트때만해야되는일();
});
useDidUpdate(() => {
업데이트시에만해야되는일();
}, [디펜던시]);
useWillUnmount(() => {
언마운트시에해야되는일();
}); 이렇게 분리하게 되면 불필요하게 실행되는 코드들을 방지할 수 었어 성능적인 이점이 생긴다고 생각합니다. useEffect(() => {
마운트때만해야되는일();
});
useEffect(() => {
// did mount시 실행 됨
업데이트시에만해야되는일();
}, [디펜던시]);
useEffect(() => {
return 언마운트시에해야되는일();
}); 물론 이렇게
|
|
useEffect 내에서 상황에 따라 분기하는 게 다소 성가시다고 느꼈었어서 저는 라이프사이클 훅 써보면 좋을 거 같아유 무지성으로 useEffect에 집어넣는 대신 코드 짤 때 한 번 더 생각할 수 있을 거 같고요 |
🤔 해결하려는 문제가 무엇인가요?
useEffect만으로 life cycle을 접근, 제어하는 것보다 가독성이나 성능적으로 이점이 있다고 생각되어,저는 이렇게 쓰곤 해요. 여러분의 의견이 궁금해용
🎉 어떻게 해결했나요?
useDidMount,useDidUpdate,useWillUnmount라는 이름으로 개발 및 테스트 코드를 간단히 적어 봤어요.useDidMount에서 default export를 하고, 같은 dir의index에서 default export를 하기 위해no-restricted-exportsrule을 해제했어요no-unused-varsrule을 활성화 했어요. 대신_는 사용하지 않아도 되도록 했어요test:watchscript를 추가했어요📚 Attachment (Option)
일단 파일 명을 일반적인 카멜 케이스 (
useDidMount)로 적어 봤는데,hook의 경우 케밥 케이스(
use-did-mount)도 읽기 편하더라구요.선호하시는 게 있나 궁금해요
그리고 맞춤법이나.. 영어 작문이 이상한 부분이 있다면 ... 거침없이 혼내주세요