설명 진짜 잘해주시네요 감사합니다. 근데 질문있습니다! 결국에는 뭘 가져다 써야 하는지 알아야 하고.. 즉 조상 컴포넌트의 props 가 뭘 가지고 있는지 숙지해야지 useContext를 쓸 수 있는거죠? 그럼 대규모 프로젝트에서는 조상이 가진 props를 혹여나 놓치는 경우도 있을법한데 이런 경우는 어떻게 하나요? 만약 너무 위에 있는 조상이 가지고 있는 props를 쓰려면 위로 다 뒤져서 올라가봐야 하는건가요 그럼? 양질의 설명을 이렇게 유튜브를 통해 전해주셔서 감사합니다!
잘 보고 있습니다 :) extension 관련해서 질문있어서 댓글 남깁니다 ! 11:49 여기서 console.log 입력했을때 'data : ' 가 자동입력되는 것처럼 보이는데 따로 extension을 사용하시는건가요? extension 사용중이시라면 어떤 건지 알고 싶은데 공유 부탁드려도 될까요...?!
엇 vscode 기본 기능이 아닌가요?? data라는 변수를 위에 정의해놓았으니까 자동완성 목록에 data가 들어있는줄 알았네요😅😅. 혹시 data 변수를 만드시고 console.log을 타이핑 해보시겠어요? 사용중인 익스텐션이 너무 많아서 딱 집어서 찾기가 어렵네요. 혹시 안되신다면 제 익스텐션들 공유해드릴게요!
@@user-ns9ms5eg3h @Mond 제가 사용하는 익스텐션들입니다~ Auto Import, Auto Rename Tag, CSS peek, ES7+ React/Redux/React-Native snippets, HTML CSS Support, Prettier, Reactjs code snippets. 너무 많죠? ㅠㅠ 이중에 뭐가 그 기능을 더해줬는지는 잘 모르겠네요 😅
Context 사용시 컴포넌트 재사용이 어려워지는 이유는, 컴포넌트가 Context에 대한 의존성이 생기기때문에 Provider 외부에서는 컴포넌트를 사용하지 못하기때문이예요. 이런 단점을 감안하더라도, 언어와 테마같은 앱에 전체적인 부분에서 사용되는 전역 데이터들을 받아올때는 Context를 사용하는것이 일반적이예요. Props로 일일히 받아오면 Prop drilling 현상때문에 코드가 많이 복잡해지고 유지보수하기가 힘들어지거든요 ㅎㅎ
이해가 잘 되셔서 다행이네요😆. Context.Consumer를 사용하면 useContext훅을 사용하지 않고도 Context API를 사용할 수 있습니다! 여기 참고해보시면 좋을 것 같아요 ko.reactjs.org/docs/context.html#contextconsumer
강의 너무 잘 봤습니다!! 질문이 있는데요. context가 계속 많아지면 , 이런식으로 App.js에 겹겹히 감싸줘야하는데 그렇게 사용하는게 맞나요?? 하지만 한개의 Context로 합치기에는 Theme, Credential, Language 등 등 파일을 분리하는게 관리하기는 쉽고 그렇다고 다 따로하기에는 App.js에서 너무 많이 감싸주게 되어버리는데 이럴때는 어떻게 해야할까요?
Local storage와 Context API는 다른 목적을 갖고 있습니다. Local storage는 브라우저 세션간 데이터를 "보관"하기 위한 도구이고, Context API는 여러 컴포넌트들에게 데이터를 전역적으로 "전달"하기위한 도구입니다. 상위 컴포넌트에서 로컬스토리지에 있는 데이터를 읽어와서, Context API (혹은 다른 custom훅)을 통해 다른 컴포넌트에게 전달해주는것이 더 자연스럽지 않을까 생각이 됩니다 :)
리덕스는 Context와 비교해서 훨신 더 풍부하고 많은 기능을 제공하기때문에 재사용성 측면 보다는 사용하고자 하는 목적에 대해 더 생각하고 무엇을 사용할지 결정하는게 더 맞는 표현 같아요! Context는 리덕스보다 가볍기 때문에 대부분에 경우 작은 프로젝트들에게 더 잘 어울린다고도 할 수 있겠지만 목적에따라 늘 그렇지 않을수도 있답니다! 다음에 기회가 된다면 리덕스도 자세히 다뤄보고 싶네요 ㅎㅎ.
감사합니다. 한가지 질문 드립니다. userContext를 사용하지 않을때 푸터에서 isDark의 값을 바꾸면 Header, Contents 모든곳에 쓰이는 isDark의 값이 변경이 되는건 푸터에서 set 콜백함수를 실행하면 실제로 App에서 실해되서 App의 상태 값을 바꾸기 때문인가요?
작은 어플리케이션에서는 redux 보다 context를 사용하는게 좋을때가 많겠지만, context api가 redux를 완벽히 대체한다고 볼수는 없다고 생각해요. 각각의 장단점이 있거든요. 하지만 규모가 작은 프로젝트를 할때는 redux 보단 간단한 context를 사용하는게 더 효율적이라고 생각합니다.
최고의 강의입니다.. 감사합니다
정말 이해가 쏙 됩니다. 이런 분이 왜 아직도 구독자가 천명도 안되는지...ㅠ 더 많은 분들이 보시게 추천 눌렀습니다
추천 감사드립니다 😍 더 열심히 준비해서 얼른 구독자님들이 많아졌으면 좋겠네요 ㅎㅎ
제발 영상을 계속 만들어주세요 ㅠ
와 2주일동안 헷갈렸던 내용을 20분만에 이렇게 한번에 이해시켜주시다니 정말 너무 감사해요!!!
9:33 useContext 시작
리액트 Context 에 대해서 설명하는 영상들 (한국,미국) 을 다양하게 봐왔지만 이렇게 간결하고 정확하게 설명하시는 분은 처음이네요! 감사합니다!
감사합니다! 😆😆
와 저두요 바로 구독 좋아요 눌렀습니다 정말 감사합니다
usecontext 훅스로 전역적으로 스테이터스 관리가 된다는점이 이해됐습니다!
한가지 궁금한 점은 해당 훅을 사용하면 상태관리 앱(리덕스,리코일)을 사용하지 않아도 되는건가요? 해당 훅이 있는데도 상태관리 앱을 사용하는 이유가 궁금합니다.
오늘은 useContext에 만취해서 갑니다. 계속해서 좋은 영상 올려주세요 🫰
기다리고 있었습니다. 이번 영상도 잘 보겠습니다.
민찬님 항상 먼저 댓글 남겨주셔서 감사합니다!! 😆😆
정말 핵심을 짚는 개념과 예제코드 덕에 쏙쏙 이해가 되네요
우연찮게 들어와 보다가 hook 관련 동영상 전부 보고 있습니다
정말 좋은 강의 동영상 진심으로 감사합니다
잘 봤습니다. 예제와 같이 하니 이해 쏙쏙
정말 설명을 잘하시네요 감사합니다! 구독 좋아요 꾸욱 눌렀습니다!
최근에 중규모 프로젝트 진행하면서 props가 7-8번씩 타고들어가는거때문에 혼미했는데 영상 감사합니다~
개인적으로 공식문서로 처음 접근하기에는 어려움이 크기에 강의로 중요한 개념들의 틀을 잡는게 효율적이라 생각해요ㅎ 설명이 깔끔 담백하네요 내용도 유익하구요 구독 좋아요 누르고 갑니다~
훅 설명한 유튜브 여럿 찾아 다니면서 보고 공식문서도 봤는데 가장 쉽고 직관적이게 설명해주시네요 감사합니다!
감사합니다 😆😆
감사합니당. 고급 스킬을 이렇게 쉽게 설명해주시다니ㅠㅠ
와.. 별코딩님 진짜 최고입니다강의 너무 감사합니다 :D
재미있네요!! 굳굳!
제가 왜 이제서야 별코딩을 알게되었을까요?구독 당장했어요! 다른 영상들 많이 보고도 이해못했던거 여기서 하고 갑니다. 감사합니다!!
좋은 말씀과 구독 감사합니다!! 이해가 잘 되셨다니 기뻐요 😊😊
예시가 참 좋네요. 잘 봤습니다.
영상 봐주셔서 감사합니다 :)
여러 강의를 봐도 이해가 잘안됬었는데 이강의 하나로 이해가 100퍼센트 되네요 감사합니다!
유명 서적도 봤는데도 정말 이해가 안됐던건데 한번에 이해가 됐어요.. 다른 영상들도 그렇고 많은 도움이 되고 있습니다. 정말 감사합니다! 다음 훅 영상도 기대됩니다
폰에서 봤는데, 나중에 사무실에서 보면서 따라해봐야겠어요. 이해가 잘 됩니다.
설명 진짜 잘해주시네요 감사합니다.
근데 질문있습니다! 결국에는 뭘 가져다 써야 하는지 알아야 하고.. 즉 조상 컴포넌트의 props 가 뭘 가지고 있는지 숙지해야지 useContext를 쓸 수 있는거죠?
그럼 대규모 프로젝트에서는 조상이 가진 props를 혹여나 놓치는 경우도 있을법한데 이런 경우는 어떻게 하나요? 만약 너무 위에 있는 조상이 가지고 있는 props를 쓰려면 위로 다 뒤져서 올라가봐야 하는건가요 그럼?
양질의 설명을 이렇게 유튜브를 통해 전해주셔서 감사합니다!
와 젤 쉽게 설명해주시네요 압도적 감사 ㅠㅠ
공식문서만 읽었을 때는 조금 쓰기 어렵게 느껴지는 개념이었는데 설명들으니깐 이해가 너무 잘되네요... 양질의 강의해주셔서 감사합니다 더 유명해지셨으면 좋겠어요 정말..
감사합니다! 도움이 되었다니 너무 기분이 좋네요! 😆 저도 공식문서보단 영상이나 블로그 글을 읽는게 더 도움이 될때가 종종 있더라구요 ㅎㅎ
darkMode css는 없을까요?
좋은 정보 감사합니다.
감사합니다! 😄
이해가 정말 잘 되었습니다 감사합니다 ❤
와 진짜 이해하기 쉽게 잘 설명해주시네요. 좋은 영상 만들어주셔서 감사합니다!
감사합니다! 다음 영상도 기대해 주세요 😆😆😆
초기값과 Provider 에 있는 value 랑 혼동이 있었는데, 명확하게 짚어주셔서 이해가 바로되네요 !
잘 보고 있습니다 :) extension 관련해서 질문있어서 댓글 남깁니다 !
11:49 여기서 console.log 입력했을때 'data : ' 가 자동입력되는 것처럼 보이는데 따로 extension을 사용하시는건가요?
extension 사용중이시라면 어떤 건지 알고 싶은데 공유 부탁드려도 될까요...?!
엇 vscode 기본 기능이 아닌가요?? data라는 변수를 위에 정의해놓았으니까 자동완성 목록에 data가 들어있는줄 알았네요😅😅. 혹시 data 변수를 만드시고 console.log을 타이핑 해보시겠어요? 사용중인 익스텐션이 너무 많아서 딱 집어서 찾기가 어렵네요. 혹시 안되신다면 제 익스텐션들 공유해드릴게요!
@@starcoding 저도 다시 해봤는데 작성하니 console.log(data) 이런식으로는 나오는데
console.log('data :', data) 이런식으로는 안되네요 신기해서 여쭤봤어요...!
오 네 좋습니다! 궁금해요 별코딩님이 쓰시는 extension들 !!!
@@user-ns9ms5eg3h @Mond 제가 사용하는 익스텐션들입니다~
Auto Import, Auto Rename Tag, CSS peek, ES7+ React/Redux/React-Native snippets, HTML CSS Support, Prettier, Reactjs code snippets.
너무 많죠? ㅠㅠ 이중에 뭐가 그 기능을 더해줬는지는 잘 모르겠네요 😅
@@starcoding 오ㅏ 감사합니다! 한번 찬찬히 확인해보고 찾으면 댓글로 공유할께요 ㅋㅋ 스터디하는데 스터디 친구들 한테도 영상 추천해줬어요 !
저도 해당 익스텐션 찾으면 답글좀 부탁드려요ㅠ
감사합니다
진짜 설명 너무 잘해주시네요..ㅜㅜ
잘 이해가 되셨다니 다행이예요! 영상 봐주셔서 감사합니다~
Provider에서 단순 객체를 넘기는 작업이였군요! Destructuring이라고 생각했어서 헷갈렸네요. 최고의 영상 감사드립니다!
네 맞아요! 슥 보면 저도 헷갈리네요 ㅎㅎ. 감사합니다! 도움이 되었다니 기쁘네요~
우연히 추천으로 보게 되었는데 설명 너무 좋네요 !! 구독합니다 :D
금방 유명해지실 것 같아요 !!
추천이라니 😍😍 감사합니다! 더 좋은 영상으로 찾아뵐게요~~
@@starcoding !! 리액트를 공부하고 있는데 정말 큰 도움이 될 것 같아요 감사합니다 😁😁
바로 구독과 좋아요 눌렀습니다. 개발 아직 초보라서 배울 게 많은데 좋은 강의 감사합니다~
민수님 감사합니다! 화이팅이예요😊😊😊
정말 쉽게 잘 설명해주시네요.
감사합니다! 😮
영상 봐주셔서 감사합니다! 영상이 도움이 되었으면 좋겠네요 ㅎㅎ
4:00 개념설명에서 컴포넌트를 재사용하기 어렵다고 하는데 그럼 useContext는 어떤 상황에서 보통 사용하나요? 궁금합니다!
Context 사용시 컴포넌트 재사용이 어려워지는 이유는, 컴포넌트가 Context에 대한 의존성이 생기기때문에 Provider 외부에서는 컴포넌트를 사용하지 못하기때문이예요. 이런 단점을 감안하더라도, 언어와 테마같은 앱에 전체적인 부분에서 사용되는 전역 데이터들을 받아올때는 Context를 사용하는것이 일반적이예요. Props로 일일히 받아오면 Prop drilling 현상때문에 코드가 많이 복잡해지고 유지보수하기가 힘들어지거든요 ㅎㅎ
@별코딩 답변주셔서 감사합니다 :) ! 🙇♀🙇♀
이해가 쏙쏙 되네용 감사합니다 !!
영상 잘 봤습니다! 감사합니다~~
지금 예제에선 UserContext에 사용자 정보를 '사용자'라고 하드코딩해왔지만, 실제 서비스에서 동적으로 사용자 정보를 관리하려면 서버에서 로그인한 사용자의 정보를 받아와서 createContext안에 넣으면 되는 것일까요?
우연히 알게 되어 영상을 봤는데, 정리와 설명을 정말 잘 하시네여 ~
앞으로도 유익한 내용 기대하고 있겠습니다 ㅎㅎ
성철님 들러주셔서 감사합니다ㅎㅎ 앞으로도 좋은 영상으러 찾아뵐게요!!
너무 이해하기 쉽게 설명해주셔서 감사합니다!
감사합니다!
좋은 강의 너무 감사합니다. 이렇게 쉽게 설명하시는 분은 처음봤어요.
나중에 유료 강의 런칭해주시면 꼭 구매할 의향이 있습니다.
제발 더 긴 강의 런칭해주세요ㅠㅜㅠㅜㅠㅜㅠ
감사합니다! 도움이 되셨다니 기쁘네요 😆 다음강의 열심히 준비중입니다 ~~
다른 강의 여러번 들어도 이해가 안갔었는데 별코딩님 강의보고 단번에 이해가 가요 ㅜㅜ 리액트 훅스 시리즈 너무 좋아요
이해가 잘 되셔서 다행이네요😆. Context.Consumer를 사용하면 useContext훅을 사용하지 않고도 Context API를 사용할 수 있습니다! 여기 참고해보시면 좋을 것 같아요 ko.reactjs.org/docs/context.html#contextconsumer
Header 에서 isDark는 const {isDark} 라고 해야하고 user는 const user 라고 하는 이유가 프로바이더에서 그렇게 넣기 때문인가요?
가르치는것도 능력이란걸 느낍니다 👍🏻👍🏻👍🏻
명강의
감사합니다! 😆😆
const 를 선언만하면 상딘에 자동import 코드가 추가돼던데(13분30초쯤 화면이요) 사용하시는 extention 기능인가요???? 어떤 익스텐션인지 알수있을까요??
Props 영상도 만들어주세요ㅜㅜ
추후에 기회가 된다면 리액트 기초도 강의도 만들어볼게요 ㅎㅎ
감사합니다!
Prompt로 이름을 입력받아서 넘겨주려면 어떻게 해야 하나요? 너무 쉽게 잘 설명해 주셔서 잘 보고있어요!
감사합니다! useEffect 내부에서 prompt로 값을 받으신후 setState 함수를통해서 state를 변경해주시면 됩니다 :)
강의 너무 잘 봤습니다!! 질문이 있는데요. context가 계속 많아지면 , 이런식으로 App.js에 겹겹히 감싸줘야하는데 그렇게 사용하는게 맞나요?? 하지만 한개의 Context로 합치기에는 Theme, Credential, Language 등 등 파일을 분리하는게 관리하기는 쉽고 그렇다고 다 따로하기에는 App.js에서 너무 많이 감싸주게 되어버리는데 이럴때는 어떻게 해야할까요?
Providers 컴포넌트를 만들어서 거기에서 관리하는 것도 하나의 방법이겠네요
Provider들을 모은 컴포넌트를 만드는것도 좋은 방법이지요!
와우 최고에요👍👍👍
안녕하세요! 한가지 질문이 있습니다! 리엑트로 jwt토큰기반 로그인을 구현하다보면 로컬스토리지에 토큰을 보관하는 것으로 알고있습니다! 로컬스토리지 대신에 useContext에 토큰을 보관하는 방법은 나쁜 방법일까요?
Local storage와 Context API는 다른 목적을 갖고 있습니다. Local storage는 브라우저 세션간 데이터를 "보관"하기 위한 도구이고, Context API는 여러 컴포넌트들에게 데이터를 전역적으로 "전달"하기위한 도구입니다. 상위 컴포넌트에서 로컬스토리지에 있는 데이터를 읽어와서, Context API (혹은 다른 custom훅)을 통해 다른 컴포넌트에게 전달해주는것이 더 자연스럽지 않을까 생각이 됩니다 :)
컴포넌트 파일들이 전부 확장자가 jsx 파일로 되어 있는데 이걸 js 확장자로 바꿔 써도 상관 없을까요? 궁금합니다.
네! 기능적으로는 상관 없지만, 리액트 컴포넌트 파일은 jsx 확장자로 명시해 주는것이 권장됩니다!
잘 알았습니다. 감사합니다!
좋은 영상 감사합니다! 혹시, 예제에 사용되는 코드를 깃허브에 올려주실 수 있으신가요? 코드를 따라 쳐가면서 공부중인데, 영상 재생 시간이 멈춰둔 시간보다 길어져서 질문드립니다 ㅠㅠ
앗, 그렇군요! 피드백 감사합니다 😄. 코드를 블로그에 정리하면 좋을지, 깃허브를 통해서 공유하면 좋을지 몇가지 방법을 고민하고 있습니다! 컴퓨터에 흩어져있는 코드를 하나하나 정리할때가 된것 같네요 ㅎㅎ
크 도움 많이됩니다
좋은 설명 감사합니다. 그 리덕스와의 차이점은 useContext는 컴포넌트 재사용이 불가능하고 리덕스는 재사용이가능해서 리덕스를많이쓰는건가요? 그래서 리덕스는 큰 프로젝트 useContext는 작은프로젝트 에 유용하다 이렇게들었는데 이 이유가 맞나요?
리덕스는 Context와 비교해서 훨신 더 풍부하고 많은 기능을 제공하기때문에 재사용성 측면 보다는 사용하고자 하는 목적에 대해 더 생각하고 무엇을 사용할지 결정하는게 더 맞는 표현 같아요! Context는 리덕스보다 가볍기 때문에 대부분에 경우 작은 프로젝트들에게 더 잘 어울린다고도 할 수 있겠지만 목적에따라 늘 그렇지 않을수도 있답니다! 다음에 기회가 된다면 리덕스도 자세히 다뤄보고 싶네요 ㅎㅎ.
context로 불러와진 값은 reactive하게 값이 변경된다고 랜더링 되지는 않죠..?
리액트 한글 공식문서에는 이렇게 나와있네요! "useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 될 것입니다"
ko.reactjs.org/docs/hooks-reference.html#usecontext
감사합니다. 한가지 질문 드립니다.
userContext를 사용하지 않을때 푸터에서 isDark의 값을 바꾸면 Header, Contents 모든곳에 쓰이는 isDark의 값이 변경이 되는건
푸터에서 set 콜백함수를 실행하면 실제로 App에서 실해되서 App의 상태 값을 바꾸기 때문인가요?
isDark state는 App 컴포넌트에서부터 모든 자녀 컴포넌트들에게 prop으로 전달이 됩니다. 따라서 setIsDark를 통해 isDark를 업데이트 시켜주면 업데이트 된 값이 모든 자녀 컴포넌트에게 전달이 되는거죠 😄
히히 라우터랑 리덕스까지 바라면 너무 욕심인가여????????
기회가 된다면 라우터랑 리덕스도 다뤄볼게용 ㅎㅎ 감사합니다!
자식컴포넌트에서 부모컴포넌트로 데이터를 넘기는 방법은 없나요??
가능합니다! forwardRef영상을 참고해보시면 좋을 것 같아요 😄
@@starcoding 감사합니다..!!
혹시 리덕스같은 전역상태관리라이브러리를 사용하는 경우에도 이 훅을 쓸 필요가 생길까요???
취향의 차이라고 생각합니다! 크고 복잡한 전역 데이터를 redux store에 넣어두고 좀더 범위가 작은 데이터는 context api로 처리하시는 분들도 계시더라구요!
사용자
물론 여러가지 방식으로 구현할 수 있습니다! 최대한 쉽게 풀어나가기 위해서 강의에서는 따로따로 만들어 보았어요. 여러가지 방법으로 구현할 수 있겠지만, 가독성과 유지보수성을 우선순위에 두시고 설계를 해보시면 좋을 것 같아요.
더블 좋아요 있으면 좋겠어요
저도 광일님 댓글에 더블 좋아요 남기고 싶네요! 감사합니다 😍
Thank you
Thanks you 👍👍
그럼 redux를 대체할 수 있는 방법인건가요??
작은 어플리케이션에서는 redux 보다 context를 사용하는게 좋을때가 많겠지만, context api가 redux를 완벽히 대체한다고 볼수는 없다고 생각해요. 각각의 장단점이 있거든요. 하지만 규모가 작은 프로젝트를 할때는 redux 보단 간단한 context를 사용하는게 더 효율적이라고 생각합니다.
@@starcoding 답변 감사합니다! 결국 리덕스를 공부하고 있는데 여긴 지옥이군요ㅠㅠ그래도 알아야 뭘 알아듣던지 하니까...영상 항상 잘 보고 있어요!
good
와우 usecontext랑 useReducer면 redux없어도 되겠네요
useContext와 useReducer만으로 해결할 수 있는 상황이라면 그렇겠지만 Redux가 주는 다른 여러가지 장점들이 있지요 ㅎㅎ 😆
별코딩 만세!!!!!!!
만세!!!!🙌🙌