[TIL] 2109015 오늘 공부는 useLayoutEffect, git push -force

 

useLayoutEffect라는 훅이 있다. 처음 듣는 훅이었는데 꽤나 유용한 것 같아서 공부해보았다.

useLayoutEffect

DOM이 변경되고 나서 동기적으로 실행된다. 즉 브라우저가 화면을 그리기 전에 실행된다. 컴포넌트들이 렌더되고 paint가 된다. 

스크롤 위치를 얻어오거나, DOM 엘리먼트 스타일을 조작할 때 사용하면 깜빡임이 없어서 그 때 쓰기 유용하다. 즉 최초 state값이 있는데, 이 값에 따라 렌더링 되어야하는 상황일때 useEffect는 최초 state값을 먼저 보여주고, re-render 되기 때문에 화면 깜빡임이 있다. 이때 useLayoutEffect를 쓰면 깜빡임이 없다.

좋은 예시가 있어서 가져왔다. 미세한 깜빡임의 차이가 있다.

 

useLayoutEffect 을 사용할 때, 

https://codesandbox.io/s/uselayouteffect-no-flash-ylyyg 

useEffect 을 사용할 때, 

https://codesandbox.io/s/useeffect-flash-on-render-yluoi

 

단점은, 내부 코드가 모두 실행되고 painting 작업을 거치기 때문에 로직이 복잡하면 사용자가 레이아웃을 보는데 시간이 오래걸린다. 보통은 대게의 작업을 useEffect로 사용하길 권장하고 있다.

 

 

어제 git revert를 하면서 오늘 git push가 안되는 현상이 발생했다.

error: failed to push some refs to

 

로컬 브랜치와 원격 브랜치의 연결점이 떨어져 버렸는데 강제로 원격 브랜치에 push 하려고 git push -f origin/내 브랜치 명령어로 했다. 과거 시점으로 commit을 돌리기 때문에 그 이후의 모든 커밋 히스토리가 사라진다. 

force push는 권장하지 않는 방법이라고 한다. 특히 공동으로 사용하는 브랜치에서 함부러 force push를 하면 다른 사람이 했던 커밋들이 유실될 수 있기 때문이다. 

이 브랜치는 나만 쓰는 브랜치여서 force push를 했었지만, 만약 공동으로 사용하는 브랜치라면 force push를 하지말고 그냥 새 브랜치를 새로 파서 진행하는것을 권장한다고 한다. 

git revert 잘 했다고 생각했는데 force push 때문에 또 헷갈리기 시작했다 ㅠㅠㅠㅠㅠㅠㅠ