생각보다 내가 모르는 부분이나 한번 공부하고 잊어버린 내용이 많았다.
오늘 Slider를 만들면서 정말 더 열심히 해야겠다는 생각이 든다.
React
React에서 이벤트 리스너 등록
import React, { useEffect } from 'react';
const ResizedComponent = () => {
const handleResize = () => {
console.log(`브라우저 화면 사이즈 x: ${window.innerWidth}, y: ${window.innerHeight}`);
}
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => { // cleanup
window.removeEventListener('resize', handleResize);
}
}, []);
return <div>브라우저 화면 사이즈 x: {window.innerWidth}, y: {window.innerHeight}</div>
}useEffect를 이용해서 화면 진입 시 이벤트리스너를 등록하고 종료 시 제거(return)
react-slick 불편 한 점
.slick-slide {
display: inline-block;
}공식문서만 봐선 나오지 않는 내용이다.
이것을 설정하지 않으면 화면 슬라이더 자식들이 제대로 보여지지 않는다.
그리고 슬라이더를 감싸는 wrapper에 overflow: hidden;을 넣지 않으면
불필요하게 가로 방향 스크롤이 생긴다.
Styled components가 가끔 적용이 안됨
css가 간헐적으로 적용안됨(더 면밀히 검토 필요)
- 코드 수정 후 새로고침 할때
- 리액트를 껏다키면 적용됨
- 로컬에서만 이런 문제가 있는것인지 좀 더 조사를 해야 됨
CSS
img 태그 부모 크기에 맞추기
const ItemRight = styled.div`
width: 55%;
height: 100%;
& img {
src: ${isMobile ? item.mobileImg : item.pcImg};
alt: ${item.title};
max-width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
`;img 태그는 크기가 제 멋대로 변하는 것 같아서 div태그에 background와 url로 이미지를 정하는 것을 선호했었다.
그렇지만 alt 속성이 없어서 좋은 방법은 아니었다.
이번에 img 태그로도 가능하다는 것을 알게 되었다.
// 크기를 부모에 맞춤
max-width: 100%;
height: 100%;
// 이미지가 찌그러지지 않게 함
object-fit: cover;
object-position: left;
이 부분은 내가 div에 background : center/cover 를 주던 옵션과 같다.
엔터가 포함된 text를 줄바꿈까지 보여주기
그냥 받아서 텍스트를 html로 띄우면 줄바꿈(\n)이 적용되지 않는다.
white-space: pre;css에 위 속성을 넣어주면 줄바꿈까지 적용된 글을 보여줄 수 있다.
pre태그를 사용해서도 가능하지만 pre태그를 사용하면 디폴트로 전해지는 font에 대한 설정이 깨지는 것 같다.
word-break: keep-all; // 단어 단위로 줄바꿈
//break-all : 문자 단위로 줄바꿈 const ItemWrapper = styled.div`
display: flex !important;
height: 320px;
max-width: 1200px;
margin: 0 10px;
margin: auto;
`;react-slict에서 고정적으로 inline-block이 설정되어 있었다.
그래서 flex로 바꾸고 싶어도 바뀌지 않았는데
!important를 붙이면 바꿀 수 있다.
참고 문헌
