본문 바로가기

[Study] 개발 공부48

[React] React Transition Group 사용하기 아래 화면은 필터 종류에 따라 filteredProjects 라는 상태에 프로젝트 배열을 저장하여 보여주고 있다.하지만 React에서는 상태 변화나 DOM 요소의 변화가 발생할 때, 애니메이션이나 transition 효과가 적용되지 않는다.따라서 기존처럼 transition만 적용한다면, 아래와 같이 opacitiy transition 효과가 적용되지 않을 것이다. 이를 위해 컴포넌트가 DOM에 마운팅되고 언마운팅되는 상황에 애니메이션을 적용할 수 있도록 도와주는 React에서 자체적으로 제공하는 라이브러리가 있는데, 그게 바로 react-transition-group 이다. React Transition Group은 다음과 같은 컴포넌트 생애주기를 직접 제어할 수 있는 class를 제공한다.fade-e.. 2024. 11. 22.
[React] 스크롤에 따라 텍스트가 나타나는 효과 구현하기 스크롤에 따라 텍스트가 나타나는 효과 구현하기(Feat. getBoundingClientRect, useRef)   1. 화면에 보여줄 텍스트 라인을 보여줄 상태 생성하기[ "첫 번째 문장", "두 번째 문장", "세 번째 문장", "네 번째 문장", "다섯 번째 문장", ] - 각 문장들을 배열에 저장한다. // 스크롤 위치에서 보일 텍스트 index를 저장할 배열 const [visibleLines, setVisibleLines] = useState([]); - 현재 스크롤이 위치한 화면에서 보여줄 텍스트의 index를 저장할 number 빈 배열을 만들어 준다.- 예를 들어, 두 번째 문장 까지 보여준다면 [0, 1] 이 저장될 것이다. 2. u.. 2024. 11. 6.
[React] 모바일에서는 메뉴가 버튼으로 바뀌는 반응형 헤더 만들어보기 여태 반응형 웹 사이트를 제대로 구현해보지 못한게 아쉬워서, 포트폴리오에서는 반응형 웹 사이트를 만들어 보려고 한다! 웹에서는 기본적으로 헤더 메뉴가, 모바일에서는 메뉴 버튼을 누르면 메뉴가 보이도록 하고 디자인에도 차별점을 줘봤다. 1. isNavVisible 상태를 생성하고, toggleNav 함수를 햄버거 메뉴의 onClick에 연결한다.const [isNavVisible, setIsNavVisible] = useState(false); const toggleNav = () => { setIsNavVisible(!isNavVisible); }; 2. 모바일의 햄버거 메뉴 컴포넌트 을 모바일에서만 보이도록 미디어 쿼리를 설정해줬다. - 햄버거 메뉴 컴포넌트인 NavMobile과, 모바일용 N.. 2024. 11. 4.
styled-components+TS 에서 전역 스타일 변수 설정하기 1. 먼저 패키지를 설치한다// "styled-components" 설치npm i styled-components// "styled-components" 타입 정의 설치npm i -D @types/styled-components//"css reset" 설치npm i styled-reset 2. 아래와 같이 파일을 생성한다. 2-1. GlobalStyles.tscss reset 및 전역적으로 사용할 css를 설정해준다.import { createGlobalStyle } from "styled-components";import reset from "styled-reset"; // styled-reset 가져오기const GlobalStyles = createGlobalStyle` ${reset} // r.. 2024. 9. 10.

티스토리툴바