분류 전체보기 (200) 썸네일형 리스트형 [week 06] 이벤트 전파 및 이벤트 제어 & 디바운스와 스로틀 안녕하세요호 웹 YB 김고은입니다. 이번주는 자바스크립트 딥다이브가 아닌 특별한 주제로 아티클을 작성하게 되었습니다. 이벤트 전파 및 이벤트 제어와 디바운스 그리고 스로틀을 다루고자 하는데, 기존과 달리 개념 위주보다는 예제와 함께 설명하면서 어떤식으로 이걸 활용해볼 수 있는지를 중심으로 이번주차 정리해보겠습니다. 이벤트 전파 및 이벤트 제어이벤트 전파는 다음 2가지 양상으로 발생되게 됩니다. ☑️ 이벤트 버블링 (event bubbling) & 캡처링 (capturing)이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상 (마치 물속에서 거품이 위로 올라가는 듯해서 .. 🏄♀️ 리심스 7주차 - Concurrent Mode Concurrent Mode와 Suspense는 데이터 로딩과 UI 렌더링의 효율을 높이고 사용자 경험을 개선하기 위해 리액트 최신 버전에 새롭게 도입된 기능이다.Concurrent Mode동시성(Concurrency)이란?여러 작업을 작은 단위로 나눈 뒤 그 작업들 간의 우선순위를 정하고 작업을 번갈아 수행하는 것.👉 실질적으로는 하나에 한 번의 작업을 처리하는 것이나, 빠른 작업 간의 전환으로 인해 하나의 시스템이 여러 작업을 동시에 처리하는 것처럼 보이게 한다. 리액트에서의 동시성 (Concurent Mode) 자바스크립트는 싱글 스레드 언어로, 하나의 작업이 실행되는 동안 다른 작업은 block된다. 기존 렌더링은 동기적 처리로 이루어졌으며, 리액트가 렌더링 작업을 시작하면 중간에 중단할 수.. [Week 7] Concurrent Mode, Suspense 1. Concurrent Mode동시성이란?동시성(Concurrency)은 작업을 동시에 처리할 수 있는 상태를 의미하며, 이를 위해 작업을 더 작은 독립적인 단위로 나누어 구조화하는 방식을 말한다.리액트에서의 Concurrent Mode자바스크립트는 싱글 스레드 언어로, 순차적으로 작업을 실행한다. 따라서, 작업이 실행되는 동안 스레드는 해당 작업이 끝날 때까지 블록되며 다음 작업은 실행되지 않는다. 하지만 React 16 이전에는 렌더링이 동기적으로 이루어졌으며, 작업이 긴 경우 브라우저의 메인 스레드가 차단(blocking)되어 사용자 입력이나 애니메이션 같은 작업을 처리하지 못했다.React 16에서는 렌더링 엔진을 새롭게 설계한 Fiber 아키텍처가 도입되면서, 렌더링 작업을 더 작은 단위로 나.. [week 7] Effect ✨ 안녕하세요! 물결웹팟 OB 박채연입니다! 😋 7주차엔 Effect로 동기화하기 / Effect가 필요하지 않은 경우 부분을 읽고Effect에 대해 딥다이브 하는 내용이었는데요! useEffect을 필요할 때 적절하게 사용하란 이야길 많이 들었지만,그 이유에 대해 깊게 파본 적은 없었던 것 같아서, 이번에 확실히 공부할 수 있었던 것 같아요!그럼 바로! Effect에 대해 알아봐요! 💨 📍 Effect가 무엇일까Effect를 사용하면, 렌더링 후 특정 코드를 실행하여, React 외부의 시스템과 컴포넌트를 동기화 할 수 있다.Effect가 무엇인지부터 차근차근 알아보자 ! ✨ 렌더링 코드를 주관하는 로직- 컴포넌트의 최상단에 위치- props와 state를 적절히 변형- 결과적으로 JSX 반.. [week7]탈출구 - Effect로 동기화하기, Effect가 필요하지 않는 경우, 커스텀 Hook으로 로직 재사용하기 안녕하세요. 웹 파트 YB 한수정입니다.벌써 마지막 7주차라니... 솝트하면서 시간이 정말 빨리 지나간 것 같아요.어젠 2차 행사 끝나고 집에 늦게 들어갔더니.... 아티클 시작하겠습니다 !!오늘은 Effect로 동기화하기, Effect가 필요하지 않는 경우, 커스텀 Hook으로 로직 재사용하기에 대한 아티클입니다. 내용이 많다보니, Effect가 필요하지 않는 경우에 대해 자세히 알아보도록 하겠습니다. Effect로 동기화하기EffectReact에서 Effect는 렌더링 과정에서 발생하는 부수 효과(side effects)를 처리하기 위한 메커니즘입니다. 이는 컴포넌트의 렌더링과 외부 시스템(네트워크 요청, 브라우저 API, 써드파티 라이브러리 등)을 동기화하는 데 주로 사용됩니다.컴포넌트 내부 로직.. [week 7] - Effect가 필요하지 않은 경우 알아보기 안녕하세요 ~ YB 김가현입니다.이번 주는 useEffect에 대해 자세히 알아볼 수 있는 기회였는데요 ..알면 알수록 어려운 훅인 것 같습니다. 항상 그래서 언제 사용하는거고, 사용하지 말라는거지 ? 싶었는데 Effect가 필요하지 않은 경우에 대해 상세히 안내해줘서, 예시를 차근차근 이해해보는 시간을 가졌답니다 ! 시자개볼게요 .. 🔎 Effect ?Effect는 컴포넌트가 렌더링될 때 부수 효과(Side Effect)를 수행하기 위해 사용하는 기능이다.보통 useEffect 훅을 통해 구현된다.리액트에서 Effect는 렌더링 자체에 의해 발생되며, 커밋이 끝난 후 화면 업데이트가 이루어지고 나서 실행된다. 🔎 useEffect 구조리액트에서 라이프 사이클은 크게 3단계 (Mount → Upd.. [Week7] Effect로 동기화하기 안녕하세요 웹 YB 김다현입니다......useEffect..... 진짜 항상 궁금했던 챕터라 공식문서가 너무 도움이 많이 됐답니다.....원래 Effect로 동기화하기를 딥다이브 하려고 했는데... 딥다이브는 무슨 ;; 양이 너무너무너무 많아서 아티클 정리를 다 못 했어요.....개인적으로 이 챕터는 정말 중요하다고 생각해서 시간 날 때마다 추가할 예정입니다....... ㅎ.ㅎ (진짜로) Effect는 무엇이고 이벤트와는 어떻게 다른가요?React 컴포넌트 안의 로직은 크게 두 가지로 나뉘어요. 1️⃣ 렌더링 로직 - 컴포넌트의 최상단에서 JSX를 반환하는 로직-> props와 state를 기반으로 UI를 만들어내요.-> 순수하게 동작해야 합니다. 부수 효과 없이 결과만 계산하는 수학 공식처럼 동작해야.. [week7] Effect& custom Hook 안녕하세요! YB 이윤지 입니다.벌써 7주차고... 마지막 주차를 앞두고 있네요... 시간이 정말 빠르네요..이번 주차는 Effect 에 대해서 톺아보기! 하려고 합니다.모르기도 몰랐고... 범위도 꽤 많았는데 도저히 하나를 고를 수가 없었습니다...하하.공부하는 겸해서 쫌쫌따리 썼으니까 챕터 별로, 입맛대로 골라 보시는 것도 좋겠네요!이번 아티클은 공식문서...만으로도 이해가 안 가는 부분이 꽤나 있어서 이런 저런 글들을 참고하고 썼습니다!참고한 부분은 밑에 링크 달아 둘게요~ 한 번씩 읽어보시면 좋을 것 같아요!그런데 살짝 스압 주의.. 레스기.What is Effect?앞서 UI 표현하기, 상호작용 더하기에서 공부했던 렌더링코드, 이벤트 핸들러 다들 기억하고 계시나요?둘 다 컴포넌트 내부의 2가지 .. 이전 1 2 3 4 5 ··· 25 다음
