별코딩님 리액트 훅 영상들 여러개 봤는데 개념정리 정말 잘해주시네요. 리액트 입문하느라 유데미에서 돈주고 강의구매했는데 그 강사가 다른 강의는 잘하는데 '베스트 셀러'인데도 리액트 강의가 개념설명이 엉성하더라구요. 그래서 어쩔 수 없이 유튜브 참고하는 중인데 큰 도움 얻고 갑니다. 감사합니다 !
렌더링&리렌더링 개념이 살짝 헷갈리네요. 렌더링은 : view 보여주는 paint 작업이라고 알고 있고, 렌더링 작동 방식은: 초기 render 함수가, view 화면에 보여질 정보 객체를 반환하면 -> HTML 마크업 통해서 -> DOM에 보여주는걸로 알고 있습니다. 리렌더링은: 이전 render 함수로 인해 반환된 데이터와, 업데이트된 정보를 가진 현재 render 함수를 다시 호출하여, 데이터 차이점을 비교 한 후 -> 한번에 DOM에 보여주는걸로 알고 있습니다. 0:50 State변경시, 컴포넌트가 다시 렌더링이 된다고 말씀하셨는데, 컴포넌트가 다시 호출된다는 말씀이신가요? 그렇다면, 어떤 형식인가요? (1) state 변경시 -> 컴포넌트 다시 호출 -> 리렌더링 (이전값과 비교) -> 비교된 값 DOM 수정 -> 화면 페인팅 (새로운값) (2) state 변경시 -> 리렌더링 (이전값과 비교) -> 비교된 값 DOM 수정 -> 화면 페인팅 (새로운값) -> 컴포넌트 다시 호출 (3) 둘다 잘못됨. 잘못 알고 있는 정보 지적 부탁드립니다. 감사합니다 :)
저는 "렌더링"을 생각할때 아래의 순서를 떠올려요. (1)State 변경 감지 -> (2)컴포넌트 함수 호출 -> (3)이건 값과 비교 -> (4)DOM 수정(페인팅) (1) ~ (4) 단계를 모두 통틀어서 렌더링이라고 하는 분들도 계시고, (1) ~ (2) 단계를 렌더링이라고 하는 분들도 계시고, (4) 단계를 렌더링이라고 하는 분들도 계시더라구요 😅 렌더링과 리렌더링은 (3)번, 이전 값과 비교 단계가 다르다고 할 수 있겠네요. 리엑트는 Virtual DOM 이라는 패턴을 사용해서 (3), (4) 번단계를 진행해요. 이부분은 나중에 기회가 되면 다뤄보도록 할게요! 경현님 질문에 관해 잘 정리해둔 글을 하나 찾았어요 (영어지만 ㅠㅠ) 시간나실때 참고하시면 좋을 것 같아요! dev.to/teo_garcia/understanding-rendering-in-react-i5i#:~:text=Rendering%20is%20a%20process%20that,state%20or%20their%20props%20changed.
선생님! 강의 유익하게 잘 듣고 있습니다. 다름이 아니라 제가 예제 코드를 혼자 실행해보면서 이상한 점이 있어서 여쭤봅니다 import { useState, useRef, useEffect } from "react"; function App() { const [count, setCount] = useState(1); const [renderer, setRenderer] = useState(1); const renderCount = useRef(1); console.log("렌더링!~~"); useEffect(() => { console.log("useEffect 호출"); renderCount.current = renderCount.current + 1; console.log(renderCount.current); }); return (
Count : {count} { setCount(count + 1); }} > 올려
); } export default App; 이 코드를 실행하면 예상 결과는 다음과 같습니다. 렌더링!~~ useEffect 호출 2 하지만 결과값은 다음과 같습니다. 렌더링!~~ useEffect 호출 2 useEffect 호출 3 즉 렌더링은 한번 일어나지만 그때 useEffect안에 있는 callback 함수는 2번 실행이 됩니다. 아무리 고민해봐도 모르겠습니다.
좋은 영상 감사합니다! 영상보다 궁금한 게 생겨서 질문 드려요! 일반 변수 값은 리렌더링 될 경우 변수값이 초기화되는데 반해 useRef의 경우 리렌더링 되더라도 언마운트되지 않는 한 값이 초기화 되지 않고 유지 되는걸로 이해했는데 혹시 그럼 useRef의 값은 어디에 저장되는지 알 수 있을까요? 그냥 useRef API가 그런 식으로 작동할 수 있도록 코드가 짜여졌다고 알고 있으면 될까요?
useEffect의 dep에 ref를 넣고 ref의 값을 재설정하면 ref값이 설정된 컴포넌트는 재렌더링이 일어나지 않습니다. 당연하죠? 그런데 dep에 ref.current를 넣어주면 재렌더링이 일어나더라구요. 혹시 이유를 명확히 알 수 있을까요? 좀 찾아봐도 이해가 안되더라구요
useMemo는 변수의 값을 메모이제이션 기법을 이용해서 의존성 배열 내부 값이 바뀔때만 초기화 해줍니다 (더이상 렌더링때마다 항상 초기화 되지 않아요). useRef의 ref는 렌더링과 관계없이 컴포넌트의 전 생애주기를 (마운트 된 이후부터 마운트 해제될때까지) 통해 유지가 됩니다. useRef는 렌더링과 관계 없이 항상 같은 ref 객체를 반환하니까요. 저라면, 기억하고 싶은 값이 렌더링과 관련이 있다면 useMemo, 그렇지 않다면 useRef를 사용할 것 같아요!
우선 자바스크립트에 closure에 대해 알아보시면 좋을 것 같아요. 하나의 모듈에 전역 변수를 선언하면 해당 모듈 안에 있는 모든 함수 (함수형 컴포넌트도 함수예요!)들이 공유할 수 있어요. let count = 1 이라는 변수가 있다면 해당 모듈 안에 있는 모든 컴포넌트들이 count 값에 접근하면 모두 1을 보게 되는거죠. count 값을 증가하면 컴포넌트들은 증가된 값을 보게되고요! 반면에 useRef는 컴포넌트에 속해있는 ref를 만들어줘요. 또한 useRef의 생명주기는 컴포넌트가 마운팅될때 시작해서 마운트 해제가 되면 사라져버려요. 간단한 예제를 작성해봤어요: codepen.io/Coding-Star/pen/jOaWONX
이분 강의는 듣고 나면 의문이 안생겨. 깨닫기 위해서 내가 해야 할 삽질을 자세히 해주시니 너무 좋아요.
진짜... 이해가 너무잘돼요ㅜㅜ 공식문서찾아보면 제가 너무 멍청한것같다가도, 선생님설명들으면 제가 똥멍청이까지는 아님을 느낍니다......감사해요ㅠㅠㅠㅠㅠ
저도 가끔 공식문서 찾아볼때 같은 감정을 느낀답니다 ㅠㅠ 시청해주셔서 감사합니다 😄😄
16:35 결론적으로 useRef는 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안 되는 값을 다룰 때 편리하게 사용된다.
다른 분들도 같은 코멘트를 남기셨지만,,,
조금이나마 강사님이 보시고 더 뿌듯해 하셨으면 하는 마음에 남깁니다.
강의 예술입니다.
너무 쉽게 단번에 이해가 잘 되어버렸습니다 ㅜㅜ 감사합니다!!
너무 뿌듯해요~ 😆 댓글 감사합니다!! 앞으로 올라올 영상들도 도움이 되었으면 좋겠네요 ㅎㅎ
진짜 버릴게 1도 없는 1분1초가 소중한 강의다...react 입문자로써 체고!!
진심 리액트 최고의 강의.. 이거 첨 리액트 시작하시는분들 무조건 봐야해요
와 다른 강의에서 뭐라는거야 하고 느꼈던 내용들을 어쩜 이렇게 잘 설명해주시는지...감사합니다 ㅠ
useRef 처음 봤는데도, 이해가 잘 가네요! 감사합니다!
유료강의로 팔아도 될 수준의 강의네요.!! 정말정말정말 최고입니다.
그야말로 명강의네요.
강의 이해하기 쉽고 넘 재미있어요!! 매일매일 복습중입니다 :) 생명주기에 대해서도 다뤄주시면 감사하겠습니다 ㅎㅎ 🙇♀🙇♀
감사합니다! 역시 코딩 공부는 매일 매일 꾸준히해야 쭉쭉 느는 것 같아요. 다음에 컴포넌트 생명주기에 대해서도 다뤄볼게요~
처음부터 영상 보고 있습니다. 슨생님.. 진심.. 사랑합니다. 쉽게 설명해주는 건 정말 어려운 일인데 예제며 설명이며 한번에 이해하게 해주다니 능력자이십니다! 너무 멋있습니다! 👍
별코딩님
에러나올때 마다 당황하고
찾으면 기뻐하는 모습이 재밌네요 ㅋㅋㅋㅋ
예제가 아주 찰떡 콩떡이네요.. 블로그 글만으로는 알기 힘든 포인트들도 쏙쏙 ㅠㅠ 진짜꿀정보알아갑니다
오마이갓 .. 영상을 보고나니 댓글에서 추천이 많은 이유가 납득됐습니다..
useRef 배우러 왔다가 useState도 같이 배우고 가는 느낌 ... 감사합니다
덕분에 놓쳤던 부분들 바로잡고 가요!! 설명이 매우 깔끔하고 도움되는 영상이었습니다👍
지금까지 이런 강의는 없어따........🔥 증말 돈 주고도 못 들을 명강의입니다🥹!!! 그저 빛.... 갓벽...!!!!!
하핫 감사합니다!🔥 도움이 된것 같아 너무 기쁘네요! 더 유용한 강의 영상으로 또 찾아뵐게요~
우왕 너무 최고에요!! 설명두 좋쿠 속도도 좋쿠 목소리두 좋쿠!! useRef >> 변화는 감지해야 하지만 렌더링을 시키지는 않을 때!!
이해하기 쉽게 강의해주셔서 감사합니다!
개발 배우면서 이런 영상 너무 원했는데, 수없이 찾고 보고 해도 이해 안됬는데 최고의 강의 입니다! 이런 영상 많이 올려주세요! 기회 되면 API 등 Javascript도 올려주세요~~!! Subscribe 하고 갑니다!
구독 감사합니다! 자바스크립트도 다뤄볼 예정이예요! 😆😆
최고의 강의입니다!! 감사히요 !! ♥♥
형님 새해 복받으십시오 많은 사람들에게 지식을 전파 해주셔서 복 많이 받으실 겁니다 😍😍
맛집 탐방 왔습니다욧 유료 강의 개설해주세요
맛집탐방 감사합니다! ㅋㅋㅋ 아직까지 계획은 없지만, 언젠간 꼭 유료강의도 만들어보고싶네요!
useRef 강좌 찾다가 들어왔는데 이해가 너무 잘되서 구독하고 다른영상도 찾아보려해요!
친절한 설명 감사합니다!
진영님 감사함니다! 강의가 마음에 드셨다니 기쁘네요 ㅎㅎ 😊
리액트 강좌 너무 이해하기쉽고 좋아요!! 조만간 떡상하실듯….!!
계속해서 잘 부탁드립니다! 나중에 자바스크립트도 강의 해주시면 정말 좋을 것 같아요!!👍🏻📝
감사합니다 😊😊😊 도움이 되셨길 바라요! 자바스크립스 강의도 재밌겠네요!!!
😍 대박.. 너무 이해 잘되고 설명 잘해주십니다. 영어 발음도 좋으시네요..
이해가 잘 되셔서 기뻐요! 감사합니다 ㅎㅎㅎ
벌써 6개월 전이지만, 매번 기본기를 복습하러 순례 왔습니다 :)
진짜 좋은 내용 너무 감사합니다! 항상 잘 보고있습니다.
정말 감사드립니다. useRef는 단순히 돔 요소에 접근하는걸로만 알고있었는데 렌더링과 관련된 기능은 생각도 못했습니다. 너무 감사드립니다. 정말 대박입니다.!
항민님 감사합니다😄. 리액트 개발을 하다보면 Ref의 있고 없고 차이는 참 큰 것 같아요 ㅎㅎ 앞으로 리액트 공부도 화이팅입니다!
노마드코더에서 듣고 이해못해서 찾다보니 여기로왔는데..최고!
이해가 한방에 팡팡팡!!!! 너무 좋은 컨텐츠에요 👍
이해가 잘 되셨다니 기뻐요! 영상 봐주셔서 감사해요 :)
감사합니다, 입문 강의 블로그 시리즈 까지 합쳐서 5개 정도 보았는데 최고로 이해 잘되고 좋은 것 같아요 !!
대박이다 설명 왤캐 잘하세요 귀에 쏙쏙들어옵니다 정말진짜루 정말 정말루 대박쓰
정말요?! 감사합니다!
한번에 이해되네요,, 🥹 🫶 좋은 영상 감사합니다!!
한번에 이해가 되셔서 기뻐요!! 영상 봐주셔서 감사합니다 :)
강의 너무 유익하고 이해하기 편한거같아요! 리액트 심화강의도 해주시면 좋을 것 같아요!👍🏻📝🙇♂️
여태 본 훅스 강좌중 최고! 입니다
감사합니다!! 😍😍
정말감사합니다. 걍 무작정 mern stack 구글링하면서 구현하고있는데 ,
이렇게 이론들으니 내가 작성해서 돌아간 코드가 어떻게 돌아가는지 제대로 이해되네요
예전에 한번 정주행했다고 댓글 달았어요! 근데 일 하다보니 헷깔려서 한번더 정주행 하러 왔습니다!! 너무 감사하고 유익합니다!!
한번 더 정주행 하러 오셨군요! 영상들이 도움이 많이 되었으면 하네요😆
@@starcoding 정말정말 유익해요!! 최고십니다!ㅠㅠㅠ
설명이 정말 좋으시네요.. 잘보고갑니다!
감사합니다 ☺️😆
도움이 많이 됩니다. 감사합니다.
여러 입력창 있을때 엔터키 입력시 다음 포커스로 가는 기능 개발할때 써봐야 겠네요 좋은 영상 감사해요
좋은 생각이예요! ㅎㅎ 영상이 도움이 되었다니 기분이 좋네요~ 감사합니다!
여기 리액트 맛집이네요 ; ) 리액트 초보자에게 자신감을 심어주셔서 감사합니다!!!!
알렉스님 리엑트 공부 화이팅입니다!!! 💪
스앵님 덕분에 제가 Hooks를 이해하고 있어요 ㅠㅠ 진짜 설명 맛집이네요 제 주위에 리액트 공부하는 친구들한테도 영상 추천 꼭 할게요!
설명 맛집 너무 좋네요 ㅎㅎ 추천해주시면 너무 좋죠 😍영상 봐주셔서 감사해요!
별코딩님 리액트 훅 영상들 여러개 봤는데 개념정리 정말 잘해주시네요. 리액트 입문하느라 유데미에서 돈주고 강의구매했는데 그 강사가 다른 강의는 잘하는데 '베스트 셀러'인데도 리액트 강의가 개념설명이 엉성하더라구요. 그래서 어쩔 수 없이 유튜브 참고하는 중인데 큰 도움 얻고 갑니다. 감사합니다 !
제 영상이 도움이 되었다니, 정말 기뻐요! 😄😄😄 앞으로도 좋은 영상으로 찾아뵐게요! 리액트 공부 화이팅입니다~ 🙌
최고최고 정독 가겠습니다
정독 감사합니다!! 🚀
렌더링&리렌더링 개념이 살짝 헷갈리네요.
렌더링은 : view 보여주는 paint 작업이라고 알고 있고,
렌더링 작동 방식은: 초기 render 함수가, view 화면에 보여질 정보 객체를 반환하면 -> HTML 마크업 통해서 -> DOM에 보여주는걸로 알고 있습니다.
리렌더링은: 이전 render 함수로 인해 반환된 데이터와, 업데이트된 정보를 가진 현재 render 함수를 다시 호출하여, 데이터 차이점을 비교 한 후 -> 한번에 DOM에 보여주는걸로 알고 있습니다.
0:50
State변경시, 컴포넌트가 다시 렌더링이 된다고 말씀하셨는데, 컴포넌트가 다시 호출된다는 말씀이신가요?
그렇다면, 어떤 형식인가요?
(1) state 변경시 -> 컴포넌트 다시 호출 -> 리렌더링 (이전값과 비교) -> 비교된 값 DOM 수정 -> 화면 페인팅 (새로운값)
(2) state 변경시 -> 리렌더링 (이전값과 비교) -> 비교된 값 DOM 수정 -> 화면 페인팅 (새로운값) -> 컴포넌트 다시 호출
(3) 둘다 잘못됨.
잘못 알고 있는 정보 지적 부탁드립니다. 감사합니다 :)
저는 "렌더링"을 생각할때 아래의 순서를 떠올려요.
(1)State 변경 감지 -> (2)컴포넌트 함수 호출 -> (3)이건 값과 비교 -> (4)DOM 수정(페인팅)
(1) ~ (4) 단계를 모두 통틀어서 렌더링이라고 하는 분들도 계시고, (1) ~ (2) 단계를 렌더링이라고 하는 분들도 계시고,
(4) 단계를 렌더링이라고 하는 분들도 계시더라구요 😅
렌더링과 리렌더링은 (3)번, 이전 값과 비교 단계가 다르다고 할 수 있겠네요. 리엑트는 Virtual DOM 이라는 패턴을 사용해서 (3), (4) 번단계를 진행해요. 이부분은 나중에 기회가 되면 다뤄보도록 할게요!
경현님 질문에 관해 잘 정리해둔 글을 하나 찾았어요 (영어지만 ㅠㅠ) 시간나실때 참고하시면 좋을 것 같아요!
dev.to/teo_garcia/understanding-rendering-in-react-i5i#:~:text=Rendering%20is%20a%20process%20that,state%20or%20their%20props%20changed.
@@starcoding 감동입니다 ❤️ 디테일한 설명과 소스까지 찾아주시다니..
정말 이해되기 쉽게 가르쳐서 좋아요!!
감사합니다..... 감사합니다......
어머 헤매고 있었는데 너무 쏙쏙 잘 이해가 가네요!
도움이 되었다니 다행이예요 ㅎㅎ
항상 너무 감사합니다!!
감사합니다! 😄
이 시리즈 정말 좋아요! 잘 배워갑니다 :)
영상 봐주셔서 감사해요! :)
친절하고 자세한 설명, 흐름이 잘 지어진 전개. 너무 감사합니다!
HolystorySeo님 감사합니다! 😄😄
설명 간결하고 좋네요 👍
감사합니다! 😆
axios를 할때 useEffect안에 넣으면 무한 렌더링이 되서 고민이였는데 강의 감사합니다!
진짜로 감사합니다 선생님...
최고의 강의 입니다.
감사합니다!! 😆
알아듣기 쉽게 정말 설명도 잘하시고 강의 내용도 좋네요. 감사합니다. ^^
감사합니다! 😊
리액트 useRef 어렴풋하게 이해하고 있었는데 별코딩님 덕분에 정확히 이해하고 넘어갑니다. 고퀄리티 강의 감사합니다. :)
도움이 되었다니 기쁘네요 ㅎㅎ 뿡삐오님, 영상 봐주셔서 감사합니다!!
와.. 진짜 최곱니다...
설명을 너무 친절하게 잘해주셔서 강의 하나하나 다 보고 있어요!! ㅎㅎ 게다가 목소리도 너무 좋으셔서 마음이 편-안
좋은 피드백 감사드려요! 앞으로도 더 좋은 강의로 찾아뵐게요 😊😊😊
귀에 엄청 잘들어옴 졸리지도 않고
와.. useRef 때문에 골치아팠는데...이렇게 쉽고 명쾌하게 설명해주시는 강의 처음봣습니다!! 존경합니다!! 감사합니다.
민수님 감사합니다! 😄😄😄
최고네… 크..
진짜 설명 잘하신다..ㅠㅠ 렌더링 개념에 대해서 확실히 이해했어요. 감사합니다!!!!
영상 봐주셔서 감사해요! 리액트에서 렌더링 개념은 참 중요하기 때문에 확실히 이해하면 좋은 것 같아요!
우아한 강의네요.. 이해도 잘되네요
기뻐요!! 영상 봐주셔서 감사합니다 😆
진짜 최고입니다.!!!!!
영상 봐주셔서 감사해요!! 😊
감사합니다!!!
넘나 유용합니다잉
돈내고 들어야할 것 같은 강의 무료로 보여주셔서 감사합니다🔥
감사합니다 ☺️ 도움이 되었으면 좋겠네요!
최곱니다 정말로 !!
감사합니다!! 😆
너무 유익합니다 좋은 영상 감사합니다
도움이 되셨다니 기쁘네요! 😆
와 선생님 진짜 설명 너무 잘해주십니다ㅠㅠㅠ감사합니다
와 진짜 이해가 쏙쏙 되네요 감사합니다!!!
감사합니다 🎉🎉🎉
친절한 설명 감사합니다
호준님 감사합니다!
최고의강의
😆😆 부끄럽습니다!
강의 미쳐따.....역대급이네요 !!
정말요?? 감사합니다!! 😆😆😆
앞으로 스승님이라고 부르겠습니다
const countUp = () => {
setRenderCount(renderCount + 1);
console.log(renderCount);
setCount(count + 1);
};
return (
Count : {count}
올려!
);
15:00 초에서 버튼 누른 횟수를 카운트 함수랑 같이 엮어주면 이때는 무한 루프 안 돌지 않나요?? 이 방법이 있는데 useRef 를 사용하신 이유가 궁금합니다.
미친 저 드디어 생애주기 이해했어요.. 와 진짜 감사드려요 ㅠㅠㅠㅠㅠㅠㅠㅠ
Thank you
13:44 아 저격당했네ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 자연스럽게 코드 치고 있다가 찔렸네요
안녕하세요 ? 따라하기 코딩 시 사전에 설치 해야 하는 라이브러리, 화일을 알려주세요
선생님! 강의 유익하게 잘 듣고 있습니다.
다름이 아니라 제가 예제 코드를 혼자 실행해보면서 이상한 점이 있어서 여쭤봅니다
import { useState, useRef, useEffect } from "react";
function App() {
const [count, setCount] = useState(1);
const [renderer, setRenderer] = useState(1);
const renderCount = useRef(1);
console.log("렌더링!~~");
useEffect(() => {
console.log("useEffect 호출");
renderCount.current = renderCount.current + 1;
console.log(renderCount.current);
});
return (
Count : {count}
{
setCount(count + 1);
}}
>
올려
);
}
export default App;
이 코드를 실행하면 예상 결과는 다음과 같습니다.
렌더링!~~
useEffect 호출
2
하지만 결과값은 다음과 같습니다.
렌더링!~~
useEffect 호출
2
useEffect 호출
3
즉 렌더링은 한번 일어나지만 그때 useEffect안에 있는 callback 함수는 2번 실행이 됩니다. 아무리 고민해봐도 모르겠습니다.
목소리 사랑해요
좋은 영상 감사합니다!
영상보다 궁금한 게 생겨서 질문 드려요!
일반 변수 값은 리렌더링 될 경우 변수값이 초기화되는데 반해 useRef의 경우 리렌더링 되더라도 언마운트되지 않는 한 값이 초기화 되지 않고 유지 되는걸로 이해했는데 혹시 그럼 useRef의 값은 어디에 저장되는지 알 수 있을까요? 그냥 useRef API가 그런 식으로 작동할 수 있도록 코드가 짜여졌다고 알고 있으면 될까요?
네, useRef API가 그렇게 동작하도록 내부적으로 작성되었다고 생각하시면 충분합니다! :) 내부적인 구조를 들여다보지 않아도, API 규격만으로도 효율적으로 사용할수 있다는것 또한 리액트 훅의 큰 매력중 하나이지요! 😆
useEffect의 dep에 ref를 넣고 ref의 값을 재설정하면 ref값이 설정된 컴포넌트는 재렌더링이 일어나지 않습니다. 당연하죠? 그런데 dep에 ref.current를 넣어주면 재렌더링이 일어나더라구요. 혹시 이유를 명확히 알 수 있을까요? 좀 찾아봐도 이해가 안되더라구요
별코딩님 혹시 배운 내용 제 블로그에 공부용으로 기록해놔도 될까요? 배운 내용을 자꾸 까먹어서.. 이참에 블로그 하나 만들었어요.
영상에서 코드 참고해서 올려도 될까요? 게시글 제목도 (별코딩님 참고) 이렇게 작성하려고 합니다.
네! 괜찮습니다 😄. 영상 캡쳐 사진만 피해주시면 감사하겠습니다!! 화이팅이예요 🙌
선생님.
useState가 변화 일어나면 결국 렌더링이 발생하여 Ref도 브라우저 화면상에 그동안 별도로 클릭하여 저장된 값이 나오게 되는데,
이게 유지된다는게 "일반 변수와 비교해서 보면 유지되는거다" 라고 해석하면 되나요?
useRef는 컴포넌트의 전 생에주기를 통해 유지되는 ref 객체를 반환해줍니다. 전 생애주기를 통해 유지된다는 말은 컴포넌트가 마운트 된 시점부터 마운트 해제될때까지 항상 같은 ref 객체에 접근한다는 뜻이예요 - 변수와 다르게 초기화 되지 않는거죠 ㅎㅎ.
@@starcoding 네 감사합니다!!
다른 강의도 시청하면서 궁금한 내용이 있으면 댓글 보내드리겠습니다 :)
강의 너무 좋습니다 !
다만 useMemo와 useRef의 차이점이 잘 느껴지지 않는데 어떨때 어떤걸 사용하면 될까요? dom 요소에 접근하는 상황을 제외하고 특정 값을 기억하고 싶을땐 useMemo, useRef 모두 사용가능할것 같아서 여쭤봅니다
useMemo는 변수의 값을 메모이제이션 기법을 이용해서 의존성 배열 내부 값이 바뀔때만 초기화 해줍니다 (더이상 렌더링때마다 항상 초기화 되지 않아요).
useRef의 ref는 렌더링과 관계없이 컴포넌트의 전 생애주기를 (마운트 된 이후부터 마운트 해제될때까지) 통해 유지가 됩니다. useRef는 렌더링과 관계 없이 항상 같은 ref 객체를 반환하니까요.
저라면, 기억하고 싶은 값이 렌더링과 관련이 있다면 useMemo, 그렇지 않다면 useRef를 사용할 것 같아요!
선생님 마지막 예제에서 렌더링이 몇번 되었는지 확인하기 위해 Ref를 사용하셨는데 count state 개수가 버튼을 누르횟수 -1이니 count state를 활용해서 버튼 누른 횟수를 구하면 되는 거 아닌가요?
굳이 거기서 Ref를 왜 써야하는지 개념적으로 궁금합니다.
영상속 예제의 경우, count state를 통해서 렌더링 횟수를 구하는것도 물론 가능합니다! 하지만 "렌더링 -> useEffect 실행" 이라는 규칙이 있기때문에, 많은 경우 useEffect를 정말 유용하게 사용합니다 :)
별코딩님 덕분에 저의 뇌가 깨어났습니다... 감사해서 몸둘바를 모르겠나이다!
우상님 덕분에 기분이 좋아서 몸둘바를 모르겠습니다!!! 도움이 되었다니 너무 기뻐요. 감사합니다😊😊
16:11 useRef 초기값을 1로 주고 그대로 했는데 왜 저는 렌더링이 두번되는걸까요??
렌더링 수: 2
렌더링 수: 3
콘솔에 이렇게 찍혀요ㅜㅜ혹시방법아시는분~~~
앗.. index.js의 이녀석 때문이었네요ㅜㅜ 잘 알아보지도 못하고 무작정 질문을...머쓱타드
ps. 리액트 hooks에 가로막혀서 좌절하고있었는데 별코딩님 강의 듣고 다시 일어섰어요ㅜㅜ짱짱!! 좋은 강의 감사해요!!!
답을 찾으셔서 다행이예요! 맞아요, StrictMode를 활성화시키면, 콘솔에 두번씩 출력이 되더라구요. 개발하실때 항상 StrictMode를 키고 개발하시는걸 추천드려요! 여러가지 문제를 잡아주고, 알려주거든요 😆
안녕하세요. 정말 좋은 영상인 것 같아서 블로그에 참고해서 정리하려고 하는데, 출처를 남기고 이용해도 될까요?
감사합니다! 영상 캡쳐 사진을 제외하고 예제 코드 일부분을 발췌하여 성현님께서 요약하시고 정리하시는것은 환영입니다 ㅎㅎ! 화이팅입니다 😊😊
네네 당연하죠 감사합니다!!
ruclips.net/video/VxqZrL4FLz8/видео.html 여기서 무한루프에 빠지지 않으려면 useEffect 에 dependency 로 count를 설명하는 방법은 어떤가요??
const [count, setCount] = useState(1)
const [renderCount, setRenderCount] = useState(1)
useEffect(() => {
setRenderCount(renderCount +1)
}, [renderCount])
APP 외부에 변수 선언해서 전역변수로 사용하는거랑 useRef쓰는 것 중에 뭐가 좋을까요?
우선 자바스크립트에 closure에 대해 알아보시면 좋을 것 같아요. 하나의 모듈에 전역 변수를 선언하면 해당 모듈 안에 있는 모든 함수 (함수형 컴포넌트도 함수예요!)들이 공유할 수 있어요. let count = 1 이라는 변수가 있다면 해당 모듈 안에 있는 모든 컴포넌트들이 count 값에 접근하면 모두 1을 보게 되는거죠. count 값을 증가하면 컴포넌트들은 증가된 값을 보게되고요! 반면에 useRef는 컴포넌트에 속해있는 ref를 만들어줘요. 또한 useRef의 생명주기는 컴포넌트가 마운팅될때 시작해서 마운트 해제가 되면 사라져버려요.
간단한 예제를 작성해봤어요: codepen.io/Coding-Star/pen/jOaWONX
선생님 그렇다면 useEffect() 내부에 state를 변경하는 함수를 넣는다면 무조건 무한루프에 갇히는 건가요?
useEffect의 의존성배열에 따라 달라집니다. 의존성 배열이 없다면 무한루프에 갇히겠지만, 의존성을 적절히 사용하여 useEffect가 불리는 조건을 잘 만든다면 무한루프에 갇히지 않겠지요 ㅎㅎ. 제 useEffect 강의 참고해보시면 좋을 것 같아요 😄
@@starcoding 👍👍👍
혹시 키보드 뭐 쓰세요 별코딩님 ?🤔🤔
강의 녹화할때는 맥북 기본 내장 키보드 사용하고 있어요. 회사에서는 Satechi사의 Slim X1 키보드를 사용하고 있습니다!
@@starcoding 감사합니당
👍🏻
😄
이 영상을 보고 useRef 잘 이해못하던 병이 나았습니다
고퀼강좌 무조건 개추
감사합니다!! 😁
최공
ruclips.net/video/VxqZrL4FLz8/видео.html 소오름 진짜 설명천재 시네요 진짜 잘 보고 있습니다!