안녕하세요 선생님 react context를 이해하려고 시도하는 중입니다.const countContext = MyReact.createContext({ count: 0, setCount: () => {}, }); class CountProvider extends React.Component { constructor(props) { console.log("CountProvider construtor"); super(props); this.state = { count: 0, }; } render() { const value = { count: this.state.count, setCount: (nextValue) => this.setState({ count: nextValue }), }; return ( <countContext.Provider value={value}> {this.props.children} </countContext.Provider> ); } } const Count = () => { return ( <countContext.Consumer> {(value) => { console.log("CountComponent", value); return <div>{value.count}</div>; }} </countContext.Consumer> ); }; const PlusButton = () => { return ( <countContext.Consumer> {(value) => { console.log("PlustButtonComponent", value); return ( <button onClick={() => value.setCount(value.count + 1)}> + 카운트 올리기 </button> ); }} </countContext.Consumer> ); }; export default () => ( <CountProvider> <Count /> <PlusButton /> </CountProvider> );Count , Plus Button component return 문에 각각console.log("CountComponent", value); console.log("PlustButtonComponent", value);로그를 남겨봤습니다.사진에 표시 된 것 처럼 로그가 각 Component마다 2번씩 찍히는데 그 이유를 알 수 있을까요...?로그의 value 값이 다른게 힌트 같은데 해석을 하지 못하겠습니다.

안녕하세요 선생님 Ref를 알아보는 과정에서import React from "react"; import CartPage from "./pages/CartPage"; import OrderPage from "./pages/OrderPage"; import ProductPage from "./pages/ProductPage"; const App = () => ( <> {/* <ProductPage /> */} {/* <OrderPage /> */} <CartPage /> </> ); // export default App; class MyComponent extends React.Component { divRef = React.createRef(); render() { return ( <div ref={this.divRef}> </div> ) } componentDidMount() { console.log(this.divRef) } } export default MyComponent 이렇게 MyComponent가 export 되었길레import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import MyComponent from "./App"; const { worker } = require("../../shared/mocks/browser"); worker.start({ onUnhandledRequest: "bypass", }); const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />); // root.render(<MyComponent />);main.js에서 root.render를 변경해야될줄 알았는데 변경을 하지 않아도 정상동작을 하는데 이것은 왜 그런것인가요? 

안녕하세요 선생님 질문이 있습니다.<Button whatelse={"will"}>주문하기 , 결제하기</Button> --- const Button = ({ whatelse }) => ( <button className="Button brand">{whatelse}</button> ); export default Button;children처럼 제가 따로 설정해주지도 않았는데 기본적으로 생성된 props들은 뭐라고 부르나요? const Button = ({ styleType, block, ...rest }) => { let className = "Button"; if (styleType) className += ` ${styleType}`; if (block) className += ` block`; return <button className={className} {...rest}></button>; }; export default Button; 또한 강의 후반에 ...rest로 children, onClick props 를 퉁치는데 이떄 children props 내용이 return하는 button element에 {children} 이렇게 들어있지 않아도 잘 렌더링이 되던데 이것은 뭐라 부르나요?

안녕하세요.action 과 Form 을 이용해서 submit 처리하기 강의 중 submit 버튼 클릭 시 preventDefault() 작성하는 부분이 없어서 페이지가 새로고침 되던데 강의에서는 새로고침이 안되고 있네요이유를 알 수 있을까요?

윈도우 환경 & vite-plugin-next-router를 안쓰시분에 한하여,Gnb를 만드실려면<QueryClientProvider client={queryClient}> <BrowserRouter> <Gnb /> <App /> </BrowserRouter> </QueryClientProvider>이렇게 src/main.tsx 에 선언하시면 됩니다.

