React Hooks에 취한다 - useState 15분만에 마스터하기 | 리액트 훅스 시리즈

[@뚜루루뚜-o8w]

useState에 heavyWork()를 직접 할당하는 경우에는 왜 heavyWork 함수 내부 console.log가 렌더링마다 찍히는 건가요?? 콜백 함수의 return 값으로 heavyWork()를 넘기면 맨 처음 렌더링 시에만 값을 할당하는 건 이해가 되는데 왜 콜백 함수로 return 하면 처음 렌더링 시에만 값을 할당하고 직접 heavyWork()를 할당하는 경우에는 렌더링마다 내부 console.log가 찍히는 건지 궁금합니다!

[@비질란테-l8e]

유료 강의 에서 useState 콜백함수가 기존의 배열,객체 파라 미터를 가진다는걸 안알려줘서 저 파라미터는 어디서 나왔나 했더니 콜백 함수의 기본인자 였군요.. 유료 강의 보다 값진거 같습니다. ㅠㅠ

[@박신우-p8j]

useState초기값에 콜백함수로 처리하는 방법은 몰랐는데 덕분에 하나 더 알아가고 갑니다!! 감사합니다 선생님 다른 hook강의들도 잘보고 있어요!!

[@jennyhill353]

와 useState는 알고있어서 그냥 넘어갈까했는데 강의 시간이 좀 길어서 혹시나해서 끝까지 봤는데 제가 알고있는게 끝이 아니었네요!!.. 콜백함수 넣는 부분 몰랐던 부분입니다!!! 너무 잘 만들어진 교육영상 이에요!!! 좋은 질의 강의를 무료로 볼 수 있게 해주셔서 감사드립니다!!

[@starcoding]

영상이 도움이 된것 같아 기쁘네요! 사소한 부분이지만 알고있으면 도움될 일이 종종 있더라구요 :)

[@notenore]

useState강의 중 최고네요!!

[@hahayoyo-s7m]

useState 를 안쓰고 그냥 let time = 1; onClickButton () => { time += 1; } //DOM: {time} 시 이렇게 하는거랑 useState 쓰는거랑 차이가 뭔가요?

[@starcoding]

State와 지역변수의 차의점을 말씀드릴게요. State가 (setState함술르 사용해서) 변경이 되면 컴포넌트가 다시 렌더링 되지만 지역변수의 변경은 렌더링을 발생시키지 않아요. 또한 컴포넌트 렌더링시 state값은 유지가 되지만 컴포넌트 내부의 지역변수는 다시 초기화가 됩니다! time을 지역변수로 사용하면 버튼이 클릭될때마다 내부적으로 변수의 값은 바뀌겠지만, 렌더링을 발생시키지 않기때문에 화면이 업데이트가 되지 않겠죠? 만약 또 다른 state가 하나 더 있다면, 그 state가 변경될때마다 컴포넌트는 다시 렌더링되기때문에 time 지역변수는 매번 1로 초기화가되어요 (let time = 1; 로 선언/초기화 했기 때문이죠) - 이 부분은 useRef #1 변수관리 강의를 참고하시면 좋을 것 같아요!

[@heimdalonline-vp4ho]

13:44 15:07 useState(() => {}) 무거운 작업에 대한 초기화 / 리렌더링되더라도 1번만 초기화

[@marigoldj]

영상보다가 궁금한점이 생겨 댓글남깁니다. useState에 인자로 콜백함수를 넣는거에 대해 구글링해도 잘 못찾겠어서...ㅠㅠ useState 안에 콜백함수를 넣는것은, useEffect에서 두번째 인자에 빈 배열을 넣어 한번만 렌더링되도록 하는것이랑 비슷한건가요?

[@starcoding]

비슷하지만 조금 다른 개념인것 같아요! 함수형 컴포넌트는 말 그대로 "함수"이기때문에, 렌더링이 될때마다 불려지게되요. 그렇기때문에 useState의 초기값을 생성하기위해 함수를 불러야한다면 그 함수가 렌더링 되때마다 매번 불려지는거고요. useState(( ) => { ... }) 와 같이 콜백을 넣어주면 리액트 자체에서 "lazy"하게 맨 처음 렌더링시에만 해당 콜백을 불러줘요. 더 자세한 내용은 여기 공식문서를 확인해보면 좋을 것 같아요. reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily

[@김용민-t2j]

복습 겸 들어보는데 진짜 좋네요....ㅎㅎㅎㅎ 정말 좋은 설명 감사합니다~!!! 많은 주제로도 양질의 강의 부탁드립니다!

