나야, 리액트 스터디 (42) 썸네일형 리스트형 [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가지 .. [week7] useEffect, customHook 안녕하세요 OB 김건휘입니다🌊. 이번 시간에는 useEffect 훅을 딥다이브 해보는 시간을 가져보도록 하겠습니다. 📌Effect란? 즉, effect는 컴포넌트가 렌더링된 이후 특정 작업을 수행하기 위한 도구를 의미한다. 이를 구현하기 위해 useEffect 훅을 사용하며, 이는 리액트 함수형 컴포넌트에서 부작용(side effect)을 처리하는 방식이다. 📌부작용(Side Effect)이란?부작용은 컴포넌트의 렌더링 외에 발생하는 모든 작업을 의미한다.API 호출 (데이터 가져오기/저장하기)구독 설정/해제 (실시간 통신, 이벤트 리스너 등)DOM 수정 (DOM 직접 접근)타이머 설정 (setInterval이나 setTimeout 사용) 🧐왜 useEffect의 호출을 두 번 수행할까?//App.. [Week 6] Ref 🍥 Ref란?ref는 React 컴포넌트에서 DOM 요소 또는 React 컴포넌트 인스턴스에 직접 접근할 수 있는 방법을 제공한다.일반적으로 React는 데이터의 흐름을 통해 UI를 관리하지만, ref는 예외적으로 직접적인 접근이 필요할 때 사용된다. React가 렌더링 사이클에서 관리하지 않는 값(예: DOM 요소)과의 상호작용에 사용렌더링에 영향을 주지 않으며 값이 변해도 컴포넌트를 다시 렌더링하지 않음 1️⃣ Ref 사용법 ✔️ useRef를 사용해서 ref를 생성import { useRef } from 'react';const ref = useRef(0); ✔️ useRef가 반환하는 객체 : currentref.current 프로퍼티를 통해 해당 ref의 current 값에 접근할 수 있고.. [week6]탈출구 - Ref로 값 참조하기, Ref로 DOM조작하기 하.......................발표라고 3시간 넘게 쓰고 있던 제 아티클이 날아갔네요........ 막 눈싸움도 하고 싶다고 쓰고 신나는 얘기가 많았는데......급해서 이름도 안 적었네여 웹파트 YB 한수정입니다 ~! 지금은 좀 정신이 회복돼서 다시 읽다가 발견했습니다😆 이번엔 딴 얘기 없이 바로 아티클 시작하겠습니다.6주차는 Ref로 값 참조하기, Ref로 DOM조작하기입니다 !! 컴포넌트에 ref를 추가하기// React에서 useRef Hook을 가져와 컴포넌트에 ref를 추가할 수 있습니다.import { useRef } from 'react';// 컴포넌트 내에서 useRef Hook을 호출하고 참조할 초깃값을 유일한 인자로 전달합니다. // 아래는 값 0에 대한 ref 입니다... 이전 1 2 3 4 ··· 6 다음
