dispatch 함수도 리렌더링 유발하지 않나요?

리액트에서 dispatch를 호출하면 상태가 즉시 변경되는 것이 아니라, 다음 렌더링에서 반영됩니다. 즉, dispatch 직후에 상태 값을 읽으면 여전히 이전 상태가 유지됩니다.리액트 공식 문서 내용 참고: https://react.dev/reference/react/useReducer"The dispatch function only updates the state variable for the next render. If you read the state variable after calling the dispatch function, you will still get the old value that was on the screen before your call." 이 코드에서 onSubmit() 함수가 실행될 때, 상태 값이 즉시 반영되지 않으므로 갱신된 상태를 직접 계산하기 위해 formReducer(state, { type: "VALIDATE", validate })를 사용한 것입니다. 이렇게 하면 현재 렌더링에서 사용할 상태를 미리 계산하여 onSubmit()에서 올바른 값을 전달할 수 있습니다.즉, dispatch를 여러 번 호출해도 각 상태 변경은 다음 렌더링에서 적용되기 때문에, 동일한 렌더링 내에서 즉시 변경된 값을 활용하려면 dispatch 후의 상태가 아닌, 직접 계산한 값을 사용해야 합니다.

객체가 함께 반환되는데 왜 그럴까요

안녕하세요? 질문을 등록해 주셨는데 본문에 로 남아있네요. 혹시 문제는 해결하셨을까요?

ProductItem에서 onClick = {onClick}을 달지 않아도 되는 이유

ProductItem.jsx에 onClick이 버튼에 사용되긴합니다. 2-advanced/09-popstate 브랜치에서 확인하실 수 있고요. {onClick && ( 주문하기 )} 혹시 수업을 따라오시면서 누락하신 게 아닌가 싶네요.

replaceState를 쓰지 않는 대안

올려주신 코드에서 어떤 동작을 기대하셨는지 조금 더 설명해주실 수 있을까요?replaceState를 사용하지 않고 event.currentTarget.document.location.pathname을 활용하는 방식이 정상적으로 작동하는 것처럼 보이지만, 일부 상황에서 의도치 않은 동작이 발생할 수 있을 것 같습니다.예를 들어, pushState로 새로운 경로를 추가하면 브라우저의 주소는 변경되지만, popstate 이벤트가 발생할 때 event.state 값이 비어 있을 수 있습니다. replaceState를 활용하면 초기 상태를 명확하게 설정할 수 있어 이러한 문제를 방지할 수 있습니다.혹시 특정한 이유로 replaceState 없이 해결하고 싶으신 걸까요? 기대하신 동작과 현재 발생하는 문제를 조금 더 설명해주시면 도움이 될 것 같아요.

에러 해결 공유드립니다

직접 문제를 해결하고 공유해 주신 덕분에, 같은 문제를 겪는 다른 분들께 큰 도움이 될 것 같습니다. 노드 버전 문제와 맥 실리콘 환경에서의 해결 방법까지 상세히 정리해 주셔서 정말 고맙습니다.

webpack 4 버전과 호환되는 플러그인 버전 공유드립니다

공유 감사합니다. package.json 파일을 참고하시면 전체 라이브러리의 버전을 확인하실 수 있어요. https://github.com/jeonghwan-kim/lecture-frontend-dev-env/blob/master/package.json

setValue 메서드를 바인딩 해야 하는 이유

this를 바인딩하는 건 자식 컴포넌트에게 함수를 전달하는 것 외에도 다양한 상황에서 사용됩니다. 가령 이벤트 핸들러를 전달하거나 특정 메서드를 호출할 때, 현재 클래스 인스턴스를 참조하도록 this를 고정하기 위해 바인딩이 필요합니다. 이는 자바스크립트의 this가 함수가 실행되는 환경(호출 주체)에 따라 참조하는 객체가 달라지기 때문입니다.화살표 함수를 사용하면 this를 현재 클래스 인스턴스로 고정할 수 있는데요. 이는 화살표 함수가 렉시컬 컨텍스트(함수가 선언된 위치의 컨텍스트)를 사용하기 때문입니다. 하지만 클래스 내부에서 화살표 함수를 정의하려면 일반적으로 클래스의 멤버 변수로 정의해야 합니다. 예를 들면 다음과 같습니다: class MyComponent extends React.Component { setValue = (value) => { this.setState({ value }); }; }이 방법은 편리하지만, 멤버 변수로 정의된 함수는 클래스의 프로토타입이 아닌 인스턴스에 직접 할당됩니다. 이는 메모리 측면에서 약간의 비용을 추가로 발생시킬 수 있으며, 대규모 애플리케이션에서는 성능에 영향을 미칠 가능성도 있습니다.또한, 멤버 변수는 언제든지 값이 변경될 수 있기 때문에 코드 유지보수 시 예기치 않은 동작이 발생하지 않도록 관리에 주의해야 합니다. 아래 인프런 AI 인턴 답변도 참고하시면 좋습니다.

강사님은 어떤 책으로 HTTP 를 공부하셨나요?

수업에서는 사용하는 블로그 글의 하단에 를 참고하시면 모든 참고자료를 확인하실 수 있습니다.https://jeonghwan-kim.github.io/posts/?series=HTTP책은 이 두 권입니다. 시부카와 요시키, 한빛미디어 데이빗 고울리, 인사이트 수업을 마치신 뒤에 이 자료를 참고해서 스스로 정리해 보시면 더 도움이 되겠네요.

3.1.3 14:00 정도부터 영상이 조금 이상합니다...!!

영상 편집 중에 잘못된 부분이 있었네요. 바로 수정했습니다. 제보해 주셔서 정말 고맙습니다. 다음 수업에도 이상한 점있으면 언제든 말씀 부탁드려요.

MyReact를 IIFE(즉시실행함수)로 설계하신 이유

함수 스코프 안에 관련 코드를 담으려고 즉시실행함수를 사용했습니다. 아래 ai 답변의 특징을 참고하시면 좋을 것 같습니다.하지만 프로젝트에서 웹팩을 사용하고 있어서 직접 ECMAScript 모듈 문법 시스템을 활용해도 될것 같습니다.// MyReact.js export function createContext() {} // 혹은 const MyReact = { createContext } export default MyReact