[@kuberandy]

감사합니다:) 2년차 백엔드 개발자인데 프런트 업무를 급하게 해야해서 마음이 어려웠는데, 도움 받고 있습니다 열심히 해서 결과 만들어 내겠습니다 감사합니다!

[@starcoding]

영상이 도움이 된것 같아 너무 기뻐요! 갑작스럽게 프론트엔드 업무에 투입되어서 스트레스가 많으시겠네요. 화이팅하셔서 멋진 결과물 만드시길 바랄게요!!

[@4thdraw]

과도한 재랜더링을 안하기 위한 동기 적 처리 를 알려주시고 계셨군요 단연 리액트의 바른 사용법 ~ 감사합니다 또 보러 왔습니다

[@starcoding]

또 와주셔서 감사해요 ㅎㅎ 리액트 공부 화이팅입니다!!😆

[@찰리채플린-z1f]

다음 프로젝트가 리엑트 여서 이강의 저강의 유명한 유튜브 것들 다 봤는데 별코딩이 최고입니다...구독했습니다.

[@html9247]

와 설명이 너무 깔끔하고 알차서 좋네요 잘 배워갑니다 :)

[@정주영-f1m]

여태껏 봤던 강의중에 제일 좋아서 구독 눌렀어요 앞으로도 좋은강의 많이 부탁드려요

[@starcoding]

감사합니다 주영님! 더 좋은 영상으로 찾아뵐게요 😁😁

[@찰리채플린-z1f]

수업을 끝까지 다들었는데 정말 최고입니다. 혹시라도 next.js 강의가 등장한다면.. 제일먼저 별코딩 수업을 들으러 오고싶습니다.

[@이탱-i4t]

무거운 작업이 동반될때 useState 안에 함수가 별도로 들어갈 수 있다는걸 이번에 처음 알게됐어요 설명 감사드려요 !

[@몰랑-q3d]

와 react 설명 너무 잘하셔서, 잘 배워갑니다!!

[@heimdalonline-vp4ho]

6:45 useState 기본 내용 스킵

[@영수최-s3d]

안녕하세요 영상보다가 궁금한것이 있어서 댓글남깁니다 handleUpload 에서 setNames((prevState) =>{}) 이 부분이 잘 이해가 안되는데 prevState 에 어떻게 names가 들어있는건가요? setNames 가 names를 업데이트해주는거로 이해했는데 setNames 는 업데이트하기전 names의 값을 기본적으로 가지고있는거로 이해하면되는걸까요?

[@starcoding]

네! 맞아요. setNames( (prevState) => { ... } ) 와 같이 해주면 setNames 가 실행될때 자체적으로 우리가 넣어준 콜백함수를 불러서 prevState에 업데이트 이전의 상태값을 넣어줘요. 그렇기 때문에 { ... } 내부에서 새로운 상태값으로 업데이트 해줄때 prevState에 접근해서 연관된 값으로 업데이트 해줄수 있습니다! Stack Overflow 에도 비슷한 질문에 대한 답변이 나와있네요 ㅎㅎ stackoverflow.com/questions/46863825/setstate-implementation-in-reactjs

[@정소희-j7z]

와 이해 쏙쏙 돼요! 감사합니다~ 관련 영상 전부 들어야겠어요😊

[@mihyunlee1065]

역시 주말은 별코영상 정주행이죠....😋

[@starcoding]

늘 보러와주셔서 감동이예요~~~~ 감사해요!!

[@wiselily]

안녕하세요! 강의 잘 보고있습니다. 한가지 궁금한 부분이 있어서 질문드립니다! 함수컴포넌트는 state가 업데이트 될 시 함수컴포넌트가 전체적으로 재랜더링이 일어난다고 알고있는데요. 그럼 const [number, setNumber] = useState(1)이라고 설정해두었을때 어떤 동장에 의해서 state가 변경되더라도 매번 재랜더링이 되고 재할당이 되면 state는 계속 초깃값 1을 가져야하는거 아닌가요..? state가 어떻게 이전값을 가지고 있는건지 궁금합니다..

[@우녱]

14:11 에서 state 초기 값을 함수의 리턴 값으로 하셨는데 그냥 변수에 담아서 지정해도 되는거 아닌가요? 함수로 하신 이유가 궁금합니다! 훅 관련 영상 너무 유익하게 잘 보고 있어요 감사합니다!!

[@우녱]

아 혹시 콘솔에 찍어보려고 함수로 하신 건가요? 라는 추측을.. 남겨봅니다..!😶

