묻고 답해요
140만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리액트 2부] 고급 주제와 훅
useRef 관련하여 질문드립니다
MyReact.useRef관련하여 질문드립니다const ref2 = MyReact.useRef();<input ref={ref}/> 이렇게 사용하면input태그에 접근할 수 있는데 정확히 어떤 원리로 접근 가능한건가요??ref2는 원래 undefined값이 아닌가요?
-
미해결[리액트 2부] 고급 주제와 훅
렌더 프롭 관련하여 질문드립니다
컨텍스르를 설계하실 때 const Consumer = ({childeren } => <>{children(emiiter.get())}</>) 설명하시면서 렌더프롭이라고 설명하셨습니다.그 이후 Count 설계하실 때 {(value) => <div>{value.count}</div>} 라고 적으셨는데 렌드 프롭에 대한 설명이 없으셔서 정확히 어떻게 렌더링되는지 궁금합니다!! 정확한 원리를 자세히 모르겠습니다
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
제공해주신 코드를 vscode에서 켜도 eslint가 안됩니다.
따라하며 배우는 리액트 테스트코드 강의에서 eslint가 적용되었다고 하는 파일자체를 받아 npm install을 헀는데,eslint가 작동되지않습니다.extension에서도 eslint를 받았고, npm install을 한 상태에서test()let test = () => {}와 같은 오류가 발생될 코드를 작성해도 eslint가 반응하지 못하는데 이유가 뭘까요 강의에는 설정이 적용되어있다고 하는데
-
미해결부트캠프에서 알려주지 않는 것들 (리액트) 1편
전부 입력된 코드들만 있는건가요? 따라치면서 하고싶은데...
(사진)
-
미해결[리액트 2부] 고급 주제와 훅
[1.2장 상품목록 화면] 1.2.3 Button ...rest 관련 질문 드립니다.
안녕하세요. 아래 질문에 대한 답글을 보고 …rest에 대해 이해를 했는데요.https://www.inflearn.com/questions/1186424 몇 가지 궁금한 점이 생겨 질문 드립니다! 강의에서 나온 방식이 1번 어트리뷰트로 버튼 컴포넌트에 인자를 전달하는 것 맞을까요?App.jsx<Button styleType={"brand"} onClick={() => console.log("TODO: 주문하기 클릭")} > 주문하기 </Button>Button.jsxconst 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> 감사합니다.
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
코드 샌드박스 안되는거같습니다
코드 샌드박스들어가면 이런식으로 뜨는데 어떻게 해결하나요?
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
ERROR
App.js파일을 refresh 하면 이렇게 error가 뜨네요 ㅜㅜ 해결책을 아무리 찾아봐도 나오질 않습니다 . .
-
미해결[리액트 2부] 고급 주제와 훅
[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.
안녕하세요 선생님 질문이 2개 있습니다. const handleClick1 = MyReact.useMemo((postId) => { console.log("handleClick", postId); }, []); const handleClick2 = MyReact.useMemo(() => (postId) => { console.log("handleClick", postId); }, []);double arrow function을 curried function이라고 하던데 이번 예시에서 MyReact.useMemo를 쓰는 경우에는 1) handClick1, handClick2 둘 다 상관이 없나요?2) 있다면 무슨 이점때문에 handleClick2처럼 쓰신건가요?
-
해결됨[리액트 2부] 고급 주제와 훅
[4.1장 레프 훅] useRef관련 질문이있습니다.
안녕하세요 선생님 본 강의 예시에서import MyReact from "./lib/MyReact"; import React from "react"; export default () => { const ref1 = MyReact.useRef(1); const ref2 = MyReact.useRef(); const [state, setState] = React.useState(0); console.log(state) if (state > 2) { console.log("hihi"); ref1.current = ref1.current + 1; } return ( <> <button onClick={() => setState(state + 1)}> state increase (state: {state}) </button> <div>{ref1.current}</div> <input ref={ref2}></input> <button onClick={() => console.log("input value", ref2.current.value)}> ref2 select </button> </> ); };state >2 이면 값이 증가하는것을 확인했는데 이후에도 계속 state가 2 초과 이니까 계속 ref1.current가 증가할 줄 알았는데 아니더라구요 왜그런건가요?
-
미해결[리액트 2부] 고급 주제와 훅
[1.3.6 상태정의] state 관련
OrderPage/index.jsx 생성자(constructor)의 state 부문에서 this.state = {order: null,} 와 this.state = {}의 차이가 있나요?(this.state = {order: null,} 로 선언한 이유가 궁금합니다. )
-
해결됨[리액트 2부] 고급 주제와 훅
[2.4장 다이얼로그 1] 2.4.5 withLayout(풀이) 에 관한 질문입니다.
안녕하세요 선생님 혼자 해보는 과정중에 질문이 있습니다.import React from "react"; import Backdrop from "../components/Backdrop"; import Dialog from "../components/Dialog"; export const layoutContext = React.createContext({}); layoutContext.displayName = "LayoutContext"; export class Layout extends React.Component { constructor(props) { super(props); this.state = { dialog: null, }; this.setDialog = this.setDialog.bind(this); } setDialog(dialog) { this.setState({ dialog }); } render() { const value = { dialog: this.state.dialog, setDialog: this.setDialog, }; return ( <layoutContext.Provider value={value}> {this.props.children} </layoutContext.Provider> ); } } export const DialogContainer = () => ( <layoutContext.Consumer> {({ dialog }) => dialog && <Backdrop>{dialog}</Backdrop>} </layoutContext.Consumer> ); export const withLayout = (WrappedComponent) => { const WithLayout = (props) => ( <layoutContext.Consumer> {({ dialog, setDialog }) => { const openDialog = () => { console.log("openDialog") setDialog(<Dialog>hihi</Dialog>); }; const closeDialog = () => { setDialog(null); }; const enhancedProps = { openDialog, closeDialog, }; return ( <WrappedComponent {...props} {...enhancedProps}></WrappedComponent> ); }} </layoutContext.Consumer> ); return WithLayout; }; withLayout을 만들어서 openDialog, closeDialog를 enhancedProps로 전달을 하였습니다.import * as MyLayout from "../lib/MyLayout"; const Page = ({ header, children, footer, openDialog }) => ( <div className="Page"> <header>{header}</header> <main>{children}</main> <footer>{footer}</footer> <MyLayout.DialogContainer /> <button onClick={openDialog}>dialog</button> </div> ); export default MyLayout.withLayout(Page); Page에서 MyLayout.DialogContainer이 기본값이 null인데 button을 추가하여 고차컴포넌트에서 주입받은 openDialog를 사용하여 Dialog를 렌더링하는데 성공하였습니다.닫기도 해보고싶어서import * as MyLayout from "../lib/MyLayout"; const Dialog = ({ closeDialog }) => ( <div className="Dialog"> <header>header</header> <main>main</main> <footer>footer</footer> <button onClick={closeDialog}>closeDialog</button> </div> ); export default MyLayout.withLayout(Dialog);Dialog component에 닫기 버튼을 추가하려고 MyLayout.withLayout으로 감싸니초기화 전에 참조하려 했다는데 이 에러 자체는 이해가 가지만 왜 지금 위 상황이 이 에러에 해당되는 상황인지 이해가 가지 않습니다...
-
해결됨[리액트 2부] 고급 주제와 훅
[2.1장 컨택스트] 2.1.4 공급자와 소비자 / 에서 질문이 있습니다.
안녕하세요 선생님 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 값이 다른게 힌트 같은데 해석을 하지 못하겠습니다.
-
해결됨[리액트 2부] 고급 주제와 훅
[1.4장 장바구니 화면] 1.4.9 레프와 돔 / export에 관한 질문입니다.
안녕하세요 선생님 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를 변경해야될줄 알았는데 변경을 하지 않아도 정상동작을 하는데 이것은 왜 그런것인가요?
-
해결됨따라하며 배우는 리액트 테스트 [2023.11 업데이트]
테스트 시간을 단축할 수 있는 방법에 대하여 문의드립니다.
[1] 문의내용(총 2건)Jest의 테스트 시간을 단축할 수 있는 방법Jest의 테스트 시간이 증가하는 원인React 프론트코딩시 jest를 항상 켜두고 작업하는게 좋을까요? [2]현재 상황 안내섹션 2의 "간단한 앱 만들며 테스트"를 실습하고 있습니다.테스트코드의 실행이 저의 경우 3초(최대 5초)가 소요되는 반면, 강의 영상은 길어야 2초 정도로 속도가 차이가 나는거 같습니다. 실제 프로젝트에서 테스트코드의 양이 늘어날수록 비례하여 jest 소요시간이 늘어날 것이고, 개발시간의 장기화등 스케쥴측면에서 문제가 될 수 있지 않을까 싶어 문의를 드립니다.
-
해결됨[리액트 2부] 고급 주제와 훅
강의 수강 순서 질문 있습니다.
선생님 안녕하세요 리액트 1부 수강하고 2부로 넘어온 수강생입니다 ㅎㅎ제가 리액트 1부도 수강했고 그 외에 다른 리액트 강의도 먼저 수강한게 있는 상태에서리액트 2부 목차를 보니깐 들어보면 좋을법한 내용들이 많이 있는 것 같아서 수강신청을 했습니다.그런데 다루는 내용이 자세하고 많다보니깐 강의 시간이 많이 길어서 강의를 조금 더 효율적으로 듣는 방법을 생각해 보게 되었는데요... 현재 2부 수강은 1편은 다 수강한 상태이고 2편 3편 4편이 남았는데요요즘 리액트 개발이 함수형 컴포넌트로 많이 이루어지고 있고 저도 훅에 대한 개념이 약하다고 판단되서 수강을 하게 된 것도 있어서 훅에 대한 내용을 먼저 수강하는 게 낫지 않을까 하는 생각이 드는데요그래서 제가 3편과 4편을 모두 수강 한 뒤에 2편을 수강하려고 하는데 혹시 3편과 4편에서 다루는 내용중에 2편을 수강하지 않으면 이해가 어려운 주제들이 있을까요?? 아! 그리고 제가 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으로 설치하고 진행 하는데 선생님은 어떻게 하시는지 궁금합니다... 그리고 혹시 전자의 경우로 하신다면 그렇게 하시는 이유도 궁금합니다!!
-
미해결따라하며 배우는 리액트 테스트 [2023.11 업데이트]
useState 배열값 변경의 경우 테스트 멈춤
질문있습니다. const modelListData = ['model1', 'model2', 'model3'] const [rowData, setRowData] = useState([]) useEffect(() => { setRowData(modelListData) }, [modelListData])위 처럼 작성을 한 후에 테스트를 돌리면 그냥 터미널이 멈춰 버립니다...그런데 setRowData(modelListData)이걸 주석처리 하거나 배열이 아닌 타입의 값을 넣을 경우에는 테스트가 제대로 동작합니다. 혹시 test코드에 뭔가를 작성을 해주어야 할까요? ㅠㅠ테스트 코드는 아래처럼 작성하고 돌려보았습니다.describe('모델리스트 컴포넌트 및 기능 테스트', () => { test('테스트 왜 안됨?', () => { render(<ModelList />) }) }) 그런데 터미널은 여기서 아무리 기다려도 다음으로 넘어가지 않습니다. 단 setRowData에 배열이 아닌 타입의 값을 넣을 경우에는 무리없이 잘돌아갑니다 ㅜㅜ RERUN src/modelManager/components/ModelList.tsx x2 · src/__test__/modelList.test.tsx (1) · 모델리스트 컴포넌트 및 기능 테스트 (1) · 테스트 왜 안됨?
-
해결됨[리액트 2부] 고급 주제와 훅
ProductPage import 할 때, from index.jsx가 아닌 이유
안녕하세요. 강의 재밌게 듣고 있습니다! App.jsx에서 import ProductPage from "./pages/ProductPage" 부분에서 실제 코드는 index.jsx에 작성되어 있는데 디렉터리명인 ProductPage로 경로를 지정해도 동작하는 이유가 궁금합니다.
-
미해결[리액트 2부] 고급 주제와 훅
useMemo내에서 사용되는 window.location.search 를 deps에서 제외한 이유
안녕하세요. 정환님 드디어 강의도 마무리되어가는데살짝 이해가 안된 부분이 있습니다. URLSearchPrarms 를 통해 query param를 파싱하는 부분을 캐싱하는 부분에서 window.location.search 는 딱 한번만 바뀌고 거의 바뀌지않을 것이라고 이야기하셨는데 같은 페이지에서 navigate가 흔히 있는 요구사항이 아닌가요? 저희가 사용하는 Router의 useNavigate를 통해 화면간에 이동할 때마다 변하는 값으로 알아서 넣어두는게 더 이상적이라고 생각하고 실습을 진행했습니다. 저희 예제에서는 cart 페이지에서 cart로 이동할 비지니스 요구사항은 없어서 괜찮지만 예를들어 다른 상품이 담겨있는 장바구니로 이동하는 요구사항이 있다면 /cart?productId=CACDA421 => /cart?productId=CACDA423deps에 window.location.search를 넣어두는게 안전해보이는데 최적화가 필요한 부분이었을까요?
-
미해결[리액트 2부] 고급 주제와 훅
MyReact.useReducer로 Validate를 구현한 부분을 이상적으로 처리하려면?
안녕하세요. Reducer는 ReactJS에서 제공하는것을 거의 잘 안써왔었는데 한번 활용해봐야겠다는 마음이들었던 강의였습니다. 이번 4.3장(리듀서 훅) 수강하고 궁금한 부분은 Validate처리가 일반적으로 dispatch만으로 해소가 안되는 부분을 직접 reducer를 호출해줘서 처리하는 부분을 봤습니다. 직접 리듀서를 호출하는 형태가 조금 리듀서를 만든 의도와 다른 방향같기도한데. 이전상태를 이용해서 앞으로의 상태를 업데이트하고 싶을때 dispatch를 사용해야한다면 어떻게 처리되야 조금 더 이상적인 방향이라고 생각하시나요?