https://codesandbox.io/s/portfolio-pu8p23?file=/src/Count.js:478-485 portfolio - CodeSandbox portfolio using @emailjs/browser, @emotion/react, @emotion/styled, @mui/icons-material, @mui/material, react, react-countup, react-dom, react-router-dom codesandbox.io 스크롤이 해당 영역에 들어왔을 때 이벤트 컨트롤 가능

구현하고자 하는 기능 해당 영역에 스크롤이 도착하면 원하는 애니메이션이 작동하는 클래스를 토글시키기 사용 element.getBoundingClientRect() DOM요소의 크기와 브라우저 뷰포트를 기준으로 상대적인 위치에 대한 정보를 제공 하는 객체를 반환합니다. getBoundingClientRect는 화면에서 잡은 dom이 어디에 위치한 지 알기 위해 사용합니다. return값은 해당 dom의 width, height, top, left, right, bottom, x, y이며 width와 height는 뷰포트 왼쪽 상단을 기준으로 한다. useRef() react에서는 querySelector 등의 dom을 선택할 수 있는 메서드를 사용할 수 없기때문에 이를 대신하는 useRef()로 dom을 ..

1. 패키지 설치 Font Awesome의 SVG 기반 아이콘을 활성화 시키기 위한 기본 패키지 설치 npm i @fortawesome/fontawesome-svg-core Font Awesome에 대한 패키지 설치 Solid, Regular, Light, Brands 4개의 카테고리가 있으며 이 안에 유/무료가 있음 무료로 제공되는 카테고리는 Solid, Regular, Brands이며 필요한 것만 설치하면 됨 npm i @fortawesome/free-solid-svg-icons npm i @fortawesome/free-regular-svg-icons npm i @fortawesome/free-brands-svg-icons 마지막으로 Font Awesome을 리액트 컴포넌트 형태로 사용할 수 있도록..

import {useState, useEffect} from "react"; function App(){ const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange => (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); // form 안의 button 기본값인 submit이벤트 차단 if(toDo === ""){ // toDo(input)에 아무것도 입력되지 않았으면 return; // 아무것도 실행하지 않고 빠져나옴 }; setToDos(currentArray => [toDos, ..

#Cleanup(정리) useEffect에 대한 뒷정리. 컴포넌트가 사라질 때 cleanup 함수가 호출됨 import Button from "./Button"; import styles from "./App.modules.css"; import { useState, useEffect } from "react"; function Hello() { // 화살표 함수 useEffect(() => { console.log("hi"); return () => console.log("bye"); }, []); // 기존 익명함수 useEffect(function () { console.log("hi"); return function () { console.log("bye"); }; }, []); return He..

#useEffect useEffect(() => {함수}, [조건]); 조건값이 변경될 때 마다 함수를 실행함 import { useState, useEffect } from "react"; function App() { const [counter, setCounter] = useState(0); const onClick = () => setCounter((prev) => prev + 1); console.log("i run all the time"); useEffect(() => { console.log("call api") }, []); return ( {counter} Click me ); } export default App; console.log를 기준으로 보면, "i run all the ti..