[@starcoding]

함수형 컴포넌트는 말 그대로 "함수"이기때문에, 렌더링이 될때마다 불려지게됩니다. 그렇기때문에 useState의 초기값을 생성하기위해 함수를 불러야한다면 그 함수가 렌더링 되때마다 매번 불려지는거고요. useState(( ) => { ... }) 와 같이 콜백을 넣어주면 리액트 자체에서 "lazy"하게 맨 처음 렌더링시에만 해당 콜백을 호출하게됩니다. 더 자세한 내용은 여기 공식문서를 확인해보면 좋을 것 같아요! reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily

[@우녱]

@@starcoding 감사합니다🙂

[@sflo609]

면접준비하느라 강의보면서 계속 정리하고 있는데... 알고쓴다고 생각했던것들도 생각보다 모르는 개념들이 많네요 결국 useState까지 다시 돌아왔습니다 항상감사합니다 👍🏻👍🏻

[@starcoding]

아무리 열심히 준비해도 충분하다는 느낌이 들지 못하는 일이 면접 준비가 아닐까 싶습니다 ㅎㅎ 영상이 정리하시는데 도움이 되셨길 바라요! 좋은 결과 있길 바라겠습니다, 화이팅입니다! 💪

[@잠닷]

강의가 너무 좋습니다 선생님!! 감사합니다!! 근데 2가지 질문이 있습니다!! [ 1. ] input태그에 change이벤트를 연결해서 state가 변할 때마다 리렌더링이 되는 것은 성능의 저하를 일으키지 않나요?? 제 생각에는 Upload 버튼을 클릭 할 때만 input태그의 value만 가져오면 되는 것 같아서 App 컴포넌트 내부에서 useRef를 사용해 input태그를 할당하거나, App 컴포넌트 외부에서 documen.querySelector()로 할당하면 될 것 같아서요!! [2. ] useState()를 사용할 때 const 라는 키워드를 사용하는 이유가 무엇일까요?? const 키워드는 상수라서 값의 재할당이 불가능한 키워드인데, 영상에서 리렌더링이 될 때마다 const names, const input 에 문제없이 변경된 state값이 재할당되는게 이해가 안갑니다ㅠㅠㅠ

[@kim_chovy]

1년전 댓글이라 보실진 모르겠지만 달아둡니다. 1. 강의에서처럼 매번 값의 변화마다 화면에 직접적으로 리렌더링이 필요한 작업일 경우에만 사용하시면 됩니다. 2. 함수형 컴포넌트이기에 직접적으로 변수값을 변경시키는게 아닌 함수 자체를 재호출하는 개념이라 그렇습니다. State가 업데이트되며 이때 렌더링되는 함수의 내부값이 변경되는 것은 Const로 정의된 초기값을 변경하는 것과는 다른 개념입니다. 자세한 설명은 다른 댓글의 답글로 별코딩님이 달아두신걸 참고하셔요

[@doitclick4906]

useState(함수의 속성으로 받아온 대상값)은 내용물을 까보면, 2개의 index를 가진 배열로 되어있습니다. 그중에 대상값에 대해 0번째 값이 “함수의 속성으로 받가온 대상값”이 되며, 1번째 값이 “함수의 속성을 변경하는 함수”로 이루어져있습니다. 우리가 사용하는 hook을 선언하는 형태를 보면 const [ value, setValue ] = setState(props.value)로 되어있는데 const로 한 이유는 value값을 setValue만 변경 할 수 있도록 하기 위함입니다.

[@오하오-x9s]

유료인강듣다가 코드만 냅다 치고 설명도 부실해서 이해하기 힘들었는데 덕분에 usetState에 대한 이해가 조금 생긴거같습니다. 감사합니다~

[@doitclick4906]

오 콜백은 생각 못했는데 유익했습니다 감사합니다 :)

[@literary-sensibility]

지렸다! 내가 찾던 강의!!! 정주행 하겠습니다.

[@starcoding]

우와! 정주행 감사합니다! 😆

[@rebehayan]

내용 좋네요 ^^ 오래오래 해주세요~ ㅎㅎ

[@starcoding]

좋아요!! 영상 보러와주셔서 감사합니다~

[@changjunpark996]

강의를 너무 잘봤습니다. 강의의 마지막 부분에 callback함수를 호출하였을때 해당 함수를 한번만 호출하는 이유는 무었인가요? 어떤이유로 한번만 호출되는지 알려주시면 감사하겠습니다.

[@befleet]

