안녕하세요

1. 링크 이동 시 데이터 전달 첨부방법 Link 로 특정 주소로 라우팅 할 때 query 데이터를 전달할 수 있습니다. description 섹션으로 이동시킬 것이기 때문에 hash #description을 전달합니다. 2. 데이터 읽어들이기 const location = useLocation(); const isDescriptionIndex = location.hash.includes("description"); useLocation 함수를 이용하여 hash에 담긴 데이터가 description일 경우에는 true를 반환하도록 합니다. 3. 이동시킬 위치 정하기 const AttachDescriptionBoxRef = useRef(null); useRef를 이용하여 컴포넌트를 선택합니다. 4. 스크롤..

사이드 메뉴를 열면 배경이 스크롤이 되지 않도록 하고 싶을 때 const NavBar = () => { useEffect(() => { const scrollY = window.scrollY; const bodyStyle = document.body.style; bodyStyle.position = "fixed"; bodyStyle.top = `-${scrollY}px`; bodyStyle.overflowY = "scroll"; bodyStyle.width = "100%"; return () => { bodyStyle.cssText = ""; window.scrollTo(0, scrollY); }; }, []); return ( ... ); }; 사이드 메뉴 컴포넌트가 나타날 때 body에 css sty..

https://velog.io/@altjsvnf/TS-TypeScript%EC%97%90%EC%84%9C-Styled-component-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [TS] TypeScript에서 Styled-component 사용하기 TypeScript에서 styled-component를 사용해보자. velog.io https://sangjuntech.tistory.com/11 [Styled-component] styled-component 좀 더 똑똑하게 쓰기 안녕하세요. 오늘 포스팅할 주제는 'styled-component'입니다! 리액트를 사용하는 분이라면 다양한 css 라이브러리를 사용하실텐데 저는 CSS-IN-JS의 대표적인 라이브러리 중 하나인 style..

1. 컴포넌트에 다크모드 일 때는 박스쉐도우를 넣고 싶지 않다. 2. 컴포넌트에 darkMode 라는 프로퍼티를 만든다. 3. props에 대해서 darkMode가 아닐 때 box-shadow가 나타나도록 한다. 4. 컴포넌트의 타입에는 darkMode?:boolean 으로 타입을 지정해준다. const MainVisualImgBox = styled.div` box-shadow: ${(props) => !props.isDarkMode && `2px 2px 7px -2px ${props.theme.mainBlack}`}; `; 4-2. 베리에이션 여러가지 css를 한 번에 적용하고 싶을 때는 css`` 함수를 사용한다. const ToggleCircle = styled.div` position: absol..