# Effect

jsonkim

이 글은 Effect-TS를 공부하며 개인적인 목적으로 정리한 내용입니다. 내용에 오류가 있을 수 있으며 잘못된 내용은 댓글 등을 통하여 알려주시면 최대한 반영하도록 하겠습니다. 본문은 평서문으로 작성되었으며 여기에 사용된 소스 코드는 이곳에서 찾아보실 수 있습니다. 각 챕터별로 커밋의 diff를 함께 보시는걸 추천드립니다. 이 포스팅은 ChatGPT와 함께 작성하였습니다. 들어가며 Effect-TS(이하 Effect)는 TypeScript 라이브러리로 Scala의 ZIO에 큰 영향을 받아 개발되었다

tjdgus9773

inputTag 복습 본문 transform 사각형의 각이 바뀌는 것을 transform이라고 한다 rotate(xdeg) x도 기울인다 45도 제자리 반대 45도 scale(x,y) x : 가로 몇배 y: 세로 몇배 2배 원래대로 translate(x,y) 오른쪽으로 이동(왼쪽은 음수) 50px만큼 오른쪽이도 원래대로 본문 effect fast 빠르게 slow 느리게 hide() 숨긴다 show() 보여준다 toggle() 보여주고 숨긴다 slideUp() 슬라이드해서 숨기기 slideDown() 슬라이드해서 보이기 slideToggle() 슬라이드해서 숨기기 보이기 fadeOut() 천천히 숨기기 fadeIn() 천천히 보이기 fadeToggle() 천천히 숨기기 보이기 fadeTo() 본문 effect 문제 본문

hongregii

아니, 공식문서에서 useEffect가 이렇게 늦게 나온다고? 원래 안그랬잖아... 심지어 useRef보다도 늦게 나오고, 심심지어 둘 다 리액트 밖으로 나가고 싶을 때 이런 탭에 있다니! 의역이다. 원문은 Escape Hatches. 차근차근 Effect가 뭔지 다시 한 번 살펴보자. 새로 바뀐 리액트 공식문서 선생님이 자세히 설명해 줄 것이다. 몇몇 컴포넌트들은 외부 시스템과 동기화 Synchronize 해야 한다. 예를 들어, 리액트 State에 기반해서 리액트가 아닌 컴포넌트를 바꾸고 싶을 때나, 서버와 통신할 때, 컴포넌트가 화면에 나타나면 분석 로그를 띄우고 싶을 때 등. Effect는 렌더링 잉후에 어떤 코드를 실행하게 해준다. 컴포넌트를 리액트 밖의 어떤 시스템과 동기화 할 수 있게끔... > 이번 장에서는.. Effect가 뭔지 Effect vs 다른 events Effect 선언하기 불필요한 Effect

concho