12:16에서 setNames 안에 콜백 함수가 아닌 setNames([...names, input]);으로 해도 동작이 되는데 콜백을 사용한 것과 단순히 setNames를 사용한 것의 차이가 있을까요?

[@starcoding]

setState함수는 비동기적입니다. 그렇기때문에 언제 정확히 state가 변경되는지는 알수가 없지요. 그말은 setNames가 실행이 되기 이전에, 다른 코드로 인해 예상치 못하게 state가 변경되는 일이 발생할 수 있습니다! 변경할 state가 이전 state값에 의존한다면, 문제가 생기는거지요. setState에 콜백을 사용하면, 이전 state값을 인자로 받아올 수 있기 때문에 이 문제를 해결 할 수 있습니다! 😄

[@befleet]

@@starcoding 그렇다면 콜백 함수를 사용하는 것은 nextTick 함수를 쓰는 것과 같은 효과를 보장한다고 생각하면 되나요?

[@얼그레이-m1j]

좋은 강의 감사합니다! 훅 정주행 가겠습니다

[@jisikbook]

혹시 질문이 있는데 const [val, setval] = useState("init") 일때 리액트에서 useState는 변수를 다루는 훅인데 왜 let을 쓰지않고 const를 사용하는 것일까요?

[@starcoding]

val이 let이 될 이유가 전혀 없기 때문입니다! 우리가 state를 업데이트 시켜줄때, val 이라는 변수에 직접적으로 접근해서 값을 변경하지 않습니다. 예를들어서 val = 3 이런식으로 하지 않는것 처럼요. 대신, useState에서 반환된 setVal이라는 함수를 통해 setVal(3) 이렇게 업데이트 시켜주지요. state가 업데이트 되면, 렌더링이 발생하지요? 함수형 컴포넌트는 "함수"이기때문에, 컴포넌트에 해당하는 함수가 다시 호출이 됩니다. 이때 컴포넌트 함수 내부에 있는 val이라는 변수는 새로 생성되어서 업데이트 된 state값으로 다시 "초기화" 되지요. 이미 존재하는 변수에 값을 재할당 하는것이 아니기때문에 let을 사용해야하는 이유가 없습니다!

[@jisikbook]

@@starcoding 아 그렇군요... 설명 감사합니다. ^^b

[@bborsche]

선생님 4:54초 콘솔로그 업데이트문이 핸들클릭 함수블록 안에 있어야 그러니까 7번째줄 밑에 와야 업데이트버튼을 클릭햇을때 콘솔에 찍히는거라고 저는 생각했는데 지금처럼 콘솔로그문이 밖에 있을 때 어떻게 저렇게 동작하는지 동작원리가 궁금합니다!

[@starcoding]

State의 변화가 생기면 컴포넌트는 렌더링이되죠? 함수형 컴포넌트는 말그대로 자바스크립트 "함수"이기 때문에 렌더링이 된다는 것은 컴포넌트를 의미하는 함수가 불린다는거예요. 우리의 App이라는 컴포넌트 함수가 불리면 10 번줄을 포함한 내부에 있는 모든 코드들이 실행이 되기때문에 콘솔이 찍히는거예요 :)

[@qkdrk262]

별코딩님 강의 너무 유익하게 잘봤습니다! 꼭 머기업 되세요ㅠ

[@manyoung-gi3vi]

만약 비동기로 가져오는 함수를 초기값으로 써야 할경우 콜백함수 를 비공기로 사용할 수 있나요??

[@윤미숙-n7w]

지금 리액트를 배우고 실무에서 사용하는데 usestate 응용하는 부분이 항상 어려웠는데 쉽게 설명해주셔서 이해가 잘되네요 감사합니다~!

[@starcoding]

영상이 도움이 된 것 같아 기뻐요! 화이팅이예요 :)

[@jisikbook]

리액트 훅에 대한 강의 정말 잘 들었습니다. 다른 유튜브 영상보다 이해가 잘 되었어요^^

[@starcoding]

감사합니다! 😄😄 더 유익한 영상으로 찾아뵐게요!

[@sangwon-]

안녕하세요. 자바스크립트를 공부하다가 우연히 보게되서 시청하던 도중 궁금한게 있어서 질문드립니다! 예제1에서 7번 줄을 보면 setTime(time + 1); 과 같이 작성해 주셨고, 해당 코드가 잘 이해가 되지 않아서 검색을 통해 다른 글을 찾아봐도 setBoard([newList, ...List)] 이런식으로 작성이 되어있어서 스프레드 문법은 이해가 가는데, 왜 setTime = time +1, setBoard = [newList, ...List] 처럼 같이 작성하는게 아닌지.. 어떤 내용을 다시 봐야하는지 궁금해서 작성하게 되었습니다. 두번 세번 반복해서 학습해야겠다는 생각이 드네요.. 감사합니다!

