48,400원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallback 과 React.memo 의 사용 기준
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 초심자의 입장에서 사실 저러한 기능을 보면 그냥 처음에 만들때는 useCallback, React.memo 를 다 써보고 나중에 문제 생기면 그때 바꿔쓰면 되지 않나? 라는 생각이 듭니다.마치 평소에는 const 로 다 만들고, 해보다가 let 으로 변경이 필요하다 싶으면 let 으로 바꾸는 것처럼요.이걸 어떤 기준을 잡고 사용해야 할까요? 정확한 기준이 있는지도 궁금합니다. 렌더링 되는데 걸리는 시간이 몇 초 이상일시 변경한다거나 하는 기준이 있을까요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useRef() 사용하고 console.log(state)를 찍어보니 빈객체가 콘솔에 찍힙니다..!
안녕하세요!강의 듣고 복습하면서 콘솔을 찍어 봤는데빈객체가 콘솔에 찍힙니다..이거 안넘어가게 하려는 방법이 있나요...?위와 같이 콘솔이 찍힙니다..ㅠ나머지는 강의 들은 내용과 같이 잘 작동합니다!감사합니다!
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallback 적용 안되는 오류
안녕하세요, 수업 잘 듣고 있습니다:)다름이 아니라, useCallback을 onEdit 함수와 onRemove함수에 적용했는데 계속해서 모든 일기 리스트가 리렌더되는 현상이 발생하여 이유를 묻고 싶습니다 ㅠ 이 코드에 문제점이 있을까요? // 배열 삭제 const onRemove = useCallback((targetId) => { setData((data) => data.filter((it) => it.id !== targetId) ); }, []); // 배열 수정 const onEdit = useCallback((targetId, editContent) => { setData((data) => { return data.map((it) => { if (it.id === targetId) { it.content = editContent; } return it; }); }); }, []);
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
중첩 Context
강사님 왜 중첩 Context를 사용하는지 이해가 되지 않아 https://www.inflearn.com/questions/800739/context%EC%97%90-%EA%B4%80%ED%95%B4%EC%84%9C-%EC%A7%88%EB%AC%B8%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4질문에 답변하신 것을 보았습니다제가 이해한 바로는 상위 컴포넌트의 state가 변경되면 Context는 리렌더링 되고 리렌더링 되면서 하위 Context로 전달하려는 객체가 재생성되기 때문에 기존과 다른 prop이 왔다고 인식하여 React.memo를 활용하여 리렌더링을 방지하려 했던 것이 의미 없게 된다 따라서 객체에 useMemo를 활용하여 state가 변경되었을 때 재생성되지 않도록 방지하는 것으로 이해하였습니다. 제가 이해한게 맞나요? 그렇다면 중첩 Context가 아닌 useMemo를 활용하면 해결되는 문제 아닌가요? useMemo를 활용하여 state가 변경되어 컴포넌트가 리렌더링될때 재생성되는거만 방지해줄 수 있지 않나요?
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React Hook useMemo has a missing dependency
강사님 강사님의 강의를 들으며 진행하고 있는데 아래와 같은 경고 메시지가 계속 나와 경고 메시지를 받지 않으려면 어떻게 코드를 작성해야 하는지 궁금해서 질문 드립니다!아래는 제가 작성한 코드입니다https://codesandbox.io/s/youthful-glitter-6thymf?file=/src/App.js:0-2523Line 54:8: React Hook useMemo has a missing dependency: 'data'. Either include it or remove the dependency array react-hooks/exhaustive-deps Line 58:51: React Hook useMemo has missing dependencies: 'addDiary', 'deleteDiary', and 'editDiary'. Either include them or remove the dependency array react-hooks/exhaustive-deps
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useState() 데이터 추가 성능 질문
안녕하세요! React에서 useState()를 사용하여 배열과 같은 데이터 구조에서 자료를 추가하는 경우,다른 언어같은 경우 원소 하나만 추가하는 시간복잡도가 O(1)으로 수행하는 함수가 있는데(C++의 append 혹은 push) React에서는 항상 [newItem,...data] 이런 식으로 원소 하나 추가할 때마다, 배열의 값을 모두 새로 만드는데, 데이터가 많아질 경우 시간복잡도가 O(n)으로 비효율적일 것 같습니다. 그래서 React에는 push()같은 방식으로 데이터를 추가하는 방법이 있나요? 없다면 없는 이유가 무엇인가요??
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리렌더링 동작에 따른 상태의 변화
안녕하세요? 질문 드립니다. state가 바뀔 때 마다 해당 컴포넌트에 대해 리렌더링이 발생한다고 하셨습니다. 리렌더링은 해당 컴포넌트를 반환하는 함수의 재호출로 인한 결과일텐데 어떻게 상태값이 다시 새로 초기화되지 않고 변화한 값을 들고 있는지 궁금합니다. 임의의 state에 대해 useState()로 인한 초기화가 매번 새롭게 호출될텐데 해당 state는 초기화값을 계속 할당받는 것이 아닌 변화한 값을 인식하고 있습니다. 내부의 원리가 궁금합니다.
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
diaryList 를 컴포넌트 porps으로 안내리고 map을 돌린 뒤 값을 prop 하는 이유가 궁금합니다.
<div> {diaryList.map(it => { <DiaryItem key={it.id} {...it} /> })} </div>강의중 궁금한부분이 있습니다. 반복문 map 돌려서 컴포넌트에 값을 주고 있는데요. 왜 컴포넌트에 통째로 diaryList를 props로 내리지 않는지 궁금합니다. 만약 내린다면<DiaryItem itemList={diaryList} />위처럼 내려서 해당 컴포넌트에서 map을 돌리지 않는 이유가 궁금합니다!
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
[강의 23:38] 비동기 처리 중 console.log() 호출 순서
안녕하세요 정환님, 인프런에 많은 강의를 들어보며 이렇게 만족스러운 강의가 있었나 싶을만큼 좋은 강의 제공해주셔서 감사드립니다. 비동기 처리 과정에 대해 질문드립니다.비동기 처리 결과를 다시 인수로 받아 연이어 사용하는 callback hell을 보여주시면서 실행 순서를 말씀해주셨습니다. 이때 call stack에 쌓이는 function context는 taskA()가 앞서지만 함수의 구현부가 비동기 함수로만 이루어져 WebAPIs에서 대기를 하게되고 이동안 taskA()의 다음 순서인 console.log()가 호출되는걸로 이해하면 될까요? 다시한번 좋은 강의 감사드립니다.
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onRemove 원리 질문
안녕하세요! useReduce를 사용하고 최적화를 한 단계에서 onReduce() 함수가 어떻게 최적화 되는지 원리에 의문이 생겨 질문 드립니다. const [data, dispatch] = useReducer(reducer, []); //reducer 생략 case "REMOVE": return state.filter((it) => it.id !== action.targetId); 해당 코드에서 REMOVE를 실행하면 data 배열이 새로운 배열로 업데이트가 됨 -> 2. 그러면 data를 prop으로 받고 있는 DiaryList.js에서 이를 감지하고 처음부터 끝까지 DiaryItem.js를 다시 생성함. ->3. 그런데 DiaryItem은 React.memo로 prop를 비교하는데, 얕은 비교를 하기에 data에 새로 생성된 배열과는 주소가 달라 새로운 컴포넌트를 다시 생성. 이 되어야 하지 않을까요? 혹시 저의 논리에서 어디 부분이 잘못되었는지 모르겠어서 질문합니다... ㅠ
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
컴포넌트 부모 태그
안녕하세요! 좋은 수업 잘 듣고 있습니다 :)props로 컴포넌트를 받는 Container 컴포넌트에 대해 질문이 있습니다!JSX 규칙 중에 모든 컴포넌트는 부모 태그를 가지고 있어야 한다고 말씀해주셨는데 아래 코드처럼 Container는 부모 태그가 없이도 잘 동작하기에 이유가 무엇인지 궁금합니다!function App() { const counterprops = { a : 1, b : 2, c : 3, d : 4, initialVaule : 5, }; return ( // HTML을 반환 <Container> <div className="App"> <Counter {...counterprops}/> </div> </Container> ); }또한 function App() { const counterprops = { a : 1, b : 2, c : 3, d : 4, initialVaule : 5, }; return ( // HTML을 반환 <div className="App"> <Container> <Counter {...counterprops}/> </Container> </div> ); }이렇게 코드를 짜면 동작하지 않더라구요! 왜 첫번째 코드는 동작하고, 두번째 코드는 동작하지 않는지 궁금합니다!감사합니다.
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
index.js React 17, React 18 버전 질문
안녕하세요. 강의를 계속 듣다가 App.js가 자꾸 두번 실행되어 index.js를 제외한 모든 코드를 강사님의 sandbox 코드를 복붙하였는데 계속 코드가 두번 실행이 되었습니다.그리하여 이렇게 dataId가 20부터 실행되는 문제가 발생하였는데요, 그래서 index.js를 강사님 버전(React 17)로 바꾸었더니 이 문제가 해결되었습니다. React18버전으로 하면 이런 문제가 발생하는 이유가 무엇인가요?? 다음은 저의 index.js 코드입니다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; const rootNode = document.getElementById("root"); ReactDOM.createRoot(rootNode).render( <React.StrictMode> <App /> </React.StrictMode> ); reportWebVitals();
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onDelete관련
안녕하세요 onDelete관련 질문 드립니다. <DiaryList onDelete={onDelete} diaryList={data} />해당 부분에서 onDelete와 {onDelete} 의 역할이 다른 것인지 궁금합니다 두번째 onDelete는 앞서 작성한 함수를 전달한 것으로 이해했는데 앞에 있는 onDelete는 js의 onClick onFocus 처럼 이벤트핸들러인지 단순 설정한 props명 인 것인지 궁금합니다
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
setState관련
20분경 나온 setState관련해서 미리 코드를 짜보았었는데용 <div className="DiaryEditor"> <h2>오늘의 일기</h2> <div> <input value={state.author} onChange={(e) => { setState(e.target.value); }} /> </div> <div> <textarea value={state.content} onChange={(e) => { setState(e.target.value); }} placeholder="내용을 입력해주세요" /> </div> </div> 이렇게 짜도 정상적으로 작동이 되는데 더 깊이 들어가서 문제가 생기는 경우일까요??
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다.상태랑 로직 관리를 useReducer, React Context API, React Query, redux, graphql 정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
최적화 useMemo 적용하고 나서, 삭제 를 하였을 경우 나타나는 에러입니다.
기존에 잘 동작되었던 삭제 기능이었는데 useMemo 를 적용하고 나서 삭제버튼을 누르니 삭제가 되지 않고 에러가 뜹니다. ㅠ 개발자도구에서 위 소스가 잘못되었다고 하는것같은데 어느곳을 수정해야하는지 모르겠습니다. ㅠ똑같이 친거같은데 ... 이외에도 혹시 리액트 적용해서 에러가 났을경우, 이 에러만 가지고 어느 부분을 수정해야할지 너무 막막한데, 구글링해도 답도 안나오구요 . 어떤식으로 해결해야좋은지 팁도 부탁드립니다.
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onChange 작동 원리
좋은 강의 감사합니다.페이지 구현 - 홈 )/) 강의 중 23분에 onchange 설명해주신 것 관련해서 질문드립니다.DiaryList.js / 27번째 줄에 onChange로 setSortType을 전달했기 때문에 ControllMenu에서 onChange(e.target.value)의 값이 setSortType을 호출해서 sortType의 상태값이 변화하는 것으로 이해했습니다.즉 이렇게, onChange{setSortType("변화된 값")} 작동한걸로 이해했는데요. 27번째 줄에 onChange = {setSortType} 으로만 작성을 했는데 e.target.value라는 값이 전달된 것이 이해가 잘 안되어서 질문드립니다.만일 setSortType처럼 상태값을 받는 함수를 담고 있는 변수가 아닌const test = (a,b) => { console.log(a,b);}와 같은 매개변수를 2개를 받는 함수를 onchange로 호출한다고 하면 어떻게 넣을 수 있나요?
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
비동기 방식에서 콜백함수 사용 이유
강의 10분 경 비동기 방식에서 코드 실행 결과를 확인하기 위해 콜백함수를 사용해야 한다고 하셨는데, 아래와 같이 예시를 들어주신 콜백함수를 사용하는 코드와 그렇지 않는 코드의 다른 점이 무엇인지 궁금합니다. 두 코드의 결과는 똑같이 -1 -> 12 -> 7 순서로 콘솔창에 출력됩니다.첫 번째는 예시를 들어주신 코드이고, 두 번째는 왜 콜백함수를 써서 결과를 봐야하지??라는 궁금증으로 수정해본 코드입니다. function taskA(a, b, cb) { setTimeout(() => { const res = a + b; cb(res); }, 3000); } function taskB(a, b, cb) { setTimeout(() => { const res = a * b; cb(res); }, 2000); } function taskC(a, b, cb) { setTimeout(() => { const res = a - b; cb(res); }, 1000); } taskA(3, 4, (res) => { console.log(res); }); taskB(3, 4, (res) => { console.log(res); }); taskC(3, 4, (res) => { console.log(res); }); taskA1(); // 이후 실행 console.log("코드 끝"); // taskA1 를 기다리지 않고 // 먼저 실행function taskA(a, b) { setTimeout(() => { const res = a + b; console.log(res); }, 3000); } function taskB(a, b) { setTimeout(() => { const res = a * b; console.log(res); }, 2000); } function taskC(a, b) { setTimeout(() => { const res = a - b; console.log(res); }, 1000); } taskA(3, 4); taskB(3, 4); taskC(3, 4);
- 해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
onEdit setData 없어도 되는건가요?
안녕하세요 강사님!강의를 따라가는 도중 제가 onEdit 함수에 setData를 하지 않았다는 사실을 알게 되었습니다.하지만 setData를 해주지 않고 data에 map 함수로 변경 해주는 동작만 해도 정상적으로 수행되는데 왜 그런지 알 수 있을까요?useCallback 해주기 전에도 정상 동작한 이유도 궁금하고 강사님께서 알려주신 대로 data에는 컴포넌트가 마운트 됐을때 data 상태인 빈 배열이 들어가 있어야 하는 것이 아닌가요?아래는 제가 짠 onEdit 함수 입니다const editDiary = useCallback((targetId, editedContent) => { data.map((e) => e.id === targetId ? {...e, content: editedContent} : e ) }, [])
- 미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
일기 추가 시 DiaryEditor 리렌더링 질문
안녕하세요 강사님강의를 듣고 저는 React.memo로 DiaryEditor를 고차 컴포넌트를 만들어 동일한 prop을 받았을 때 리렌더링 되지 않도록 해주고 onCreate 함수를 useCallback을 통해 메모리제이션 하여 같은 함수를 DiaryEditor에 prop으로 전달한다고 이해했습니다그래서 제가 생각했을 땐 일기를 새로 저장하거나, 삭제, 수정하는 작업 중에는 DiaryEditor가 아예 리렌더링이 되지 않아야 된다고 생각했는데 강의 14분 17초에서도 그렇고 제가 직접 짠 코드에서도 일기를 새로 저장할 때 리렌더링이 되는데 제가 이해한게 잘못 된건가 싶어 질문 드립니다!