선생님 안녕하세요 리액트 1부 수강하고 2부로 넘어온 수강생입니다 ㅎㅎ제가 리액트 1부도 수강했고 그 외에 다른 리액트 강의도 먼저 수강한게 있는 상태에서리액트 2부 목차를 보니깐 들어보면 좋을법한 내용들이 많이 있는 것 같아서 수강신청을 했습니다.그런데 다루는 내용이 자세하고 많다보니깐 강의 시간이 많이 길어서 강의를 조금 더 효율적으로 듣는 방법을 생각해 보게 되었는데요... 현재 2부 수강은 1편은 다 수강한 상태이고 2편 3편 4편이 남았는데요요즘 리액트 개발이 함수형 컴포넌트로 많이 이루어지고 있고 저도 훅에 대한 개념이 약하다고 판단되서 수강을 하게 된 것도 있어서 훅에 대한 내용을 먼저 수강하는 게 낫지 않을까 하는 생각이 드는데요그래서 제가 3편과 4편을 모두 수강 한 뒤에 2편을 수강하려고 하는데 혹시 3편과 4편에서 다루는 내용중에 2편을 수강하지 않으면 이해가 어려운 주제들이 있을까요?? 아! 그리고 제가 2편도 컨텍스트까지는 수강했는데 대부분의 리액트 강의에서는 이렇게 치면 이런 기능을 한다. 하면서 넘어가는 것과는 달리 소개해주신 주제는 어떤 기능을 하며 그 기능을 구현하는 걸 코드를 통해 알려주셔서 더 재밌고 깊이있게 들을 수 있는 것 같아 좋은 것 같은데요 반면에 어떤 기능이 작동하는 원리를 구현하는 것이다 보니 내용이 많이 어렵게 느껴질 때가 있는데요... (2편 컨텍스트 부분은 전체 강의만 여러번 들은 것 같습니다. 원래 어려운게 맞는지 저한테만 어려운건지 잘 모르겠네요..) 그래서 제가 코드에디터에 강의 자료 블로그에 있는 코드를 보고 치면서 주석으로 설명을 쓰면서 정리를 해보면서 강의를 들으려고 하는데 혹시 블로그 자료에 있는 코드나 강의에서 설명하신 내용 정리한것을 깃허브에 올려도 될까요??

1부 듣고 이제 막 2부 와서 개발 환경 강의를 들었는데요혹시 리액트를 처음에 설치 하실 때 npx create-react-app 을 안쓰시고 직접 package.json을 직접 작성하신 다음에 npm i로 설치 하시나요??아니면 npx create-react-app을 하시고 나서 필요없는 파일 지우고 폴더구조나 package.json을 수정 하시는 건가요??깃 헙 저장소 가져와서 브런치 이동해보면 나오는 파일이나 폴더가 제가 npx create-react-app으로 리액트를 설치했을 때랑은 조금 다른것도 같은데 보통 다른 책이나 강의들 보면 거의 npx create-react-app으로 설치하고 진행 하는데 선생님은 어떻게 하시는지 궁금합니다... 그리고 혹시 전자의 경우로 하신다면 그렇게 하시는 이유도 궁금합니다!! 

안녕하세요. 강의 재밌게 듣고 있습니다! App.jsx에서 import ProductPage from "./pages/ProductPage" 부분에서 실제 코드는 index.jsx에 작성되어 있는데 디렉터리명인 ProductPage로 경로를 지정해도 동작하는 이유가 궁금합니다. 

안녕하세요. 정환님 드디어 강의도 마무리되어가는데살짝 이해가 안된 부분이 있습니다. URLSearchPrarms 를 통해 query param를 파싱하는 부분을 캐싱하는 부분에서 window.location.search 는 딱 한번만 바뀌고 거의 바뀌지않을 것이라고 이야기하셨는데 같은 페이지에서 navigate가 흔히 있는 요구사항이 아닌가요? 저희가 사용하는 Router의 useNavigate를 통해 화면간에 이동할 때마다 변하는 값으로 알아서 넣어두는게 더 이상적이라고 생각하고 실습을 진행했습니다. 저희 예제에서는 cart 페이지에서 cart로 이동할 비지니스 요구사항은 없어서 괜찮지만 예를들어 다른 상품이 담겨있는 장바구니로 이동하는 요구사항이 있다면 /cart?productId=CACDA421 => /cart?productId=CACDA423deps에 window.location.search를 넣어두는게 안전해보이는데 최적화가 필요한 부분이었을까요? 