[@starcoding]

useState(초기값)로 부터 반환되는 배열의 두번째 요소인 setTime은 state를 변경시킬때 사용하는 "함수"입니다. 리액트에서 제공해주는 API이기 때문에 React에서 정해놓은 방법을 따라야한다고 생각하시면 됩니다. setTime함수의 인자로 새로운 값을 넣어주면, 해당 값이 곧 새로운 state가 됩니다 - setState(time+1)의 경우 time+1로 평가된 값이 곧 새로운 state가 되겠지요. 😄

[@재주꾼불당늘보불당개]

깔끔한 설명 감사합니다. 이해가 잘 되네요~~

[@starcoding]

이해가 되셔서 기쁩니다! 영상 봐주셔서 감사합니다! :)

[@cgcg5323]

안녕하세요! 좋은 강의 잘 봤습니다. handleUpload에서 꼭 setNames안에 콜백을 넣어야 하나요? setNames([input, ...prevState])로 하면 안되나요?

[@starcoding]

콜백 대신 값으로 넣어도 괜찮습니다! 하지만, 여러개의 setState호출문이 같은 state를 동시에 업데이트를 시도할때는 콜백을 넣어주는것이 좋습니다

[@yeonggwangkim5756]

며칠동안 이해가 안되는 부분을 속 시원하게 알려주셔서 구독 좋아요 누르고 갑니다.

[@starcoding]

감사합니다!! 도움이 되었다니 다행이네요 😊😊

[@소소한즐거움-x9c]

좋은 강의 감사드립니다. 바로 구독 좋아요 누르고 갑니다. 강의 마지막에서 heavyWork 자체가 함수니 useState(heavyWork) 해도 되는거겠죠?

[@성이름-n8e5u]

혹시 react 강의 예제 소스들은 github 같은 곳에 따로 올리신게 없을까요?

[@rigood4235]

콜백함수를 넣어주면 왜 맨 처음 렌더링 해줄때만 함수가 호출되나요? 😮😮 그냥 그렇다~ 하고 받아들이면 되나요?? ㅠㅠ

[@starcoding]

useState의 내부 구현사항이여서 그렇지요 ㅎㅎ 비용이 많이드는 초기값 계산을 위해 리액트가 제공하는 기능입니다 😊

[@IIiIIllIil]

상세한 설명 감사용

[@seyuncho2747]

멋진 강의입니다. 많은 도움이 됐어요

[@starcoding]

감사합니다! 도움이 되었다니 기쁘네요 ㅎㅎ

[@SL-lz4ij]

prevState는 저기에 언제 들어가는건가요? setName에 대한 콜백함수여서 그런건가요? ( 그냥 아무말이나 한거에요 콜백함수가 뭔지도 정확히는 모릅니다)

[@starcoding]

콜백함수는 인자형태로 전달되는 함수를 의미합니다! setState (setName)은 콜백함수도 전달받을 수 있도록 내부적으로 구현되어있어요 :)

[@김범수-s5x]

무거운작업이 계속 실행되지않게 콜백함수말고 const [names, setNames] = useState(['홍길동', '김민수'], []); const [input, setInput] = useState(''); 이렇게 해도 동일한 작업일가요??

[@starcoding]

의존성 배열은 useState() 자체에 넣는 문법은 없는 것 같습니다! (혹시 제가 알지 못하는 문법일지도 모르겠지만..) . useState로 상태값을 초기화 할때 콜백함수를 넣는 방법을 "Lazy initial state"라고 하는데요, 여기 링크를 참고하시면 좋을 것 같아요: reactjs.org/docs/hooks-reference.html#lazy-initial-state

[@humor_signal]

안녕하세요 아래와 같이 state를 선언할 경우 const [state, setState] = useState({ loading: false, }); setState({ ...state, loading: true }); setState((prevState) => ({ ...prevState, loading: true })); 두개의 setState 차이점이 무엇일까요?

[@starcoding]

