JavaScript/React5 ContextAPI 사용자 정의 훅이 있는 팩토리패턴 createStateContext를 구현 초기값을 받아 상태를 반환하는 useValue 사용자 정의 훅 사용 useState를 사용하여 state와 setState함수 튜플을 할당 Provider, 사용자 정의 훅을 튜플로 반환 반복적인 코드를 줄이면서 위의 방법과 동일한 기능을 제공 // createStateContext const createStateContext = (useValue: (init? : Value) => State) => { const StateContext = createContext(null); // 공급자 const StateProvider = ({ initialValue, children } : { initialValue?: Value; children?: ReactNode; .. 2024. 4. 10. [React.JS]/[리액트] 특정라인수 이상 text-overflow: ellipsis 처리와 ellipsis 더보기/접기 1. 특정 라인 수 이상일 경우 ellipsis 처리하기 일반적으로 아래의 CSS 속성들을 이용해 다중 줄수 ...(ellipsis) 처리를 한다. overflow: hidden; word-break: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; 요소의 내용이 자신의 상자를 벗어날 경우, 초과된 부분을 숨김으로 처리 word-break: normal; 단어의 줄 바꿈을 일반적인 방식으로 처리. 긴 단어가 요소의 너비를 벗어날 경우, 단어의 일부를 다음 줄로 옮기지 않고, 단어 전체를 다음 줄로 이동 text-overflow: .. 2024. 1. 1. window.scroll smooth 크로스브라우징 이슈 window의 객체의 scrollTo API에 behavior: "smooth" 속성이 있다. 크롬에서는 smooth 하게 잘 동작을 하나 iOS / safari 에서는 정상 작동이 되지 않는다. 그러하여 폴리필이 필요하고, https://www.npmjs.com/package/smoothscroll-polyfill 해당 라이브러리를 이용해 이슈를 해결한적이 있다. 폴리필을 이용해 브라우저에서 지원해주지 않는 기능을 변환하여 사용할 수 있다. import smoothscroll from 'smoothscroll-polyfill'; ... const scrollToTop = useCallback(()=> { window.scrollTo({top: 0, left:0, behavior: 'smooth'}), .. 2023. 3. 30. [React] 리액트 성능 최적화 TODO 프론트 엔드 성능 최적화 키워드로 구글에 검색을 하게 되면 이론부터 시작하여 정말 무수히 많은 자료와 레퍼런스들이 있습니다. 웹 브라우저의 동작원리부터 시작하여 차근차근 성능 최적화가 무엇이고 왜 필요한지에 대하여 자세한 내용들이 나와져 있습니다. 개발에서는 원리를 알아야 그 행위를 하는것에 의의가 있는것이 맞다고 생각합니다. 최적화란 단순하게 생각하여 사용자에게 좀 더 빠르고 더 나은 UI/UX를 제공해주는 것이라 생각합니다. 개발 시 체크하면 좋은 내용 1. React 최적화 useMemo useCallback 가상화 list(react-window, react-virtualized) pure component 함수 memoization redux reselect lazy loading memo sh.. 2023. 1. 14. 이전 1 2 다음
