친구 추천으로 별코딩님 알게 되었는데 우선 목소리가 흡입력 장난 아니시네용,,,왜인지 모르겠지만 저절로 집중하게 됩니다! 뭔가 신뢰감이 느껴지는 목소리인 것 같습니다. 이렇게 재능기부해주셔서 감사하고 앞으로도 새로운 언어 별코딩님한테 배우고 싶네요ㅎㅎ 유튜브 영상 항상 기다리고 있겠습니다~~~~~!
안녕하세요! 별 코딩 영상을 최근에 정주행하기 시작했는데 App.js에서 '렌더링👌' 이 맨 처음에는 하나만 출력이 되어야 하는데, 두 번씩 출력이 되다보니 이상한 것 같아서 제 코드에 문제가 있는지 여쭤보려구 하는데 어디 부분을 수정해야 하는지 알려주실 수 있을까요?ㅎㅎ import React, { useState, useEffect} from 'react' function App() { const [count, setCount] = useState(1); const handleCountUpdate = () => { setCount(count + 1); }; // 렌더링 될때마다 매번 실행됨 useEffect(() => { console.log('렌더링 👌') }); return (
당신은 천재입니다제가 살면서 전공변경이 넘 많아서 이런저런 수업을 많이 들었는데요. 본인만 똑똑하고 못가르치는 교수들이 많았는데, 별코딩님은 진짜 미쳤네요. 해외 유명 강의 영상도 책으로 이해 안되는것도 다 이해시켜주시네요..나중에 유료강의 개설해주세요. 꼭 들으러 갈께요😄
과분한 칭찬은 심장에 무리가 옵니다~🥰🥰 도움이 된것 같아 정말 기뻐요! 전공 변경이 많았다고 하셨는데, 개발쪽 전공은 적성에 잘 맞는것 같으신지 궁금하네요. 책도 좋은 방법이지만, 엑티브하게 발전하고있고, 자주 업데이트가 되고있는 프레임워크는 책보다는 공식문서/최근 강의로 배우는게 더 효율적인 방법 같아요!
@@starcoding 그동안 화공엔지니어, 항해사, 학원강사 등등.. 전전긍긍하다. 캐나다에 정착하며 새롭게 직장을 찾기 위해 현지에서 부트캠프 듣고 있습니다ㅠ 우선은 먹고 살아야하니 시작했지만 배우다보니 흥미도 생기고 재미있습니다~ 말씀해주신대로 책이나 문서를 다 읽을 시간은 없고, 최근강의!를 찾다가 별코딩님 채널을 알게됐습니다
좋은 영상감사합니다. 도중에 하나 의문점이 생겼는데요 유즈이펙트 문법상 의존성 배열은 옵셔널인데 옵셔널인 것으로 봐서는 의존성 배열 없이도 쓸 경우가 있을 것 같은데 어떤 경우 인지와 그 경우라면 굳이 유즈이펙트를 쓰는 이유가 있는가 입니다. 의존성배열없이 쓰는 유즈이펙트내부의 코드는 유즈이펙트를 쓰는 함수 내에서 리렌더링이 발생하면 계속 실행될텐데 굳이 유즈이펙트안에 작성해야 하나 싶어서요
강의대로 똑같이 입력했는데, timer가 실행되기 전에 cleanup 함수가 먼저 호출되네요.. 사용 브라우저는 크롬입니다. Timer.js:11 타이머가 종료되었습니다. 3Timer.js:6 타이머 돌아가는중... Timer.js:11 타이머가 종료되었습니다. 열심히 비교해봐도 강의 속 코드랑 똑같은데 이유를 모르겠습니다
흠... 혹시 useEffect의 return문에 콜백 그 자체를 리턴하신게 아니라 함수를 부르신게 아닐까요? return () => { clearInterval(timer )} 가 아닌 return clearInterval(timer)를 하시진 않으셨는지 확인해보시면 좋을 것 같아요!
리액트 옛날방식 클래스 setState 만드는거부터해서 포기안하고 훅까지 왔어요 ㅠㅠ 리액트 자체가 너무 생소해서 컴포넌트 개념 이해하는데도 시간이 꽤 걸렸는데 세상에 이렇게 군더더기없이 깔끔하게 강의하시는분은 처음봅니다. 덕분에 진짜 리액트훅에 취하게되었네요 와… 유료강의 출시안하시나요 ㅋㅋ 진짜.. 강의계 별이신듯..
와...엄청 신기하네요. useEffect 별도로 연습해보았는데요. effect에서 버튼을 눌렀을 때, Timer effect가 동작 되는 것을 확인 할 수 있었는데요. [] 를 할 때는 마운팅 됐을 때만 동작 된다고 했는데요. 한 번 더 눌렀을 때 Timer의 return이 동작 되는 원리에 대해서 궁금해서 여쭤보게 되었습니다. ㅜㅜ 저건 그냥 이런거구나 하고 외워야 하는 걸까요??
질문 하나 해도 될까요? Timer 컴포넌트 내용에서 const time = setInterval(()=> { }) ; 형태로 정의를 했는데... 정작 time() 식으로 time함수를 실행한 적이 없는데... 왜 setInterval함수가 작동하는 거죠? 정의한 함수를 실행해야 함수가 작동하는 것이 아닌가요?
setInterval은 우리가 직접 만든 함수가 아닌, 브라우저에서 제공하는 함수입니다! setInterval은 "콜백함수"를 인자로 전달받고, 우리가 setInterval(콜백함수)로 호출해주면, 내부적으로 n초 뒤에 호출을 해줍니다. 함수를 호출하는 코드는 setInterval의 내부 구현사항에 있겠지요! 참고로, setInterval의 반환값은, 함수가 아닌, 타이머의 id 입니다!
안녕하세요 좋은 강의 정말 감사합니다! 처음 영상봤는데 집중해서 보게되었네요 한 가지 질문이 있습니다. mount되는것은 화면에 렌더링이 되는것이고, unmount 되는것은 화면에서 제거되는것인데 그게 시각적보이는것을 mount unmount로 표현한걸까요?? 용어가 조금 헷갈리네요ㅜㅜ
우선 정말 좋은 강의에 감사드립니다. 고맙습니다. (_ _) 그런데 선생님께 질문이 하나 있습니다. 타이머에서 시간을 1초로 하였고 선생님 화면에서는 개발자도구의 숫자가 1씩 증가하는데, 시간은 1초지만 숫자가 2씩 증가하는 경우는 왜 그럴까요 ㅠㅠ. 또한 cleanup을 위한 return문을 추가하면 최초 버튼 클릭시점에 "타이머가 종료되었습니다" 라는 내용이 콘솔 최상단에 표시가 됩니다.ㅠㅠ 답글을 부탁드립니다^^;
안녕하세요. 질문이 있어서 댓글 남깁니다. react 18에서 실행했보았는데 다르게 실행 되었습니다. 버튼을 클릭 하면 먼저 타이머가 종료 되었습니다. 가 찍힌 후 "타이머 돌아가는 중...으로 타이머로 작동 후 다시 버튼을 클릭 하면 다시 타이머가 종료 되었습니다. 라고 콘솔에 찍히는데 다른 버전에서는 원래대로 실행 됩니다. 어떤 이유 때문에 타이머가 종료 되었습니다.가 먼저 뜨는지 알 수 있을까요?
Create React App으로 리액트 앱을 만들 때 기본적으로 추가되는 Strict mode 때문에 그렇습니다! Strict mode는 리액트로 개발할 때 코드상에 문제점들을 미리 검사하고 콘솔에 알려주는 역할을 합니다. 검사 과정에서 useEffect를 한번더 실행시키기도 하고요. 리액트 18 이전 버전에서는 두번째 실행된 useEffect의 결과를 콘솔에 출력하지 않았지만, 리액트 18 부터는 출력하도록 변경되었더라구요. Strict mode를 해제하시려면, index.js에 있는 태그를 없애주시면 됩니다. 그러면 예상한 결과대로 콘솔에 출력될거예요 😄
2개의 질문이 있는데 질문 드려도 될까용?~~ Q1. useEffect 를 사용하지 않고 해당 click 이벤트에 바로 코드를 추가 하면 안될까요? Q2. Timer 예제중 return 은 Timer 컴포넌트가 unmount 가 될때 return 값이 생기는 걸까욤? 왜 Timer 가 실행될때 return 은 실행이 안될까욤?
onClick과 useEffect는 완전히 다른 용도입니다. onClick 속성으로 넣어준 콜백함수는 "클릭시 호출되는" 함수이고, useEffect 내부에 있는 콜백함수는 "렌더링시 (의존성 배열에 따라) 호출되는" 함수입니다. 어떻게 사용하는지에 따라 겹치는 결과도 있겠지만, onClick과 useEffect는 완전히 다른 의도를 갖고있습니다! useEffect 내부에서 리턴되는 콜백함수는 정리 작업입니다. 정리 작업은 다음 순서의 useEffect가 호출되기 이전에 호출이 됩니다. 이 부분은 리액트의 내부 구현사항입니다 :)
함수형 컴포넌트는 렌더링될때마다 모든 코드블록이 실행되는데 , 그렇다면 useEffect에 아무인자를 전달하지 않는 것과, useEffect을 사용하지 않고 밖에 빼두는 것과 아무 차이가 없는 것 아닌가요?? dependency array가 있는 경우를 제외하고는 굳이 useEffect를 사용해주는게 필요한가요??
useEffect는 렌더링 "이후에" 실행이 됩니다. 컴포넌트가 렌더링이 완료되길 기다린 후에 실행이 되는거죠.하지만 useEffect 밖으로 빼놓은 코드는 리엑트가 JSX를 리턴하기 전에 실행이 되겠지요! 하나의 경우를 더 생각해보자면, ref를 사용해서 DOM 노드를 참조해하는 코드인 경우 useEffect 외부에서 ref에 접근을 한다면 화면에 렌더링 되기 이전이기때문에 DOM노드가 아닌 undefined가 나올 수 있습니다 :)
@@이창호-s7n StrictMode는 없어서는 안될 기능입니다! 특히나 리액트 훅을 사용하면서 문제가 생길 수 있는 코드가 작성되었다면 콘솔에 적절한 경고메세지를 출력을 해주거든요 ㅎㅎ 저 개인적으로도 StrictMode로 수많은 문제들을 조기에 발견해서 여러 잠재적 버그를 피한 경험이 있습니다. StrictMode는 렌더링을 한번씩 더 해주면서 문제를 점검하기때문에, 콘솔에 한번씩 더 출력되는게 불편하실때만 잠깐씩만 지워주시는걸 추천드려요!
@@starcoding 궁금한게 있습니당.. 만약 strictmode가 있는 상태에서 useEffect에서 api요청을 한 후 data라는 이름의 state에 담는다고 한다면, strictmode일땐 api 호출도 두번 일어날텐데, 그럼 data라는 이름의 state가 비었냐 안비었냐 같은 조건을 걸어서 한번만 호출되게끔 처리를 하는 게 옳은 건가요?
질 좋은 강의 감사합니다! 질문 하나만 해도 괜찮을까요? 어떤 코드에 useEffect를 의존성 배열 없이 사용했을 경우와 useEffect를 사용하지 않고 쌩으로 코드를 쓰는 경우 어떤 차이가 있나요? 매번 렌더링 될 때마다 호출되는 것은 같겠지만 무언가 차이가 있지 않을까 싶어서 궁급합니다!
큰 차이는 없지만 조금 더 자세히 이야기해보자면, useEffect는 렌더링 "이후에" 실행이 됩니다. 컴포넌트가 렌더링이 완료되길 기다린 후에 실행이 되는거죠.하지만 쌩으로 코드를 쓰면 리엑트가 JSX를 리턴하기 전에 실행이 되겠지요! 제 개인적인 의견을 덧붙이자면, useEffect로 감싸주는게 코드가 더 보기 좋은 것 같아요 ㅎㅎ 하나의 비즈니스 로직을 하나의 useEffect로 나눠서 담으면 유지보수 하기도 한결 편해지니까요 :)
유료강의 듣다가 이해가 뭐 냅다 코드만 적길래 원리 좀 이해하고싶어서 찾다찾다 여기까지 왔는데 진짜 효자손이시네요,,,시원합니다!!! 바로 구독때리고 앞으로 더 많은강의 기대와 응원하겠습니다.
미쳤다 이게 무료 강의라니.... (재능기부)
진짜 대박입니다!!
유료강의 듣다가 이해 안되서 검색하다가 보게되었는데
정말 이해잘되고 재밌고 집중도 빡되네요..
이해 안되니깐 짜증나고 졸리고 재미 없었는데 이해되니깐 너무 재밌음!
대박입니다. 리액트 이제 막 입문해서 useEffect 이해가 잘 안됐었는데 단방에 됐습니다!! 감사합니다 ㅜㅜ
useEffect를 이해하기 쉬운 예제로 잘 만드신 것 같아요. 막힘 없이 이해가 너무 잘 되었습니다. 감사합니다
공식문서만 보고는 쓰임새가 감이 잘 안왔는데 예제 만들어주신거 보고 완벽하게 이해했습니다. 복받으세요! !
친구 추천으로 별코딩님 알게 되었는데 우선 목소리가 흡입력 장난 아니시네용,,,왜인지 모르겠지만 저절로 집중하게 됩니다! 뭔가 신뢰감이 느껴지는 목소리인 것 같습니다. 이렇게 재능기부해주셔서 감사하고 앞으로도 새로운 언어 별코딩님한테 배우고 싶네요ㅎㅎ 유튜브 영상 항상 기다리고 있겠습니다~~~~~!
감사합니다 덩콩님! 강의 전달이 잘 되어 도움이 된것 같아 기쁘네요 ㅎㅎ 요즘 업로드가 뜸해지고 있지만 여러가지 준비중입니다! 추천해드린 친구분께도 감사드려요 ❤️
나는 코자인데요,
이 영상을 이해를 했어요.
내가코자라니
예가 정말 적절한거 같습니다
잘 보고 갑니다!!
누군가의 강의를 듣는게 이렇게 설레고 기쁘고 즐거울 수 있다니❤ 너무 감사해요! 보고보고 또 볼게요! 행복에 만취한당🍻 나중에 여유가 되실 때 리덕스 툴킷도 알려주심 정말 염치없지만 행복할거같아유ㅠㅠㅠ❤
과분한 칭찬 너무 감사해요 😍😍 리액트 훅스 시리즈가 도움이 된 것 같아 너무 뿌듯하네요 ㅎㅎ 기회가 된다면 다뤄보고 싶은 주제중에 리덕스토 들어있습니다 ㅎㅎ
누구나 보기에 너무 깔끔하고 쉽고 이해가 잘되는 영상입니다! 실제 사용 예제로 보여주시고 짱이네요!
설명을 엄청, 정말 잘하시네요. 좋은 강의 정말 감사합니다.
깔끔하고 알아듣기 쉽고 정말 감사한 영상입니다!
예제소스보고 바로 이해됬습니다. 좋은 영상 감사합니다 :)
진짜 좋은 선생님이십니다,, 이해가 쏙쏙 되네요
공식 도큐먼트를 봐서는 도무지 이해가 안되었는데 이제 리액트랑 친해지고싶네요❤
공식문서는 항상 정답이지만, 때로는 조금 더 쉽게 풀어서 설명해주는 블로그나 영상이 도움이 될때가 있는 것 같아요 ㅎㅎ 영상 봐주셔서 감사합니다!!
포기하지마세요. 계속 킵고잉 구독자 떡상 가고 실전 튜토리얼 찍어주세욧
22222222222
와!! react 유료 강의 하나 만들어 주세요~ 설명이 넘 깔끔합니다.
감사합니다 양질의 컨텐츠를 무료로 볼수 있다니 ㅠㅠ
설명이 깔끔하고 이해하기 좋게 비유해주셔서 어떤 강의보다 도움이 됐어요
가능하시다면 react 기초 강의도 해주셨음 좋겠어요!
그리고 javascript 기초 강의도요!
감사합니다 ㅎㅎ 기회가 된다면 꼭 해볼게요 😄
와 진짜 이렇게 심화된 내용까지 알려주셔서 너무 감사해요!! 제가 너무 기초적인 개념만 알고 있었다는 생각이 드네요!!! 이런 딥한 내용이 있었다니 진심으로 놀랬습니다!!!
useEffect가 없는 리액트는 상상할수 없어요 😄😄😄 댓글 감사합니다!
감사합니다 별코딩님 udemy에서 외국인분이 가르치는 리액트 강의를 보는데 한글자막을 봐도 이해가 안가더라고요,,.
영상 보고 정리 잘 됐습니다. 감사합니다.
useEffect 한잔 더하고 갑니다. 좋은 영상 감사합니다 ;)
타이머 컴포넌트에서 props가 왜 필요한지 모르겠습니다!!
내용은 너무 유익하고 재미있어요!
감사합니다! 지금 보니 타이머 컴포넌트의 props는 사용하지 않았네요! 지우셔도 괜찮습니다 ㅎㅎ
목소리도 너무 좋코 설명도 너무 좋코ㅠㅠㅠ
미쳤다... 많은영상 부탁드려요!!
setInterval, clearInterval은 내장 함수인가 보네요.
마침 딱 리액트 라이프 사이클보고 유튜브에 검색했는대 이영상 딱있네요
너무 감사합니다.
영상이 도움이 되었으면 좋겠네요! 영상 봐주셔서 감사해요 😆
😍 재미있네요~~ 설명도 굳굳~
귀에쏙쏙.. 명강의입니다.
이거야 이거 세상 참 좋아졌다고 이야
오늘도 잘 배우고 갑니다 감사합니다 🫶
아, 지존이시네요. 존경합니다.
진짜 쉽게 설명해주셧구만유 감사합니다
렌더링 마다 실행되는 건 몰랐는데
영상이 도움이 된 것 같아 기뻐요! ㅎㅎ
강의 너무 감사합니다! hooks 시리즈 넘 좋아요👍
클린업을 책만으로는 이해가 안갔는데 설명을 잘해주셔서 감사합니다.
비동기나 이벤트 핸들러를 다룰때 클린업이 꼭 필요한거 같아요 ㅎㅎ 영상 봐주셔서 감사합니다!
오 쉽게 잘 포인트를 디테일하게 설명 해주셔서 감사합니다 바로 구독하고갈게여!!!
감사합니다! 😊😊😊
정리 잘하신다.. 부럽..
감사합니다 ㅎㅎ 영상이 도움이 되셨으면 좋겠네요!
진짜 제대로 배웠습니다. 감사합니ㅏ다.
설명최고네요...
감사합니다! 🙌🙌
혹시 Mount 된다는 게 화면에 첫 렌더링되는것과 같은 의미로 쓰이는 단어인가요..?!
와,, 정말 이것저것 찾아다니다가 우연히 발견했는데 설명 너무너무 잘해주셔서 이해가 잘 됩니다ㅜㅜ 정말 감사합니다..!!! 다른 강의들도 오픈하신다면 꼭 보러올게요!!! 좋은 강의 감사합니다!
이해가 잘 되셔서 너무 다행이예요! 강의 봐주셔서 감사해요 😄
이해가 쏙쏙 됩니다
감사합니다!
우와 정말 쉽게 이해됐어요!! 설명너무 잘해주시네요 ㅎㅎ 좋은강의 감사합니다!
이해가 잘 되셨다니, 다행이네요! 감사합니다 :)
역시 별코딩님 리액트 강의가 최곱니다요!! 구독 좋아요!!
감사합니다 지식백과님!! 😆😆😆
이해가 쏙쏙 됩니다. CRUD 게시판 강의도 부탁드려요!!
설명 진심 역대급이세요!!
역대급!!! 감사합니다 ㅎㅎㅎ 😆
와...대박강의 그냥 그냥 넘어갔는데 확실히 알고 넘어가니까 아~ 하고 넘어가게 됩니다...😍
화이팅입니다!! 댓글 많이 남겨주셔서 감사해요 😍
이해 정말 잘 되네요
정리를 잘해주셔서 이해가 잘됩니다. 영상 감사히 잘 보고 갑니다. :)
감사합니다! 더 유익한 영상으로 찾아뵐게요 😄
wow 너무깔끔합니다. 구독하고갑니다~
감사합니다 ㅎㅎ 다음엔 더 깔끔한 영상으로 찾아뵐게요!
설명 너무 조아요 최고 >
감사합니다! 😆
10분 14초 rsi 치셨는데 저절로 자동 완성 되게 하려면 어떤 확장 프로그램 깔면 될까용?
Reactjs code snippets라는 확장 프로그램입니다 :)
감사합니다!
안녕하세요! 별 코딩 영상을 최근에 정주행하기 시작했는데
App.js에서 '렌더링👌' 이 맨 처음에는 하나만 출력이 되어야 하는데, 두 번씩 출력이 되다보니 이상한 것 같아서 제 코드에 문제가 있는지 여쭤보려구 하는데 어디 부분을 수정해야 하는지 알려주실 수 있을까요?ㅎㅎ
import React, { useState, useEffect} from 'react'
function App() {
const [count, setCount] = useState(1);
const handleCountUpdate = () => {
setCount(count + 1);
};
// 렌더링 될때마다 매번 실행됨
useEffect(() => {
console.log('렌더링 👌')
});
return (
Update
count: {count}
);
}
export default App
유료강의라도 내실 생각 없으신가여,,,, 이해가 진짜 잘되게 설명해주셔서 다른 내용도 별코딩님 스타일로 배우면 참 좋겠네여 ,,,,😍😍😍
정말요?! 감사합니다! 아직 유료강의 계획은 없지만, 나중에 꼭 찍어보고싶네요 ㅎㅎ
강의 너무 감사합니다!
영상 봐주셔서 감사합니다! :)
강의 너무 깔끔하고 이해가 잘 되네요 ㅜㅜ 감사합니다! 바로 구독버튼 누르고 가요👏
경주님 감사합니다!! 😆😆
두고두고 보겠으...
두고두고 봐주세요~ 😄
감사합니다 잘봤습니다 덕분에 이해됐어요
영상 봐주셔서 감사해요! 😆
당신은 천재입니다제가 살면서 전공변경이 넘 많아서 이런저런 수업을 많이 들었는데요. 본인만 똑똑하고 못가르치는 교수들이 많았는데, 별코딩님은 진짜 미쳤네요. 해외 유명 강의 영상도 책으로 이해 안되는것도 다 이해시켜주시네요..나중에 유료강의 개설해주세요. 꼭 들으러 갈께요😄
과분한 칭찬은 심장에 무리가 옵니다~🥰🥰 도움이 된것 같아 정말 기뻐요! 전공 변경이 많았다고 하셨는데, 개발쪽 전공은 적성에 잘 맞는것 같으신지 궁금하네요. 책도 좋은 방법이지만, 엑티브하게 발전하고있고, 자주 업데이트가 되고있는 프레임워크는 책보다는 공식문서/최근 강의로 배우는게 더 효율적인 방법 같아요!
@@starcoding 그동안 화공엔지니어, 항해사, 학원강사 등등.. 전전긍긍하다. 캐나다에 정착하며 새롭게 직장을 찾기 위해 현지에서 부트캠프 듣고 있습니다ㅠ 우선은 먹고 살아야하니 시작했지만 배우다보니 흥미도 생기고 재미있습니다~ 말씀해주신대로 책이나 문서를 다 읽을 시간은 없고, 최근강의!를 찾다가 별코딩님 채널을 알게됐습니다
천재란말 인정 진짜 간란명료 하고 대박입니다
와 최고입니다!
와 감사합니다!
감사합니다! 😆
고품질의 강의 감사합니다...
너무나 훌륭한 강의입니다. 대박... 감사합니다. 꾸벅 꾸벅😍🤩
감사합니다!! ❤️
설명이 너무 깔끔해요!!
영상 봐주셔서 감사해요 ㅎㅎ 😄
좋은 영상감사합니다. 도중에 하나 의문점이 생겼는데요
유즈이펙트 문법상 의존성 배열은 옵셔널인데 옵셔널인 것으로 봐서는
의존성 배열 없이도 쓸 경우가 있을 것 같은데 어떤 경우 인지와 그 경우라면 굳이 유즈이펙트를 쓰는 이유가 있는가 입니다.
의존성배열없이 쓰는 유즈이펙트내부의 코드는 유즈이펙트를 쓰는 함수 내에서 리렌더링이 발생하면 계속 실행될텐데 굳이 유즈이펙트안에 작성해야 하나 싶어서요
side effect 처리 용도로 사용 할 때, 의존성 배열 없이 사용 합니다
깔끔정리 감사합니다!
감사합니다! 깔끔했다니 다행이네요~ 도움이 되셨길 바랍니다!
사랑합니다
이 영상 보고 바로 구독함
구독 감사합니다!!
so clear
😆😆😆
강의대로 똑같이 입력했는데, timer가 실행되기 전에 cleanup 함수가 먼저 호출되네요..
사용 브라우저는 크롬입니다.
Timer.js:11 타이머가 종료되었습니다.
3Timer.js:6 타이머 돌아가는중...
Timer.js:11 타이머가 종료되었습니다.
열심히 비교해봐도 강의 속 코드랑 똑같은데 이유를 모르겠습니다
흠... 혹시 useEffect의 return문에 콜백 그 자체를 리턴하신게 아니라 함수를 부르신게 아닐까요? return () => { clearInterval(timer )} 가 아닌 return clearInterval(timer)를 하시진 않으셨는지 확인해보시면 좋을 것 같아요!
리액트 옛날방식 클래스 setState 만드는거부터해서 포기안하고 훅까지 왔어요 ㅠㅠ 리액트 자체가 너무 생소해서 컴포넌트 개념 이해하는데도 시간이 꽤 걸렸는데 세상에 이렇게 군더더기없이 깔끔하게 강의하시는분은 처음봅니다. 덕분에 진짜 리액트훅에 취하게되었네요 와… 유료강의 출시안하시나요 ㅋㅋ 진짜.. 강의계 별이신듯..
너무 멋지십니다! 새로운 개념을 이해해야하기때문에 리액트도 진입장벽이 꽤 있는 편인 것 같아요. 잘 이겨내신것 같아 기쁩니다! 영상이 도움이 된것 같아 기쁘네요 ㅎㅎ 유료강의는 아직 계획에는 없지만 기회가 된다면 해보고 싶네요😄
Thank you
😃진짜로 좋은 강의 감사드려요😄
질문이 있는데요~ 그대로 따라해봤는데, 마운트 될때 useEffect의 리턴값에 있는 콘솔값("타이머가 종료되었습니다")이 한 번 찍히고나서 타이머가 시작되는데 왜 그럴까요??
저도 콘솔값("타이머가 종료되었습니다") 한번 찍히고 시작되네요. 왜 그렇죠? 저도 궁금합니다. ㅠ
index.js 파일 안에 을 감싸고 있는 를 지워주시면 정상작동 할거예요 ㅎㅎ 하지만 리액트로 프로젝트 개발하실때는 항상 를 활성화 해두시는걸 추천드려요! 코드에 여러가지 잠재적 문제점들을 콘솔에 보여주거든요 ㅎㅎ
와 쉬운설명 감사합니다:) 별코딩님 혹시 폰트가 뭔가요?
Canva 에서 제공해주는 여러 폰트를 섞어서 사용하고 있어요. 확인해보니까 제목은 kollektif 폰트네요 ㅎㅎ
지렸다
와.. 진짜 미쳤다ㅜㅜ 형님!! 혹시 리액트 18버전 공식문서 기반으로 유료강의 만드실 의향없으신가요?? 정말 유료강의 있으면 듣고싶은 강의력이에요. 너무 이해가 잘돼요!!
아직 계획은 없지만 기회가 되면 꼭 만들어보고싶어요!
강의 감사합니다 .. 복습용으로 다시 보고 있는데 { && showTimer} 이렇게 하면 작동이 안되는데 {showTimer &&} 이렇게 하면 작동이 되는건 무슨이유일까요 ? 매번좋은 강의 감사합니다
&& 문법은, 왼쪽 피연산자가 true일때만 오른쪽 피연산자를 리턴하는 문법입니다. {showTimer && }의 경우 showTimer가 true일때만 를 리턴하게 됩니다 ㅎㅎ
@@starcoding 감사합니다
미쳤다 띵강bb
와...엄청 신기하네요.
useEffect 별도로 연습해보았는데요.
effect에서 버튼을 눌렀을 때, Timer effect가 동작 되는 것을 확인 할 수 있었는데요.
[] 를 할 때는 마운팅 됐을 때만 동작 된다고 했는데요.
한 번 더 눌렀을 때 Timer의 return이 동작 되는 원리에 대해서 궁금해서 여쭤보게 되었습니다. ㅜㅜ
저건 그냥 이런거구나 하고 외워야 하는 걸까요??
한번 더 눌렀을 때 컴포넌트가 unmount 되기 때문에 실행되요
질문 하나 해도 될까요? Timer 컴포넌트 내용에서 const time = setInterval(()=> { }) ; 형태로 정의를 했는데... 정작 time() 식으로 time함수를 실행한 적이 없는데... 왜 setInterval함수가 작동하는 거죠?
정의한 함수를 실행해야 함수가 작동하는 것이 아닌가요?
setInterval은 우리가 직접 만든 함수가 아닌, 브라우저에서 제공하는 함수입니다! setInterval은 "콜백함수"를 인자로 전달받고, 우리가 setInterval(콜백함수)로 호출해주면, 내부적으로 n초 뒤에 호출을 해줍니다. 함수를 호출하는 코드는 setInterval의 내부 구현사항에 있겠지요!
참고로, setInterval의 반환값은, 함수가 아닌, 타이머의 id 입니다!
정말 감사히 잘보고있습니다! 저는 예제 1에서 처음에 마운트될때 로그에 랜더링이 두번 찍히는데 왜이러는걸까요?!
index.js 파일에 를 지워보시면 정상적으로 하나만 출력될거예요 ㅎㅎ
감사합니다!!
감사합니다😊
안녕하세요 좋은 강의 정말 감사합니다! 처음 영상봤는데 집중해서 보게되었네요
한 가지 질문이 있습니다.
mount되는것은 화면에 렌더링이 되는것이고,
unmount 되는것은 화면에서 제거되는것인데 그게 시각적보이는것을 mount unmount로 표현한걸까요??
용어가 조금 헷갈리네요ㅜㅜ
Mounting - "리엑트 컴포넌트가 첫 렌더링이 되어서 DOM상에 올라갈때" 라고 생각하시면 됩니다! Unmount는 그 반대로 DOM에서 사라질때라고 생각하시면 되구요 😄
useEffect의 clean up 작업은 해당 함수 컴포넌트가 사라지면 return 함수 안에 코드가 실행되는 건가요..?!
해당 컴포넌트가 언마운트 될때, 그리고 useEffect가 의존성의 변화로 인해 다시 불려지기 이전에 클린업이 실행됩니다! 클린업 작업은 useEffect에 내부에서 리턴해준 콜백함수예요 ㅎㅎ
화면에 먼저 (리)렌더링 된 후, 컴포넌트가 (다시) 호출 된다고 생각하면 되나요?
"렌더링"이라는 프로세스 안에 "컴포넌트 함수 호출"이라는 단계가 포함되어있다고 생각하시면 될 것 같아요 😀😀
선생님 사랑해요 ㅠㅠ
감사합니다!! ㅎㅎ
우선 정말 좋은 강의에 감사드립니다. 고맙습니다. (_ _) 그런데 선생님께 질문이 하나 있습니다. 타이머에서 시간을 1초로 하였고 선생님 화면에서는 개발자도구의 숫자가 1씩 증가하는데, 시간은 1초지만 숫자가 2씩 증가하는 경우는 왜 그럴까요 ㅠㅠ. 또한 cleanup을 위한 return문을 추가하면 최초 버튼 클릭시점에 "타이머가 종료되었습니다" 라는 내용이 콘솔 최상단에 표시가 됩니다.ㅠㅠ
답글을 부탁드립니다^^;
index.js에 있는 태그를 한번 지워보시겠어요? Strict mode를 활성화 시키면 useEffect가 두번씩 실행이 되는데 리엑트 18 버전부터는 콘솔에 두번찍 찍히더라구요! 의존성으로 빈 배열이 잘 들어갔는지도 확인해주세요 😄
@@starcoding 앗...선생님 말씀이 맞네요^^ 감사합니다^^ - PS: 리액트 전반에 관한 강의/도서 출판 계획은 없으신가요?
저도 이 문제 때문에 고민했는데 strict mode 때문이었다니ㅠㅠ.. 지우니 잘 되네요..! 감사합니다!
안녕하세요. 질문이 있어서 댓글 남깁니다. react 18에서 실행했보았는데 다르게 실행 되었습니다. 버튼을 클릭 하면 먼저 타이머가 종료 되었습니다. 가 찍힌 후 "타이머 돌아가는 중...으로 타이머로 작동 후 다시 버튼을 클릭 하면 다시 타이머가 종료 되었습니다. 라고 콘솔에 찍히는데
다른 버전에서는 원래대로 실행 됩니다. 어떤 이유 때문에 타이머가 종료 되었습니다.가 먼저 뜨는지 알 수 있을까요?
Create React App으로 리액트 앱을 만들 때 기본적으로 추가되는 Strict mode 때문에 그렇습니다! Strict mode는 리액트로 개발할 때 코드상에 문제점들을 미리 검사하고 콘솔에 알려주는 역할을 합니다. 검사 과정에서 useEffect를 한번더 실행시키기도 하고요. 리액트 18
이전 버전에서는 두번째 실행된 useEffect의 결과를 콘솔에 출력하지 않았지만, 리액트 18 부터는 출력하도록 변경되었더라구요.
Strict mode를 해제하시려면, index.js에 있는 태그를 없애주시면 됩니다. 그러면 예상한 결과대로 콘솔에 출력될거예요 😄
@@starcoding 자세한 댓글 설명 감사합니다. Strict mode에서 useEffect 한번 더 실행 하는 이유는 코드상 리액트가 문제점을 다시 한번 파악하기 위함인가요?
네, 맞습니다. 여기 공식문서 링크를 확인해보시면 도움이 되실 것 같아요! ko.reactjs.org/docs/strict-mode.html#:~:text=StrictMode%20%EB%8A%94%20%EC%95%A0%ED%94%8C%EB%A6%AC%EC%BC%80%EC%9D%B4%EC%85%98%20%EB%82%B4%EC%9D%98%20%EC%9E%A0%EC%9E%AC%EC%A0%81,%EC%98%81%ED%96%A5%EC%9D%84%20%EB%81%BC%EC%B9%98%EC%A7%80%20%EC%95%8A%EC%8A%B5%EB%8B%88%EB%8B%A4.
2개의 질문이 있는데 질문 드려도 될까용?~~
Q1. useEffect 를 사용하지 않고 해당 click 이벤트에 바로 코드를 추가 하면 안될까요?
Q2. Timer 예제중 return 은 Timer 컴포넌트가 unmount 가 될때 return 값이 생기는 걸까욤?
왜 Timer 가 실행될때 return 은 실행이 안될까욤?
onClick과 useEffect는 완전히 다른 용도입니다. onClick 속성으로 넣어준 콜백함수는 "클릭시 호출되는" 함수이고, useEffect 내부에 있는 콜백함수는 "렌더링시 (의존성 배열에 따라) 호출되는" 함수입니다. 어떻게 사용하는지에 따라 겹치는 결과도 있겠지만, onClick과 useEffect는 완전히 다른 의도를 갖고있습니다!
useEffect 내부에서 리턴되는 콜백함수는 정리 작업입니다. 정리 작업은 다음 순서의 useEffect가 호출되기 이전에 호출이 됩니다. 이 부분은 리액트의 내부 구현사항입니다 :)
@@starcoding 와~ 답글 완전 감사합니다
정말 잘 배우고 있습니다
진심으로 감사드립니다
함수형 컴포넌트는 렌더링될때마다 모든 코드블록이 실행되는데 ,
그렇다면 useEffect에 아무인자를 전달하지 않는 것과,
useEffect을 사용하지 않고 밖에 빼두는 것과 아무 차이가 없는 것 아닌가요??
dependency array가 있는 경우를 제외하고는 굳이 useEffect를 사용해주는게 필요한가요??
useEffect는 렌더링 "이후에" 실행이 됩니다. 컴포넌트가 렌더링이 완료되길 기다린 후에 실행이 되는거죠.하지만 useEffect 밖으로 빼놓은 코드는 리엑트가 JSX를 리턴하기 전에 실행이 되겠지요!
하나의 경우를 더 생각해보자면, ref를 사용해서 DOM 노드를 참조해하는 코드인 경우 useEffect 외부에서 ref에 접근을 한다면 화면에 렌더링 되기 이전이기때문에 DOM노드가 아닌 undefined가 나올 수 있습니다 :)
@@starcoding 와우 항상 궁금했는데 명쾌한 설명 그리고 예시까지 감사합니다!!
좋은 강의 감사합니다! 질문이 있는데요, clearInterval ( timer ); 에서 timer는 컴포넌트로 선언한 Timer랑 같은 거죠? 컴포넌트를 함수의 인자로 쓸 때는 소문자로 쓰면 되는건가요?
clearInterval(timer)에 들어간 timer는 setInterval의 반환값으로 받아온 타이머의 id 입니다! Timer 컴포넌트가 아니예요 ㅎㅎ
@@starcoding 감사합니다!!
이사람 강의 깔끔하네엄청 조회수 낮은거 아쉽다
감사합니다! 정말 힘이 되는 댓글입니다!! 더 좋은 영상으로 또 찾아뵐게요 😍
저는 콘솔이 2개씩 카운트가 되는 데 무슨 차이일까요?
index.js 에 가 있어서 그렇습니다! StrictMode를 잠시 지워주시고 돌려보시면 하나만 나올거예요 ㅎㅎ
@@starcoding 그렇네요 고맙습니다. StrictMode는 잘 안쓰이나요 ?
@@이창호-s7n StrictMode는 없어서는 안될 기능입니다! 특히나 리액트 훅을 사용하면서 문제가 생길 수 있는 코드가 작성되었다면 콘솔에 적절한 경고메세지를 출력을 해주거든요 ㅎㅎ 저 개인적으로도 StrictMode로 수많은 문제들을 조기에 발견해서 여러 잠재적 버그를 피한 경험이 있습니다. StrictMode는 렌더링을 한번씩 더 해주면서 문제를 점검하기때문에, 콘솔에 한번씩 더 출력되는게 불편하실때만 잠깐씩만 지워주시는걸 추천드려요!
@@starcoding 궁금한게 있습니당.. 만약 strictmode가 있는 상태에서 useEffect에서 api요청을 한 후 data라는 이름의 state에 담는다고 한다면, strictmode일땐 api 호출도 두번 일어날텐데, 그럼 data라는 이름의 state가 비었냐 안비었냐 같은 조건을 걸어서 한번만 호출되게끔 처리를 하는 게 옳은 건가요?
최공 😚
이해 잘되네요 감사해요
질 좋은 강의 감사합니다! 질문 하나만 해도 괜찮을까요?
어떤 코드에 useEffect를 의존성 배열 없이 사용했을 경우와
useEffect를 사용하지 않고 쌩으로 코드를 쓰는 경우 어떤 차이가 있나요?
매번 렌더링 될 때마다 호출되는 것은 같겠지만 무언가 차이가 있지 않을까 싶어서 궁급합니다!
큰 차이는 없지만 조금 더 자세히 이야기해보자면, useEffect는 렌더링 "이후에" 실행이 됩니다. 컴포넌트가 렌더링이 완료되길 기다린 후에 실행이 되는거죠.하지만 쌩으로 코드를 쓰면 리엑트가 JSX를 리턴하기 전에 실행이 되겠지요!
제 개인적인 의견을 덧붙이자면, useEffect로 감싸주는게 코드가 더 보기 좋은 것 같아요 ㅎㅎ 하나의 비즈니스 로직을 하나의 useEffect로 나눠서 담으면 유지보수 하기도 한결 편해지니까요 :)
@@starcoding아하 로직을 나누는 걸로도 볼 수가 있군요ㅎㅎ 정성스런 답변 너무 감사합니다!
제가 useEffect를 사용하지않고 setinterval로 1초마다 사진을 변경하는 코드를 짜보았는대 멈추는 코드 또한 넣었지만 계속해서 재렌더링 되는바람에 멈추는 코드가 작동하질않았습니다.
인프런돈주고하는것보다 훨나은데염..
과찬이십니다 ㅎㅎㅎ 영상 봐주셔서 감사해요! 😄
쉽다쉬워
쉽다 쉬워~~😁
깔끔한 설명 감사합니다!
영상 봐주셔서 감사해요!
감사합니다 좋은강의 보고갑니다.
감사합니다! :)