setState는 비동기적으로 처리됩니다. 그렇기때문에 같은 state를 업데이트시켜주는 setState가 두 번 연속으로 호출되면 state값이 업데이트 되기 이전에 다른 setState가 불리게 됩니다. 그래서 우리가 예상한대로 state값이 업데이트 되지 않을 수 있지요. setState(prev => ...) 식으로 콜백을 전달하면 이 문제를 해결 할 수 있습니다. 좋은 StackOverflow 링크 하나 남겨두고 갈게요! stackoverflow.com/questions/42038590/when-to-use-react-setstate-callback

[@성재김-n2s]

좋은 영상 감사합니다 !

[@starcoding]

영상 봐주셔서 감사해요 😆

[@빵예에연]

복습겸 돌아보는데 설명 진짜 좋습니다!

[@starcoding]

감사합니다!! 💡

[@llIllllIllIl]

잘가르치십니다ㅎㅎ 흥하실듯요

[@starcoding]

감사합니다 😆😆😆

[@Geuni620]

배워갑니다 정말 많이 도움받았습니다!!!

[@Geuni620]

16:00

[@seo4247]

제가 다른영상도 진짜 다봤는데 이 영상보고 드디어 이해했어요 ㅠㅠ 좋은 설명 감사합니다 :)

[@starcoding]

이해가 되셨다니 다행이네요 ㅎㅎ 시청해주셔서 감사합니다😊

[@버블호떡]

설명 진짜 잘하십니다!!

[@starcoding]

감사합니다 꾸생님! 😄

[@lou2eo]

강의 잘 봤습니다 ㅎㅎ 궁금한게 있는데요! handleUpdate 이벤트 함수 안에서 setName(콜백함수)를 받는데 prevState는 렌더링 될 때마다 기존 name 값들 받도록 임의로 설정한 매개변수일까요? prevState말고 다른 이름으로 설정해도 되는 것인지요?

[@starcoding]

네, prevState 가 아닌 원하시는 이름으로 바꾸셔도 됩니다 😊. prevState는 상태값을 업데이트 할때 (setName을 호출할때) 업데이트 이전 상태값을 참조할 수 있도록 해주는 매개변수 입니다!

[@lou2eo]

@@starcoding 감사합니다👏👏

[@오세진-f6y]

간단한 설명 감사합니다.

[@starcoding]

시청해주셔서 감사합니다!

[@loganj6203]

useState를 쓰며 useEffect의 dependency에 state값을 추가하지 않으면 렌더링이 되지 않는데요. state값 변경 시 자동으로 렌더가 되야되는게 정상이 아닌가요? 항상 의존성에 추가를 해주고 있지만 의문이 가네요

[@starcoding]

state가 변경되면 컴포넌트는 자동적으로 렌더링이 됩니다. 컴포넌트가 렌더링이 되더라도 useEffect의 dependency에 변화가 없다면 해당 useEffect 내부에 정의된 콜백은 실행이 되지 않는거죠 😄

[@loganj6203]

@@starcoding 질문을 다시 할게요. const [price, setPrice] = useStste(0) 가 정의되어 있다고 하면요. useEffect(() => 로직..., []) 가 정의되어 있을때 어떠한 로직에서 setPrice를 실행하면 컴포넌트가 리렌더링이 되지 않네요. useEffect에 의존을 더해야 되는데 더하지 않아도 리렌더가 되야되는게 아닌가요 [price] 를 useEffect에 넣어야 리렌더가 되더라고요

[@loganj6203]

useEffect를 보고 왔는데 useEffect를 실행하려면 리렌더링마다 의존배열을 안 넣으면 되겠네요. 빈배열은 처음에만 실행하는거니 이걸 이제 이해했네요. 감사합니다!!

[@ytubewiki]

useState 훅 복습 잘 했습니다. 아직 본격적으로 사용하는 단계가 아니다보니 자꾸 잊어먹네요. ^^

[@starcoding]

사용하시면서 금방 익숙해지실거예요 ㅎㅎ 리액트 공부 화이팅입니다!

[@멈머-q8h]

useState 초깃값을 넣는 자리에 값을 넣지 않고 콜백함수의 리턴값으로 받는다는거 이전까지 전혀 몰랐던 이야기인데 너무 잘 활용할 수 있겠어요!! 이 방법을 초깃값에 무거운 작업할 때를 예시로 드셨지만, 리랜더링이 계속 되는게 안좋지은게 아닌가? 그래서 값을 가져오는 경우도 이렇게 콜백함수를 적으면 좋지 않을까? 하는 생각이 드는데요. 제가 이 부분에 대해 제대로 이해하지 못해서 관련된 내용을 더 찾아보고 싶은데 공식문서나 혹은 검색을 어떻게 해보면 좋을까요?

[@starcoding]

