Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 타입스크립트
- 이미지 파일 관리
- 멀티캠퍼스it부트캠프
- LG유플러스 유레카 프론트엔드 대면
- 유레카프론트엔드대면
- 유레카 부트캠프 프론트엔드
- React
- streaming metadata
- 부트캠프후기
- 유레카프론트엔드
- input="password"
- TypeScript
- 미니프로젝트
- LG U+
- 유플텍플
- 핏로그
- 입력처리방식
- sentry
- jandi
- 리액트
- 유레카
- 멀티캠퍼스부트캠프
- 유레카 프론트엔드 대면
- 마이배티스
- 엘지유플러스프론트엔드대면
- 웹시큐리티
- 프론트엔드
- 상태관리
- 나눔스퀘어
- 스프링부트
Archives
- Today
- Total
joooii
[CSS] 모달 열릴 때 뒷 배경 스크롤 방지 본문
useEffect(() => {
if (isOpenModal) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "auto";
}
}, [isOpenModal]);
React는 상관 없지만, Nest.js 환경에서는 SSR이 있기 때문에 document나 window가 서버에 존재하지 않아서 렌더링 시점만 조심하면 된다.
-> 위 코드로 써도 상관은 없다고 한다. useEffect는 브라우저에서만 실행되기 때문에 서버사이드에서 document를 참조하는 일은 없기 때문.
그래도 타입 안정성을 위해서 typeof document !== "undefined"를 추가해도 된다.
useEffect(() => {
if (typeof document !== "undefined") {
document.body.style.overflow = isOpenModal ? "hidden" : "auto";
}
}, [isOpenModal]);