감사한 마음으로 강의 잘 듣고 있는 중입니다. Vue3 + Quasar(UI Framework) + Nuxt3 TypeScript vee-validate/valibot 으로 프로젝트를 한 경험이 있는데 react는 조금 어렵게 느껴지네요. 아마도 원리를 알려주신다고 리액트 훅들을 직접 만들어서 그런 것 같지만 좋은 것 같습니다. 제가 드리고자 하는 질문은 React + UI Framework + Next TypeScript 검증 라이브러리 로 유사한 아키덱처로 갈 예정인데 문제가 UI Framework와 검증 라이브러리를 어떤 것을 사용하는 것이 좋을지 몰라서 질문 드립니다. 혹시 추천해주실 UI Framework와 검증 라이브러리가 있나요? 또 한가지는 아무래도 백오피스이므로 데이타 그리드도 중요한데 추천 부탁드립니다. 이전에 사용한 Quasar는 자체 quasar.css를 가지고 있어 웹 접근성이나 sass 작업할 때 너무 힘들었습니다. 질문이 너무 광범위해서 죄송합니다.
useEffect를 통해 setErros를 호출해서 errors 상태를 변경하고 있습니다. 상태를 변경하는 건 부수효과가 아니니까 useEffect에서 상태 업데이트는 잘못된 사용이 아닌가 해서요! 저것 때문에 렌더링이 두 번 되기도 하고, https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state 이 내용이랑 같은 내용인 것 같아서요!
강사님 안녕하세요 강의 잘 듣고 있습니다. 좋은 강의 감사합니다. 질문이 하나 있습니다. OrderableProductItem 컴포넌트를 따로 만든다는 건 결국 base인 ProductItem 컴포넌트에 주문하기 버튼이 추가된 것인데, 따로 만들거라면 base 컴포넌트인 ProductItem은 진짜 기본적인 상품 정보만 보여주는 컴포넌트로 두고 buton 컴포넌트를 OrderaleComponentItem에서 렌더링 해주면서 order 로직도 여기에 두는 게 좋지 않나? 라는 생각이 들어서요!
안녕하세요, 강의에서 훅( useState , useEffect ) 사용 규칙과 내부 동작 원리를 공부하다가 궁금한 점이 있어 질문드립니다. React는 훅을 순서 기반 으로 관리한다고 배웠습니다. 그래서 다음과 같은 규칙이 있는 걸로 알고 있습니다: 훅은 컴포넌트 최상위에서만 호출 해야 한다. 조건문, 반복문, 중첩 함수 안에서 훅을 호출하면 안 된다. 이와 관련해 궁금한 점은 다음과 같습니다: 개발하다 보면 상태가 많아지고 상태마다 핸들러도 많아지게 되어 코드가 길어지게 됩니다. 그러다 보니 소스코드를 한눈에 파악하기 어려워지는 것 같습니다. 실무에서는 상태별로 핸들러를 묶어서 작성하는 패턴을 많이 쓰나요? 예를 들어: const [count, setCount] = useState(0); const handleChangeCount = () => { ... }; const [name, setName] = useState(''); const handleChangeName = () => { ... }; 이런 방식으로도 구현을 하시는지, 아니면 useState는 최상단에서 묶어 관리하고 handler는 handler끼리 useEffect는 useEffect 끼리 작성하는 것이 일반적인지 궁금합니다.
안녕하세요, 강의 잘 보고 있습니다 😀 FormControl 컴포넌트 사용시 htmlFor prop 값 넘길 때 문자열을 중괄호로 감싸서 넘기는데요, "label" prop의 값은 문자열을 그냥 전달하는데, htmlFor의 값은 문자열을 중괄호로 감싸서 전달하는 이유가 뭘까요 ? 그냥 문자열만 보내면 안되는건가요 ?
안녕하세요 선생님 const nextState = formReducer(state, {type : "VALIDATE", validate }) 로 nextState를 정의하셨는데 애초에 SET_TOUCHED_ALL 디스패치가 실행되면 리렌더링 VALIDATE 디스패치가 실행되면 또 리렌더링 되어 onSubmit 함수가 정상 동작해야 될거 같은데.. 그렇게 생각하면 안되는 이유가 궁금합니다.!
안녕하세요 강사님 수업 잘 듣고 있습니다. OrderableProductItem.jsx에서 컨텍스트의 컨슈머 안에 렌더 프롭을 children으로 만들고 changePath를 이용해서 주문하기 버튼을 누르면 cart로 이동하지 않습니까? 그런데 productItem.jsx에서는 {onClick && ( <Button styleType={"brand"} >주문하기</Button> )} 1. 이렇게 정의되어서 onClick 메서드를 받기만 하고 직접 활용하지 않습니다. 그럼에도 불구하고 Context를 통해 changePath가 작동할 수 있는 이유가 무엇인가요? 코드의 가독성을 위해서는 productItem.jsx에서 onClick ={onClick}을 달아주어야 하지 않나요?
안녕하세요 강사님 pushState를 작성하고 popState를 쓰는 부분에 있어서 에러가 발생했는데 이는 replaceState를 안써서 초기 상태에 대한 정보가 없어서 그렇다고 이해했습니다. 그런데, replaceState를 안쓰고 event.currentTarget.document.location.pathname 속성을 써도 정상적으로 작동하는듯한데 이 방식은 적절하지 않다고 보시나요? handleChangePath(path){ this.setState({path}) window.history.pushState({}, "", path) onpopstate = (event) => { console.log(this.state.path) this.setState({path : event.currentTarget.document.location.pathname}) }; }
안녕하세요:) 수업 잘 듣고 있습니다. 2.1.4 공급자와 소비자 강의 中 7:04에서 this.setValue = this.setValue.bind(this)를 작성하셨는데 리액트에서의 바인딩이란 자식 컴포넌트에 프로퍼티로 이벤트 핸들러와 다른 함수들을 전달할 때, 구체적으로 핸들러 안에서 부모 컴포넌트에 접근할 필요가 있을 때 해야 하는 것으로 알고 있습니다. 그런데, setValue는 자식 컴포넌트로 이벤트 핸들러를 넘겨주는 상황이 아닌데 이벤트 바인딩을 해야 하는 이유가 무엇인지 궁금합니다. 화살표 함수를 활용하면 자연스럽게 바인딩이 되는데 왜 화살표함수를 안쓰신 건지 궁금합니다.
안녕하세요. 강사님! 학습 중에 궁금한 점이 생겼는데, 제가 이해하고 있는 내용이 맞는지 궁금해 질문 드립니다! const obj1 = { a: 1 }; const obj2 = { a: 1 }; const obj3 = obj1; console.log(obj1 === obj2); // false console.log(obj1 === obj3); // true 자바스크립트에서 객체나 배열을 비교할 때 기본적으로 참조를 비교하는 것으로 알고 있습니다. 즉, 1번에서 두 객체가 같은 값을 가지고 있으나 메모리 주소가 달라 false를 출력하고, 2번에선 같은 메모리 주소를 참조해 true를 출력하는 것으로 알고 있습니다 여기서부터 제가 궁금했던 내용입니다! 캐시된 filteredPosts를 사용해 렌더링하는 경우를 가정했을 때 : const filteredPosts = MyReact.useMemo(filterPosts, [posts, tag]); filteredPosts는 useMemo를 통해 filterPosts 함수로 생성된 배열을 클로저 공간에 넣어두고, posts와 tag가 변경되지 않는다면 항상 똑같은 값을 FilteredPosts로 전달 => <FilteredPosts posts={filteredPosts} /> const FilteredPosts = MyReact.memo(({ posts }) => { ... } // FilteredPosts는 캐시된 filteredPosts를 memo 함수로 전달 => function memo(TargetComponent) { return (nextProps) => { ... const [prevValue, prevProps] = TargetComponenet.memorizedState; if (prevProps === nextProps) { return prevValue; } ... } } 그럼 여기 전달된 nextProps(캐시된 filteredProps)는 당연히 같은 메모리를 참조하니 깊은 비교 없이 참조 비교만으로도 비교가 가능하지 않나? 싶었습니다. filteredPosts는 결과적으로 useMemo로 캐시되어있고, 새로 생성된 배열이 아니니 메모리 주소가 동일해 prevValue가 리턴되지 않을까? 했는데 아니더라구요.. useMemo를 통해 filteredPosts 배열의 참조는 동일하게 유지되고 있는건 맞는데, { posts: filteredPosts } 이렇게 FilteredPosts 컴포넌트에 전달되는 props 객체가 매번 새로운 객체로 생성돼서 그런건가? 싶은데 이게 맞는지 궁금해서 질문 드립니다..
MyReact.useRef관련하여 질문드립니다 const ref2 = MyReact.useRef(); <input ref={ref}/> 이렇게 사용하면 input태그에 접근할 수 있는데 정확히 어떤 원리로 접근 가능한건가요?? ref2는 원래 undefined값이 아닌가요?
컨텍스르를 설계하실 때 const Consumer = ({childeren } => <>{children(emiiter.get())}</>) 설명하시면서 렌더프롭이라고 설명하셨습니다. 그 이후 Count 설계하실 때 {(value) => <div>{value.count}</div>} 라고 적으셨는데 렌드 프롭에 대한 설명이 없으셔서 정확히 어떻게 렌더링되는지 궁금합니다!! 정확한 원리를 자세히 모르겠습니다
안녕하세요. 아래 질문에 대한 답글을 보고 …rest에 대해 이해를 했는데요. https://www.inflearn.com/questions/1186424 몇 가지 궁금한 점이 생겨 질문 드립니다! 강의에서 나온 방식이 1번 어트리뷰트로 버튼 컴포넌트에 인자를 전달하는 것 맞을까요? App.jsx <Button styleType={"brand"} onClick={() => console.log("TODO: 주문하기 클릭")} > 주문하기 </Button> Button.jsx const Button = ({ styleType, block, ...rest }) => { let className = 'Button'; if (styleType) className += ` ${styleType}`; if (block) className += ` block`; return <button className={className} {...rest}/> }; export default Button; 위 App.jsx의 Button에 대한 JSX 코드를 JS 코드로 변환하면 아래와 같이 변환 되나요? onClick은 어떤 식으로 변환되는지 궁금합니다. createElement( Button, // 함수 { styleType: "brand" }, // props onClick: () => console.log("TODO: 주문하기 클릭") // children "주문하기 , 결제하기" // children ) onClick도 …rest 나머지 매개변수 구문에 들어갔는데, 개발자 도구에서 props를 보면 onClick은 onClick이라는 프롭스에 맵핑 되어 있습니다. rest 객체에 children, onClick 속성이 포함되어 있어서 내부적으로 구분해주는 것인가요? 아래처럼 작성 하는 게 2번 태그 안에 인자를 전달하는 방식 맞을까요? <Button styleType={"brand"} onClick={() => console.log("TODO: 주문하기 클릭")} children={"주문하기"} > </Button> 감사합니다.
안녕하세요 선생님 코드에 오타가 있습니다. const formReducer = (state, action) => { if (action.type === "SET_VALUES") { console.log("SET_VALUES, state ", state); return { ...state, values: { ...state.values, //value --> values [action.name]: action.value, }, }; } value에서 values로 수정되어야 할 것 같습니다. 질문: 1) value 인 상태에서는 전화번호에 숫자를 입력했을 때 onChange event에 의해서 state가 변경이 됨 2) 이때 state.value는 undefined 이라 기존에 주소 값에 적어뒀던 "123" 이 무시되고 전화번호 값만 action에 의해서 state에 저장. 3) useEffect가 state 변경을 감지하고 validate를 진행후에 reducer의 forceupdate 에 의해 re render 4)주소값이 없었으니 errorr값에 "주소를 입력하세요" 들어있다. 라고 이해하면 맞을까요?