새로운걸 알게 되셨다니 너무 좋네요! 제가 멈머님 질문을 잘 이해했는지 잘 모르겠어요 ㅠㅠ. 초기 값을 콜백 형태로 넣어주는 것은 Lazy initialization이라고 불립니다. 구글에 "usestate lazy initialization" 라고 검색을 해보니 상단 StackOverflow 게시물에 채택된 답변에 굉장히 좋은 설명이 있네요! (영어지만 ㅠㅠ) stackoverflow.com/questions/58539813/lazy-initial-state-what-it-is-and-how-to-use-it 공식문서에서 잘 설명되어있지 않은 부분들은 StackOverflow나 관련 블로그 내용을 찾아보는게 더 도움이 많이 될때도 있는것 같아요. 화이팅입니다!

[@Blue-js2lj]

궁금한게 const [time, setTime] = useStae(1);에서 setTime이라는게 함수에요?? setTime기능을 명시를 안해줬는데 어떻게 setTime(time + 1)하면 숫자가 1씩 증가하는건가요..? setTime을 함수를 직접 안만들어줘도 기능이 작동하나요??

[@starcoding]

useState는 리액트에서 제공하는 함수 입니다! useState를 호출하면 배열을 반환하는데, 배열 안에는 두 개의 요소가 들어있어요. 배열의 첫번째 요소 (time)은 state를 담고있는 변수이고, 두번째 요소 (setTime)은 state를 변경시켜주는 기능을 담고 있는 함수예요 (물론 두 요소의 이름은 우리가 원하는대로 바꿔줄 수 있어요). setTime은 리액트의 useState에서 제공해주는 함수이기 때문에 직접 구현하지 않아도 됩니다 😄

[@doyo9169]

콜백함수에 대해서도 알려주시면 안될까유~ 별코딩의 콜백함수 듣고 싶어요

[@starcoding]

콜백함수 좋아요! 투두리스트에 넣어놓을게요~

[@조승현-s6h]

지금에서야 마지막에 state를 콜백 넣어주는거 빼고 쉽게 이해할수잇네요 처음 봤을때 끄덕끄덕 하고 넘어가서 이해한건줄알았는데 그냥 대충 이해한거였네요 ㅋㅋㅋ

[@starcoding]

이해가 되셨다니 너무 기뻐요! 영상 봐주셔서 감사합니다~😊

[@아하아-q5c]

정말 감사합니다 ㅎㅎ

[@starcoding]

감사합니다 😄😄

[@카라멜땅콩-p2p]

잘들었습니다.

[@Hitotsubasi]

heavyWork를 부를때 '()'를 생략하면 업로드 시에도 다시 렌더링 되지 않던데, 콜백함수로 감싸는 거랑 어떤 차이가 있을까요?

[@starcoding]

useState(heavyWork) 말씀하시는거죠? 네! 이렇게 하셔도 됩니다. heavyWork 자체를 넣어줘도 콜백함수이기 때문이예요. 지금 보니까 그렇게 하는게 더 깔끔한것 같네요 ㅎㅎ

[@Hitotsubasi]

@@starcoding 답변 감사합니다!

[@idim77]

오왕!! 제가 setNames를 setNames([input, ...names]) 로 해도 잘 작동해서, prevState를 굳이 사용할 필요가 있나 싶었는데.... 만약, 맨마지막에 언급했듯이, 무거운 초기화작업 때문에 Names 리스트를 콜백함수를 통해 초기화하면, 그 값이 다음부터는 변화되지 않으니깐, setNames([input, ...names]) 로 하면 안되고, setNames((prevState) => [input, ...prevState]); 식으로 해야 되겠네요. 감사합니다.!!

[@현태김-d5f]

setNames 인자안에 바로 값을줘도 입력이 되는데 왜 콜백을 쓰는건가요?? ㅠㅜㅠㅠ 제가 이 부분만 이해를 잘 못했습니다

[@starcoding]

setState는 비동기적으로 처리됩니다. 그렇기때문에 같은 state를 업데이트시켜주는 setState가 두 번 연속으로 호출되면 state값이 업데이트 되기 이전에 다른 setState가 불리게 됩니다. 그래서 우리가 예상한대로 state값이 업데이트 되지 않을 수 있지요. setState(prev => ...) 식으로 콜백을 전달하면 이 문제를 해결 할 수 있습니다. 유익한 StackOverflow 링크 하나 남겨두고 갈게요! stackoverflow.com/questions/42038590/when-to-use-react-setstate-callback

[@jeffrey0208]

