3줄 요약
1. useEffect ux경험이 아쉬웠다.
2. useLayoutEffect는 DOM 그려지기전에 색칠에서 좋다
3. fragment는 <></> ===< Fragment> </ Fragment>
1. uselayoutEffect
useEffect 훅을 사용할 경우 DOM의 레이아웃 배치와 페인트가 끝난 후 이펙트 함수를 호출한다.
그럴 경우에 페인트가 되기전에 그려질 순 없을까라는 고민이 있었다.
https://merrily-code.tistory.com/46
useLayoutEffect 이펙트는 브라우저가 화면에 DOM을 그리기 전에 이펙트를 수행하여 첫 화면부터 반영하게 해준다.
useEffect의 이펙트는 DOM이 화면에 그려진 이후에 호출된다.
useLayoutEffect(() => {
effect
return () => {
cleanup
};
}, [input])
useEffect와 사용하는 법도 동일하다.
2.fragment
https://velog.io/@lilyoh/React-Fragments-%EC%82%AC%EC%9A%A9%EC%9D%B4%EC%9C%A0-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95
Fragment란 여지껏 이름도 모른채 빈칸으로 대체하세요 이렇게 소통하곤 했다
최근 <></>가 Fragment라는 이름을 알게 되었다.
명칭은 중요하니 정리하고자 이렇게 글로 남기게 되었다.
< Fragment> </ Fragment> 와 <> </> 이렇게 써도 되는데,
map에 사용할 경우 <>에는 key값을 달 수 없으니 그럴 경우에
< Fragment> </ Fragment> 선언해서 key값을 넣어주면 된다.
ux를 중시하는 개발자가 되는 것이 목표다.
useLayoutEffect를 사용해서 ux를 개선할 수 있을 거 같아서 좋다.
그리고 fragment를 활용하면 좀 더 시멘틱하게 코딩을 할 수 있을거 같다.
