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

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

[4.4장 메모이제이션 훅] 4.4.3 memo 참조 비교

맞습니다. 수업에서는 JSX문법을 사용하기 때문에 프롭 인자 전달 값이 잘 보이지 않는데요. 자바스크립트로 바뀌면 이런 코드가 됩니다.// React.createElement(FilteredPosts, {posts: filterdPosts} )함수를 호출할 때마다 { posts: filteredPosts } 란 리터덜 표현식에 의해 새로운 값이 생성되는데요. 이 때문에 캐시한 프롭 객체와 다른 값으로 판단하는 것입니다.

class와 constructor를 이용한 객체 지향 프로그래밍

일종의 추상화 입니다. 우리가 어떤 사물이나 현상을 언급할 때 때 특성과 동작을 모두 설명할 수 있는데요. 간단히 이름을 사용해 표현할 수 있습니다. 가령 "코가 길고 귀가 크고 덩치가 큰 네 발 달린 초식 동물" 보다는 "코끼리"라는 이름을 사용하는 것처럼 말이죠. 리셋 버튼을 표시하고 사용자 입력을 처리하는 것을 SearchFormView라는 클래스로 추상화했습니다. 이러한 역할을 사용할 때 매번 해당 코드를 직접 작성하는 것보다는 이 역할을 담당하는 객체를 사용하면 훨씬 효율적입니다. 사람은 구현된 코드 보다는 추상화된 이름을 사용할수 있어서 좀 더 큰 규모의 로직을 다룰 수 있는 이점이 생깁니다.관련되서는 절차지향 프로그래밍과 객체지향 프로그래밍에 대해 공부하시면 도움이 되실 겁니다.

mvc 패턴 질문

사실 둘 다 사용하긴 합니다. 역할 별로 파일을 나눠서 쓰기도 하고요. src/ ├── controllers/ │ ├── controller1/ │ └── controller2/ ├── views/ │ ├── view1/ │ └── view2/아니면 페이지별로 파링르 나누고 각 페이지 안에서 역할에 해당하는 파일을 구성하기도 해요.src/ ├── page1/ │ ├── page1-controller/ │ └── page1-view/ ├── page2/ │ ├── page2-controller/ │ └── page2-view/ 상황에 따라서 둘 중 하나를 선택하거나 섞어서 사용하기도 하는데요. 가장 중요하건 본인한테 편한 방식이라고 생각합니다. 혹은 팀에서 협의한 방식을 지키는 것이 협업에 유리합니다.

eslint

이것도 사용하신 패키지 버전이 수업에서 사용한 것과 다른 게 원인 같습니다.수업에서 사용한 패키지 버전과 비교해 보시고 다르다면 이 버전으로 맞춰서 시도해 주세요.https://github.com/jeonghwan-kim/lecture-frontend-dev-env/blob/master/package.json

도와주세요!

현재 사용하시는 패키지 버전을 먼저 확인해 보세요. 수업에서 사용하지 않은 최신 버전을 사용하면 이런 현상이 있을 수 있습니다. 수업에서 사용한 패키지 버전입니다.https://github.com/jeonghwan-kim/lecture-frontend-dev-env/blob/master/package.json만약 버전이 다르다면 수업에서 사용한 버전으로 맞춰서 다시 시도해 보시기 바랍니다.

useRef 관련하여 질문드립니다

useRef()로 만든 ref2는 {current: undefined} 값이 할당됩니다. 이 값을 input의 ref 속성에 전달하는데요. react-dom 에서 제공하는 이 특별한 ref 에 의해 ref2.current 에 돔 앨리먼트가 할당되어서 접근할 수 있습니다. 아래 ai 답변도 참고하시면 도움이 될 것 같습니다.

렌더 프롭 관련하여 질문드립니다

컴포넌트의 역할을 1) 상태 관리와 2) 리액트 앨리먼트 관리라고 볼 수 있는데요. 이런 경우도 있을 것 같습니다. 상태를 관리하지만 리액트 앨리먼트는 다른 경우. 컴포넌트가 상태 관리하는 역할만 하는 거죠.이러한 상황은 리액트 컨택스트에서도 마찬가지인데요. 이벤트 에미터의 상태는 관리하지만 이 값을 가지고 렌더링하는 로직은 외부에 두고 싶습니다.컴포넌트가 직접 앨리먼트를 만들어 렌더링 하지 않고 외부로 위임할 때 리액트 앨리먼트를 반환하는 함수를 프롭으로 사용할수 있는데요. 이를 렌더 프롭이라고 부릅니다. 아래 AI 답변과 리액트 문서를 참고하시면 도움이 되실겁니다.

delegate, emit 필요한 이유

delegate는 하나의 요소에 이벤트 핸들러를 설정해 여러 자식 요소에서 발생하는 이벤트를 관리하는 역할입니다. 각 요소에 직접 바인딩하는 기법에 비해 한번에 여러 요소의 이벤트를 처리할 수 있는 장점이 있습니다. emit는 요소에게 이벤트를 전달하는 함수인데요. 보통 객체 간의 값을 전달하려면 함수를 호출하는 게 일반적입니다. 객체를 직접 참조할 수 있는 경우에는 이렇게 함수 인자로 전달할 수 있습니다. 하지만 멀리 떨어진 경우에는 함수를 호출하지 못하는데요. 이벤트를 사용하면 시점, 객체 거리와 상관없이 호출할 수 있는 유연함이 있습니다. 아래 ai 답변도 참고하시면 이해하시는데 충분히 도움이 될 것 같습니다.

babel-core module 에러

혹시 웹팩으로 빌드하실 때 오류가 나는 것일까요? 질문을 읽어보면서 저도 몇 가지 궁금한 게 생겼습니다. 1) 웹팩 5를 사용하셨다고 했는데 캡쳐하신 package.json에는 버전 3으로 되어있습니다.이 상태에서 npm run build 나 npm run dev를 실행하면 버전 3으로 실행될텐데요.웹팩 5를 어떻게 사용하셨는지 궁금하네요.2) babel-core의 template을 사용하신 것 같습니다.수업에서 다루지 않는 내용인데요. 혹시 이것 때문에 패키지를 추가하시는 걸까요? 문제를 재현할 수 있는 코드를 깃헙으로 공유해 주시면 좋겠습니다. 제 로컬 환경에서도 실행해 보면 좀 더 빨리 도와 드릴 수 있을 것 같습니다.