69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결실전 리액트 프로그래밍
useImperativeHandle 질문 입니다.
1. useImperativeHandle 을 사용하기 위해서 forwardRef로 감쌀필요가 꼭 있는 것일까요? childRef 처럼 그냥 넘겨줘도 되지 않나요? 2. 자식 컴포넌트에서 useImperativeHandler을 사용하지 않고childRef.current = { addAge:()=>{}, getNameLength:()=>{} } 처럼 넣어도 사용할 수 없을까요?
- 미해결실전 리액트 프로그래밍
컴파일 문의드립니다.
강사님 안녕하세요. React 는 컴포넌트가 많아질수록 로컬환경에서 컴파일 속도가 점점 증가하는 것 같습니다. 프로젝트하고 있는 곳에서 컴포넌트가 몇 천개인 거 같은데 컴파일이 몇 분씩 걸리는 거 같아요. 혹시 컴파일을 빠르게 할 수 있는 좋은 방법 알고 계시는 게 있으면 좁 부탁드립니다!!
- 미해결실전 리액트 프로그래밍
React.memo 관련 질문이 있습니다.
React.memo 가 props 비교를 통해 리렌더링을 막아줄 수 있는 유용한 기능이라는 것을 알게되었는데요,그렇다면 리액트에서는 왜 React.memo 적용을모든 컴포넌트에 default로 제공하지 않는지 궁금합니다.제가 구글링을 해본 결과2년 전에 Dan Abramov가 트위터에 이런 글을 올렸더라구요.. ``` Ask yourself: Why don’t you put Lodash memoize() around every function? Wouldn’t that make all functions faster? Do we need a benchmark for this? Why not?```저는 React.memo가 특정 컴포넌트의 이전 상태의 props를 기억하고 있다가 새로 렌더되어야할 상황에 전달된 props와의 비교를 통해 선택적으로 렌더링을 결정하는것이라고 생각했는데, 저 트위터를 보면 마치 React.memo가 컴포넌트 전체를 메모리 어딘가에 기억해야하고 이 작업이 오히려 성능에 악영향을 줄 수 있다는 뉘앙스로 들렸습니다.횡설수설 서론이 길어진 것 같아서 죄송합니다. React.memo를 왜 모든 컴포넌트에 적용하면 안좋은지 궁금합니다!
- 해결됨실전 리액트 프로그래밍
Context API vs Redux 사용 빈도
전에 강의를 듣고 제 것으로 못만든 부분이 있어 복습을 하는데 Context API는 Redux를 사용하면 대체가 다 가능한 것으로 저한테는 보이는데 실무에서 redux 대신에 context api를 쓸 경우가 있을까요?
- 미해결실전 리액트 프로그래밍
10분도 안들었는데 환불안됩니까?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 10분도 안들었는데 환불안됩니까?
- 미해결실전 리액트 프로그래밍
styled-components
styled로 생성한 컴포넌트의 경우 작성한 props 중 type, onClick, id 같은 어트리뷰트는 자동적으로 엘리먼트의 어트리뷰트로 적용이 되나요? 즉, 일반적이지 않은 이름의 어트리뷰트의 경우 어트리뷰트로 적용되지 않고 type, onClick, id 같은 어트리뷰트 이름을 갖는 것들은 엘리먼트의 어트리뷰트로 적용되는 것이 맞나요?? const Button = styled.button` //스타일 정보 `; <Button onClick={submitHandler} type="submit" isValid={true}/> 위 코드에서 onClick, type, isValid 모두 props로 전달되지만, onClick과 type은 button 엘리먼트의 어트리뷰트로 적용되고, isValid는 어트리뷰트로 적용되지 않는 것이 맞나요??
- 미해결실전 리액트 프로그래밍
커스텀훅 작성할 때 axios 부분을 별도의 파일로 만들어서 호출 할 경우 type error 가 나타납니다.
안녕하세요. typescript 와 create-react-app 을 사용하여 공부중인데요. 커스텀 훅을 만들어서 비동기 API를 호출하여 테이블에 노출하는 기능을 구현하다가 도저히 답이 안나와서 질문드립니다. useState와 useEffect 를 사용하여 비동기 API를 set 하는 커스텀훅을 만들었고, axios 를 호출하는 별도의 파일을 만들어서 사용중인데 const [items, setItems] = useState<coronaApiProps[]>();const coronaItems = getCorona();useEffect(() => { setItems(coronaItems);}, []); 이렇게 사용하니 아래처럼 에러가 나타납니다. TS2345: Argument of type 'Promise<coronaApiProps[]>' is not assignable to parameter of type 'SetStateAction<coronaApiProps[] | undefined>'. Type 'Promise<coronaApiProps[]>' is not assignable to type '(prevState: coronaApiProps[] | undefined) => coronaApiProps[] | undefined'. Type 'Promise<coronaApiProps[]>' provides no match for the signature '(prevState: coronaApiProps[] | undefined): coronaApiProps[] | undefined'. coronaApiProps 는 제가 만든 인터페이스입니다. 해당 에러가 나타나서 useEffect 안에 const [items, setItems] = useState<coronaApiProps[]>();// axios 로 api 호출const coronaItems = getCorona(); useEffect(() => {coronaItems.then(response => {setItems(response); });}, []); 이렇게 사용하니 커스텀훅을 두번 호출합니다. 그래서 axios 파일을 분리하지 않고 커스텀훅 안에 사용하면 커스텀훅을 한번만 사용합니다. api를 호출하는 axios 파일을 분리하고 사용할 수 없나요? 필요하면 github 추가해드릴 수 있습니다.
- 미해결실전 리액트 프로그래밍
정리가 잘 안됩니다.
이전 과정까지는 잘따라왔는데 어느순간부터 npm start시 오류가 납니다. 1. visual studio code - 터미널에서 실행하는것과 / window [cmd]에서 실행하는것과 같은것이죠? 2, package.json / package-lock.json 두파일은 실행하는 프로젝트 안에 존재하면 되나요? 3. node_modules 을 삭제해도 해결이 되지 않아 답답합니다. 초기 오류는 webpack version이 달라서 생긴 문제였는데 지금은 프로젝트 폴더에서 npm start시 아래와 같은 오류가 뜨는데 도움 주실수 있나요 ㅜ 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! suspense@0.1.0 start: `react-scripts start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the suspense@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install? npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\seulki-office\AppData\Roaming\npm-cache\_logs\2021-11-16T08_31_43_225Z-debug.log
- 미해결실전 리액트 프로그래밍
git의 [whois] - [final] 프로젝트 실행 시, The above error occurred in task anonymous 오류가 발생합니다.
안녕하세요. 완성된 프로젝트로 구동원리를 이해해 보려 git에서 [whois] 폴더의 [final]을 내려받아 npm install - npm start를 했는데 아래와 같이 오류가 발생합니다. 기본페이지, signup, login 모두 마찬가지 입니다. makeFetchSaga 가 문제 인가 싶어서 아래 처럼 코드를 수정해도 마찬가지 결과입니다. export default function* () { yield all([ /* takeEvery( Types.FetchAutoComplete, makeFetchSaga({ fetchSaga: fetchAutoComplete, canCache: true }), ), */ takeEvery( Types.FetchAutoComplete,fetchAutoComplete ), takeLeading( Types.FetchAllHistory, makeFetchSaga({ fetchSaga: fetchAllHistory, canCache: false }), ), ]); }
- 미해결실전 리액트 프로그래밍
질문있습니다.
@babel/preset-react 프리셋 변환 명령에 Successfully 완료로 확인되는데 simple1.js 파일이 생성되지 않습니다. 여전히 src>simple1.js만 있구요. 어떻게 처리해야하나요? 컴파일완료문구는 있으나 파일생성되지 않아 자바스크립트 문법이 없어서, 브라우저에 실행시 버튼이 노출되지 않으며, Uncaught SyntaxError: Unexpected token '<' 위와 같은 오류가 보입니다.
- 미해결실전 리액트 프로그래밍
react typescript 환경에서 커스텀 훅을 만들어서 사용하려고 하는데 This expression is not callable 에러가 나타납니다.
안녕하세요. 강의 보고 useState, useEffect 를 활용해보고 싶어서 공공데이터 포털에서 제공해주는 openapi 로 커스텀 훅을 만들어 봤습니다. typescript + webstorm 환경에서 작업중인데요 TS2349: This expression is not callable. No constituent of type 'void | coronaApiPros[]' is callable. import useDailyCorona: void | coronaApiPros[] App.tsx 6번 라인의 useDailyCorona(); 코드에서 이런 에러가 나타납니다. 구글링을 계속 해보는데 원하는 답을 찾을수가 없어서 질문드립니다..ㅠㅠ App.tsx 파일과 커스텀훅 파일인 useDailCorona.tsx 파일을 첨부합니다. ----------- App.tsx --------- import './App.css'; import React from 'react'; import useDailyCorona from './hooks/useDailyCorona'; function App() { const items = useDailyCorona(); return ( <ul> {items?.map((item, index) => ( <li key={index}>createDate: {item.createDt}</li> ))} </ul> ); } export default App; ----------- useDailyCorona.tsx ------------- import {useEffect, useState} from "react"; import {getCorona} from "../corona"; interface coronaApiPros { createDt: string // 조회 시작 시간 deathCnt: number // 사망자 수 defCnt: number // 확진자 수 gubun: string // 시도명(한글) gubunCn: string // 시도명(중국어) gubunEn: string // 시도명(영어) incDec: number // 전일대비 증감 수 isolClearCnt: number // 격리 해제 수 isolIngCnt: number // 격리중 환자 수 localOccCnt: number // 지역 발생 수 overFlowCnt: number // 해외 유입 수 qurRate: string // 10만명당 발생률 seq: number // 게시글번호 (국내 시도별 발생 현황 고유값) stdDay: string // 기준 일 시 updateDt: string // 수정 일시 분초 } function useDailyCorona():void|coronaApiPros[] { const [items, setItems] = useState(); const coronaItems = getCorona(); useEffect(() => { coronaItems.then(response => { setItems(response); }); }, []); return items; } export default useDailyCorona();
- 미해결실전 리액트 프로그래밍
data.json 파일을 임포트했는데 chunk.js 파일이 생성된 이유가 궁금합니다.
chunk 네이밍이 어디서 온것이고 json도 아니고 js로 파일이 생성되는 이유가 궁금합니다.
- 미해결실전 리액트 프로그래밍
컴포넌트
강의 3분쯤에 설명하신 부분 중에 const element = <Title title="안녕하세요" color="blue" />; 부분이 바벨로 컴파일되어 React.createElement 함수를 호출하여 consoleLogResult 객체가 반환되고, 이 객체의 type에 입력된 Title 함수 컴포넌트를 실행하여 최종적으로 Title 컴포넌트가 리액트 요소(<p type={{ color }}>{title></p)를 반환하는 것이 맞나요?? 아니면 <Title ,,, />가 React.createElement를 실행하지 않고 바로 Title 컴포넌트를 실행하게 되나요??
- 미해결실전 리액트 프로그래밍
JSX 문법
안녕하세요! 혹시 JSX 문법에서 작성하는 어트리뷰트들은 어떤 형식으로 작성하는 건가요?? onclick 같은 이벤트 어트리뷰트들은 카멜 케이스로 작성하는데 data-id 와 같은 어트리뷰트들은 케밥 케이스로 작성해서 조금 헷갈리네요,,
- 미해결실전 리액트 프로그래밍
리액트 요소 관련 질문
3분쯤에 모든 리액트 요소의 type 속성값이 문자열이어야 실제 돔으로 만들어진다고 하셨는데, Title 컴포넌트를 렌더링을 하여 생성된 객체의 type 속성 값이 p로 되는 이유가 따로 있나요? 혹시 다른 컴포넌트들도 렌더링이 되어 생성된 리액트 요소의 값이 type 속성값이 p로 반영 되는 것인가요? 그리고 6분 쯤 두 번째 가상돔에서 type 속성값이 Title인 리액트 요소도 다시 문자열 값으로 변경된 후에 이전 가상 돔과 비교하는 것인가요?
- 미해결실전 리액트 프로그래밍
상태값과 속성값
강의 잘 보고 있습니다!! React.memo 같은 경우 인수로 전달한 컴포넌트의 상태값이 변경될 때만 렌더링이 되는게 맞나요? 아니면 props의 값 변경도 포함되나요? 강의에서는 속성값의 변경이 있을 때만 렌더링된다고 하셨는데 혹시 여기서 말하는 속성값은 해당 컴포넌트의 상태값만을 얘기하시는 게 맞나요>? props가 상위 컴포넌트의 상태값으로 자식 컴포넌트의 상태값과는 별개의 개념이라고 생각하면 될까요?
- 미해결실전 리액트 프로그래밍
컴포넌트 호출
컴포넌트경우 함수로 정의하고, 강의에서 처럼 <Counter />이 함수(컴포넌트)를 호출문같은 역할을 하는 건가요?? 그리고 <Title title={count} /> 에서 title이 자식 컴포넌트props의 키로 등록되는 건가요?? 속성값은 모두 저런 형식으로 정의하나요??
- 미해결실전 리액트 프로그래밍
map 메서드의 반환값
컴포넌트 return 부분에서 todoList.map 메서드는 map 고차함수로 반환값이 배열이지 않나요? 그렇게 되면 ul 태그 안에는 li 태그를 요소로 갖는 배열이 들어가는 건가요?
- 미해결실전 리액트 프로그래밍
바이너리 파일
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. .bin에 있는 바이너리 파일이란 어떤 것인가요??
- 해결됨실전 리액트 프로그래밍
ref에 함수를 입력하는 부분에서 질문이 있습니다.
<input ref={ref => ref && setText(INITIAL_TEXT)}> 여기에서 화살표 함수를 사용해서 input이 생성될 때는 input이 함수의 매개변수에 담기게 되고 사라질 때는 null값이 넘어와서 null 값일때는 setText가 실행되지 않는다는 것은 이해했습니다. 그런데 그러면 저 함수에서 리턴값은 어떻게 되는건가요? ref = {}에서 ref에는 실질적으로 값이 담기는 것은 아닌가요? import React, { useState } from 'react'; export default function App() { const [text, setText] = useState(INITIAL_TEXT); const [showText, setShowText] = useState(true); return ( <div> {showText && ( <input type="text" ref={(ref) => { ref && setText(INITIAL_TEXT); console.log(ref); }} value={text} onChange={(e) => setText(e.target.value)} /> )} <button onClick={() => setShowText(!showText)}>보이기/가리기</button> </div> ); } const INITIAL_TEXT = '안녕하세요'; 또한 위의 코드에서 console을 찍어봤을 때 input 입력창에 키보드 입력을 하게 되면 콘솔이 두번 찍히게 되는데 이것은 어떤 이유에서 그런걸까요?