📓 Scroll Animation 스크롤에 따라서 svg path 그리기 ( with. stroke-dasharray & stroke-dashoffset) stroke-dasharray 선을 대쉬 형태로 만들기 (값을 부여한 만큼 대쉬길이가 늘어남) > stroke-dasharray: (홀수번째 인자) (짝수번째 인자) ... → 홀수 : 대쉬의 길이 | 짝수 : 공백의 길이 > > 📍 하나의 인자만 주어지면, dasharray가 path와 같으면 svg가 모두 보인다 > 📍 path의 총 길이 구하는 JS 함수 → path.getTotalLength( ) = 1000 > > ex) 길이가 1000인 path 요소가 있을 때 stroke-dasharray : 100 100 이면, 대쉬의 길이 100과 공백의 길이 100이 1000이 될때까지 반복 ![](https://velog.velcdn.com/images/concho/post/c9337897-9

concho

📓 Ripple Effect > 1. div 버튼 위로 가상요소 :after 속성으로 원 그리기 원의 중심 : 버튼 내 마우스를 클릭한 위치 원의 반지름 : 버튼의 한쪽 끝 부터 반대쪽 대각선 끝 radius : Math.sqrt(w * w + h \* h) ✨ codepen !codepen[ohsuji/embed/rNrXbyv?default-tab=js&editable=true] ✦ 출처 : rudtjd2548/yummy-coding

concho

📓 text flip effect ✨ codepen !codepen[ohsuji/embed/VwBovbG?default-tab=js&editable=true] ✦ 출처 : rudtjd2548/yummy-coding

pablaw7

리액트를 시작하며 리액트는 SPA(Single Page Application) 구조를 지니는 Java Script의 UI 라이브러리이다. 주로 기능별로 나눈 다양한 컴포넌트(Component)를 모아서 페이지를 구성하게 되고 JSX 문법을 사용해서 작성하게 된다. JS 기반 유명 프레임워크, 라이브러리 중에서 가장 널리 쓰이고 있다. (출처 - trends.builtwith.com) 프론트엔드 기술 스택으로는 거의 필수적이기 때문에 리액트의 주요기능(hook)과 문법, 개념을 이해하고 학습하는 것이 중요하다. 리액트의 주요 기능 State 리액트에서 핵심이 되는 기능으로 특정한 값 상태에 따라서 해당 값에 관련된 요소만 업데이트 되기 때문에 페이지가 효율적으로 동작하는 것이 가능하

dbstjrwnekd

Hooks는 Class없이 상태를 관리할 수 있도록 도와준다. Effect hooks는 함수형 컴포넌트 내부에서 side effect를 실행하도록 도와줍니다. 대표적인 "side effect"의 예시로 Data fetching, setting up a subscription, manually changing the DOM 등이 있습니다. > React class에 익숙하다면 useEffect를 componentDidMount, componentDidUpdate, componentWillUnmount의 조합으로 볼 수 있습니다. side effect는 clean-up의 필요 여부에 따라 크게 2가지로 나뉠 수 있습니다. (clean-up이 필요한 effect, 필요 없는 effect) Effects Without Cleanup 리액트가 DOM을 업데이트한 후 추가적인 코드를 실행시켜야 하는 상황이 있습니다. Network request, manual DOM mutati

jujusnake

해당 포스트는 코드아카데미의 React 101 강의의 필기입니다. useEffect 첫 렌더링 이후에도 어떤 동작을 실행시키기 위해 사용하는 훅. Mounting, Updating, Unmounting phase에 필요한 side effect를 실행시킬 수 있다. Effect Hook의 예시 useState 훅과 마찬가지로 useEffect 훅을 import 해야함 useEffect의 첫번째 인자는 실행시킬 콜백 함수 = effect 첫 렌더링 시 DOM을 렌더링하고, 그 이후에 effect를 실행시킨다 (일단 처음은 무조건 실행) 이후 재렌더링시 계속 실행시킨다 (두번째 인자값에 따라 다름) Clean Up Function 사용이 끝난 코드들은 제거를 해주어야 memory leak를 방지할 수 있

dnjswn123

전체 코드 input창에 이벤트발생할때마다 API를 매번 새로 호출하고 있다. 매우 별로. 검색을 예로 들면, console.log("SEARCH FOR", keyword); 를 하면, 입력창이 변할때마다 인식하는건 좋은데, counter라는 state가 변할때도 검색이 되는 것. 현재 useEffect() 적용되지 않은 2개의 콘솔이 동시에 작동하고 있기 때문. > 목표: 특정코드만이 변화했을 때 원하는 코드를 실행하도록

dnjswn123

state에 변화가 생길때마다 렌더링은 매번 일어난다. 만약 그게 싫다면? 특정 코드는 첫번째 렌더링에서만 실행되게 하고 싶다면? 예를 들어, "call an API"는 처음 실행될때, 그리고 onClick이 발생해 변화가 생길때마다 호출된다. 만약 처음 실행될때만 위의 콘솔로그를 실행하고 싶다면? useEffect import { useState, useEffect } from "react"; useEffect는 2개의 인자를 가진 함수로, (한번만 실행하고 싶은 코드, ㅁㅁㅁ) 항상 실행될 "I run all the time" 와 한번만 실행시킬 "I run only Once." 가 있다. useEffect(한번만실행시킬함수, 빈 array) 를 작성한다. ![](https://images.velog.io/images/dnjswn123/post/e852e88b-17e4-4a1c-a7e9-2a852d2a4b4f/Cap%20

wjstkwhwjdgus

useEffect

kimbyungchan

해당 이미지는 dissolve 효과를 셰이더로 구현한것이며 셰이더를 조금만 익혀도 쉽게 만들 수 있는 효과입니다. 요즘에 인터랙티브 웹, 마이크로 인터랙티브 등 UX를 위한 효과들이 중요해지고 있습니다. 기존 canvas, css로 표현하던 효과를 shader를 통해 극대화 시켜봅시다. 🤔 개요 이런 효과를 개발할 수 있는 개발자가 몇이나 있을까요!? > 🤭 나는 언제 저렇게 멋있는 효과를 구현하지... 항상 예쁘게, 멋지게를 외치는 기획자와 임원진들의 니즈를 충족시키기 위한 G

fdsa09876

useEffect 이번에는 useEffect 라는 Hook 을 사용하여 컴포넌트가 처음 나타났을 때, 사라질 때, 특정 props가 바뀔 때, 함수를 넣어서 작업을 수행하는 useEffect입니다. > 클래스형과 단순 비교하면 위와 같습니다. useEffect를 이해하기 위해서는 clean up함수와 effect함수를 알고 넘어가야 좋습니다. > Effect 이펙트 함수는 useEffect의 본 역할을 한다고 생각할 수 있습니다. 특정한 작업을 처리하는데요. 여기서 '어느 시점에 작업을 처리하는가?' 이 궁금증을 해결해야만 useEffect를 이해하겠죠. 질문에 대한 답은 렌더링 이후 발생한다 입니다. 이해를 돕기 위한 과정을 보면 > 렌더링 => 돔 업데이트 => 이펙트 컴포넌트가 렌더링을 하고 결과물을 리액트에게 알립니다. 이 과정에서 리액트는 '이펙트' 함수를 기억합니다. 그리고 브라우저를 통해 DOM을 업데이트 합니다. 그리고 나서 이펙트를