안녕하세요. Reducer는 ReactJS에서 제공하는것을 거의 잘 안써왔었는데 한번 활용해봐야겠다는 마음이들었던 강의였습니다. 이번 4.3장(리듀서 훅) 수강하고 궁금한 부분은 Validate처리가 일반적으로 dispatch만으로 해소가 안되는 부분을 직접 reducer를 호출해줘서 처리하는 부분을 봤습니다. 직접 리듀서를 호출하는 형태가 조금 리듀서를 만든 의도와 다른 방향같기도한데. 이전상태를 이용해서 앞으로의 상태를 업데이트하고 싶을때 dispatch를 사용해야한다면 어떻게 처리되야 조금 더 이상적인 방향이라고 생각하시나요?

import * as MyRouter from "./lib/MyRouter"잘 몰라서 그러는데 위와 같이 Library 성격을 가진 module을 import할 때 default object 없이 위와 같이 import하는 convention이 있을까요? 아니면 그외 장점이 있을까요?

안녕하세요.^^ 정환님 강의 잘 보고 있습니다."비동기 호출을 해줘야하니깐. this binding을 해줘야한다."강의를 듣다가 궁금한게 생겼는데 위처럼 말씀을 하셨는데 그 이유가 무엇일까요?  (스스로 답을 찾음)내부에 this를 사용하기전에 binding을 습관적처럼 해야겠군요. 대부분 내부에 this.state 등등 리액트 api를 쓸거라면.https://www.freecodecamp.org/news/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb/

안녕하세요. 유선 강의 잘 보고 있습니다. ^^다름이 아니라, 3장쪽 강의중에 몇개가 예전 강의가 들어 있는 경우가 있는거 같습니다.저도 다 보진 않아서 몇 강, 몇 강 다 말씀 못드릴거 같은데, 2개 이상이네요강의 영상 한번 확인 부탁드립니다~

안녕하세요 선생님! netflix 강의 너무 잘들었습니다! 듣고나서 혼자 이것저것 만들어보는데 , react router 사용을 하다보니 1. index.js 에서 App 을 BrowserRouter로 래핑하는 방법2. 특정 컴포넌트에서 BrowserRouter로 감싸서 따로 쓰는경우가 있는 것 같더라고요. 두가지 차이점을 정확히 모르겠습니다. chat gpt는 개발자가 개발하는 과정에서 선택하는 부분이라고 되어 있는데, 그 선택하는 이유를 잘 모르겠습니다. 하지만 <App> 컴포넌트를 감싸지 않고 다른 컴포넌트에서 <BrowserRouter>를 사용하는 것은 특정 컴포넌트 또는 컴포넌트 그룹에 대한 라우팅을 독립적으로 구성하고 싶을 때 사용될 수 있습니다. 이렇게 하면 라우팅 로직이 특정 컴포넌트에 한정되며, 애플리케이션의 다른 부분과 격리될 수 있습니다. 예를 들어, <App> 컴포넌트의 하위 컴포넌트 중에서만 특정 라우팅이 필요한 경우 해당 컴포넌트 내에서 <BrowserRouter>를 사용하여 독립적인 라우팅을 구성할 수 있습니다.이런식으로 대답이 오는데 이해가 잘 가질 않네요. 혹시 검색 키워드나, 참고할만한 글이 있을까 해서 글 남깁니다. 감사합니다~

안녕하세요 제로초님 좋은 강의 감사드립니다.제가 react router에 대해 여러 실험을 좀 하다가 url path에 특수문자(ampersand(&), exclamation(!))가 들어갈 수 있다는 사실을 발견했습니다.그런데 url query에서의 특수문자는 특정의미를 갖는 경우가 많은데요. 그러다 보니 path에 과연 특수 문자를 써도 되는가에 대해 의문이 생겼습니다. RFC 공식문서에서는 path에 특수문자를 써도 된다고 하는데 구글의 몇몇 stackoverflow의 글에서는 안된다는 내용이 있어서 혼동이 옵니다 ㅜ혹시 제로초님의 의견은 어떠실지 여쭤봅니다.

react-router가 6버전 업데이트가 되어서 강의 들으면서 v6으로 한번 해볼까 하는데 혹시 호환성에 문제가 있어서 적용하지 않으신건지 궁금합니다.