감사합니다 :)

[@starcoding]

감사합니다!

[@eastegfme5238]

감사합니다!

[@starcoding]

감사합니다 :)

[@heimdalonline-vp4ho]

11:10 setState 호출 시, 콜백을 사용하는 이유

[@이현섭-e6t]

9:26초 경에 input태그안에 value = {input} 을 넣어주는 이유를 알 수 있을까요 ? 안넣어도 결과는 같은것 같아서 질문드립니다!

[@수수-i3n]

저도 궁금합니다~!

[@starcoding]

눈에 보이는 결과는 같지만, input 내용의 제어가 어디서 이루어지는가의 차이입니다. input 태그에 value를 넣어주면, 컴포넌트의 state가 내용을 제어하지만, value를 넣어주지 않으면 브라우저(DOM)가 자체적으로 내용을 제어하게 됩니다! 각각에 장단점도 존재하구요! 흥미로운 내용이니, 조만간 이부분도 영상으로 다뤄보면 좋을 것 같네요 😆 ko.reactjs.org/docs/forms.html#controlled-components ko.reactjs.org/docs/uncontrolled-components.html

[@이현섭-e6t]

@@starcoding 답변 감사합니다~!! 영상 너무 잘보고있어요! 좋은 강의 해주셔서 감사합니다

[@frankkim6947]

혹시 정체가 무엇인가요? 어떻게 이렇게 쉽게 가르치실 수 있나요?

[@starcoding]

감사합니다! 😆😆 제 정체는 그냥 흔한 개발자입니다~ ㅎㅎㅎ

[@limlim-ej1gy]

별코딩님 혹시 무료 강의 내용 제 기술 블로그에 정리해도 될까요? 취업 목적입니다 ㅠ

[@starcoding]

슬라이드 이미지 없이 출처만 남겨주시면 됩니당~

[@앙냥냥-i9g]

감사합니다.. 감사합니다...

[@kie4825]

흐흐흑... 콜백이 이해안되네요,,, 더 공부해야겠다 ...감사합니다 ㅠ

[@starcoding]

setState의 콜백 말씀이신가요? reactjs.org/docs/hooks-reference.html#functional-updates 공식문서 이 부분을 참고하시면 좋을 것 같아요 😄

[@웅이-l9t]

유로강의 하나 만들어주세요!

[@starcoding]

계획된건 없지만 나중에 기회가되면 만들어 볼게요~ 😄

[@2323-e2k]

좋은 영상 올려주셔서 감사합니다. setState를 호출 하는 순간 setState가 속한 컴포넌트만 다시 랜더링을 하는 거 군요.

[@starcoding]

state가 속한 컴포넌트와 해당 컴포넌트의 모든 자녀 컴포넌트들도 함께 렌더링이 됩니다!

[@히우우웅]

감사합니당

[@starcoding]

감사합니다~

[@juneykimy]

…prevstate 에서 …은 무엇을 의미하나요?

[@starcoding]

Spread operator입니다! developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

[@sanghoonkim339]

thanks!

[@starcoding]

Thank you!

[@aaron-kim00]

Thank you

[@starcoding]

Thank you!

[@어흥-m6e]

좋은 영상 감사드립니다 덕분에 암이 나았습니다.

[@starcoding]

도움이 되었다니 기쁘네요 ㅎㅎ 감사합니다!

[@xxonhi9678]

개쫀다…

[@videos-gamer9]

이형님 왜 말투가 동빈나 님 같냐 ㅋㅋ 아무리 들어도 나동빈님 같은데 ?

[@starcoding]

ㅋㅋㅋㅋ 아니예요~ 😂😂😂

[@ytubewiki]

You took the words right out of my mouth.

[@byukim6593]

이게 구독자가 546명밖에 안 된다고요???

[@starcoding]

😆😆😆 감사합니다!

[@lilililillllIIll]

useState 딥한 내용도 다루었으면 좋겠어요.

[@monglong420]

'현제'시간이라니..........ㅜㅜㅜㅜㅜㅜㅜㅜㅜ😩

[@starcoding]

😫😫😫😫😫😫😫 앗 맞춤법 실수가 있었다니 민망하네요.. 수정할수도 없구 ㅠㅠㅠ

[@monglong420]

@@starcoding 강의 잘 들었습니다! 감사합니다 :)

[@par_kromi]

ㅈㄴ 어렵다..

[@taihwasong2350]

정말 쉽게 알려주시네요. 감사합니다!

[@바나나-c5v]

좋은 영상 감사합니다!