inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

Editor 컴포넌트는 리렌더링되는 것은 맞나요?

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

강의내용에 보면 todos가 변경될 때 Editor는 변경이 않되야하는 것 같은데 리렌터링이 됩니다. 소스는 같은데 머가문제인지 알 수있을까요? <Editor.jsx> const Editor = () => { const { onCreate } = useContext(TodoDispatchContext); const [content, setContent] = useState(""); const contentRef = useRef(); const onChangeInput = (e) => { setContent(e.target.value); }; const onKeyDown = (e) => { if (e.keyCode === 13) { onSubmit(); } }; const onSubmit = () => { if (content === "") { contentRef.current.focus(); return; } onCreate(content); setContent(""); }; return ( <div className="Editor"> <input ref={contentRef} value={content} onKeyDown={onKeyDown} onChange={onChangeInput} placeholder="새로운 Todo..." /> <button onClick={onSubmit}>추가</button> </div> ); }; export default Editor; <App.jsx> import "./App.css"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; import { useState, useRef, useReducer, useMemo, useCallback, createContext, } from "react"; const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Date().toLocaleDateString(), }, { id: 1, isDone: false, content: "빨래하기기", date: new Date().toLocaleDateString(), }, { id: 2, isDone: false, content: "청소하기", date: new Date().toLocaleDateString(), }, ]; const reducer = (state, action) => { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((todo) => todo.id === action.data.id ? { ...todo, isDone: !todo.isDone } : todo ); case "DELETE": return state.filter((todo) => todo.id !== action.data.id); default: return state; } }; export const TodoStateContext = createContext(); export const TodoDispatchContext = createContext(); function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", data: { id: targetId } }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", data: { id: targetId } }); }, []); const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); return ( <div className="App"> <Header /> <TodoStateContext.Provider value={{ todos }}> <TodoDispatchContext.Provider value={memoizedDispatch}> <Editor /> <List /> </TodoDispatchContext.Provider> </TodoStateContext.Provider> </div> ); } export default App;

  • javascript
  • react
  • node.js
Park Ju Yeong 댓글 2 좋아요 0 조회수 188

소스코드관련해서

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

매강좌마다 깃허브 링크가있던데요 매강마다 소스코드를 일일히 다운받아야하나요??? 아니면 한번에 다운받아도되는걸 제가 착각하고있는건가요??? 강의가 진행되어질수록 그만큼 코드변경된흐름을 깃허브 트리로 펼쳐놓으신것같은데.... 하나만받아도되는건지 매강마다 깃허브가서 소스코드를 매강마다 다운받아야하는건지 궁금합니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
hdr.ecssh 댓글 1 좋아요 0 조회수 131

ch6번 첨부파일 질문있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

문제상황: ch6 마지막 파일 다운 받은 후 npm i react react-dom 하고 npm start 했습니다. product와 todo를 누르면 아래와 같은 상황이 나옵니다. 혹시 첨부 파일이 잘못된거 아닐까요? ERROR Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') at ListComponent

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 2 좋아요 0 조회수 97

제발 코드샌드박스 링크 좀 달아주세요....

미해결

실무 중심! FE 입문자를 위한 React

제목 그대로입니다. 코드샌드박스 링크좀 어딘가에 달아주시든지, 자료파일에 좀 첨부해주시든지, 어떻게 좀 해주세요. 화면 스톱 해놓고 일일이 주소창 쳐서 들어가고 있어요. 너무 불편해요! 질문답변 게시판에 링크 달아놓은거 없는지 검색도 해봤는데 전혀 엉뚱한 대답만 있는 것 같고..

  • react
  • redux
  • node.js
  • sass
  • swr
kimhi 댓글 2 좋아요 2 조회수 548

강사님 레포지토리에서 코드 복사 시 master 브랜치 말고 react18 브랜치꺼 복붙하세요ㅠㅠ

미해결

웹 게임을 만들며 배우는 React

master 브랜치가 더 최신 수정일이라서 master꺼 복붙해서 쓰다가 계속 createRoot 관련 에러가 나서 30분정도 헤매었네요.. 확인해보니 master 내 코드 일부가 react 18로 변경이 안되어서 그런거 였네요.. (사용X) 리액트 16버전 (master 브랜치에서 복사 시, createRoot 사용 시 에러남) <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> (이걸로) 리액트 18버전 (react18 브랜치에서 복사 시) <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

  • react
해도디 댓글 1 좋아요 0 조회수 122

Router.use 두번째 파라미터 ImageRouter : undefined 전달 오류

미해결

이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)

Router.use() requires a middleware function but got a undefined export require 경로 확인 잘 했는데 왜 발생할까요...?

  • react
  • node.js
  • aws
  • mongodb
  • express
  • lambda
박진형 댓글 2 좋아요 0 조회수 144

[5-9]이미지 기능구현하기(2) 이미지를 추가하면 너무 느리게 뜹니다.

미해결

아바타 커뮤니티앱 만들기 (React Native Expo)

안녕하세요! 선생님 글쓰기 누르고, 제목, 내용 밑에 카메라 모양 눌러서 사진을 추가하면 사진이 매우 느리게 뜹니다... 혹시 이건 왜 그런건가요??

  • javascript
  • react
  • react-native
  • typescript
  • react-query
ksw 댓글 2 좋아요 0 조회수 148

로그인 성공과 실패처리 강의 중에 궁금한점이 있어 질문드립니다.(추가질문)

미해결

코드로 배우는 React 19 with 스프링부트 API서버

db 포스트맨: 에러상황: 포스트맨으로 db에 있는 email과 패스워드 입력해도 로그인이 안됩니다. 참고로 db에 있는 이메일 : user9@aaa.com 직접 db에서 수정하고 저장했습니다. 그리고 user8@aaa.com로 해도 안됩니다.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 2 좋아요 0 조회수 110

suspense관련 질문 있습니다! 섹션6 5.2풀 라우트 캐시2강의

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요! 강의 잘 듣고 있습니다! suspense태그 관련 질문이 있습니다! 5.2 풀 라우트 캐시2 강의에서 저희가 useSearchParams() 훅이 빌드타임에서 실행되는 오류를 없애기 위해 <SearchBar/ > 컴포넌트를 suspense로 감싸잖아요 이때 강의 4분45초 쯤에서 사전 suspense를 사용해서 이제 사전 렌더링 과정에서 완전히 배제한다고 하셨는데, 그러면 페이지를 만들때 suspense로 감싼 컴포넌트는 nextjs app router방식이 아니라 csr방식으로 구현이 되는건가요 나머지 컴포넌트들만 approuter의 사전 렌더링 방식으로 구현이 되는건가요?? 제가 정리했을땐 동적 페이지도 정적 페이지도 사전렌더링의 시점은 다르지만 (요청할때, 빌드할때) 사전렌더링이라는 기능은 nextjs에서 기본으로 작동한다고 알고 있습니다! 그래서 사전렌더링에서 완전 배제된다는 부분이 헷갈려서 질문 남깁니다!

  • react
  • typescript
  • next.js
JIN LEE 댓글 3 좋아요 0 조회수 190

34강 인증 체크에서 element 사용 때문에 에러나시는 분들 이렇게 하심 됩니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

component 사용 시 에러 발생 function App() { return ( <Router> <div> <Routes> <Route path="/" element={Auth(LandingPage, null)} /> <Route path="/login" element={Auth(LoginPage, false)} /> <Route path="/register" element={Auth(RegisterPage, false)} /> */} </Routes> </div> </Router> ); } element 사용 시 아래처럼 진행하심 잘됩니다. (element 안에는 함수가 못들어간다하네요) function App() { const AuthLandingPage = Auth(LandingPage, null); const AuthLoginPage = Auth(LoginPage, false); const AuthRegisterPage = Auth(RegisterPage, false); return ( <Router> <div> <Routes> <Route exact path="/" element={<AuthLandingPage />} /> <Route exact path="/login" element={<AuthLoginPage />} /> <Route exact path="/register" element={<AuthRegisterPage />} /> </Routes> </div> </Router> ) }

  • react
  • node.js
해도디 댓글 1 좋아요 0 조회수 149

vercel 빌드 후 에러가 나옵니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

vercel 빌드를 했는데, 이렇게 에러 메시지가 나오는데 뭐가 문제인지 찾지 못했습니다. vercel 페이지에서도 빌드로그를 보면 아래와같이 나오는데요. npm run build 했을때 정상적으로 노출되고, 오류 메시지가 없어서 정상배포될 줄알았는데 안되네요.ㅠ x Build failed in 181ms 18:15:46.529 error during build: 18:15:46.530 Could not resolve "./pages/NotFound" from "src/App.jsx" 18:15:46.530 file: /vercel/path0/src/App.jsx 18:15:46.530 at getRollupError (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:397:41) 18:15:46.530 at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:393:42) 18:15:46.530 at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21111:24) 18:15:46.530 at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21071:26 18:15:46.544 Error: Command "npm run build" exited with 1

  • javascript
  • react
  • node.js
Babeloper 댓글 2 좋아요 1 조회수 414

App.js > QuestionBox > answers ={answers[step]}, QuestionBox.js > answer

미해결

실무 중심! FE 입문자를 위한 React

App.js > QuestionBox > answers ={answers[step]}, QuestionBox.js > answer 왜 App.js에서 prop에 answers라고 쓰고 QuestionBox.js 에서는 answer로 받는거죠?

  • react
  • redux
  • node.js
  • sass
  • swr
디오 댓글 0 좋아요 0 조회수 149

컴포넌트 단위 에러 처리는 이전 처럼 에러 바운더리를 래핑하면 되나요?

해결됨

한 입 크기로 잘라먹는 Next.js

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • react
  • typescript
  • next.js
트릴 댓글 2 좋아요 0 조회수 272

DTO와 인증 서비스 강의 질문있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

1.DTO와 인증 서비스 13분 38초 화면이 [username user9@aaa.com ,password 1111] postman에서 회원가입하는 화면인건가요? 2.DTO와 인증 서비스 17분 10초 postman 화면도 있는데 이거는 로그인 화면인건가요? 3. 제가 포스트맨에서 username user10@aaa.com ,password 1111으로 넣고 send를 누르면 맨 위 사진과 같이 에러가 나옵니다. 참고로 db 테이블에 username user9@aaa.com ,password 1111 내용이 있습니다. 포스트맨 { "timestamp": "2025-03-02T20:26:21.086+00:00", "status": 404, "error": "Not Found", "trace": "org.springframework.web.servlet.resource.NoResourceFoundException: No static resource api/member/login.\r\n\tat org.springframework.web.servlet.resource.ResourceHttpRequestHandler.handleRequest(ResourceHttpRequestHandler.java:586)\r\n\tat org.springframework.web.servlet.mvc.HttpRequestHandlerAdapter.handle(HttpRequestHandlerAdapter.java:52)\r\n\tat org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1089)\r\n\tat org.springframework.web.servlet.DispatcherServlet.doService spring boot 실행시 아래와 같이 나옵니다. Principal이 username이 user9@aaa.com로 안나옴. [Principal=anonymousUser, Credentials=[PROTECTED], Authenticated=true, Details=WebAuthenticationDetails [RemoteIpAddress=0:0:0:0:0:0:0:1, SessionId=null], Granted Authorities=[ROLE_ANONYMOUS]] 코드 첨부합니다. https://drive.google.com/file/d/1VtPVj_uRjPC7fYG3gRCeuFKcs2s4wPZm/view?usp=drive_link

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 1 좋아요 0 조회수 140

params부분 에러

해결됨

한 입 크기로 잘라먹는 Next.js

fetch 부분에서 다음과 같이 작성하였는데 params.id부분에서 id 부분에 Property 'id' does not exist on type 'Promise<{ id: string | string[]; }>'.ts(2339) 이러한 에러가 발생합니다. const result = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${params.id}` );

  • react
  • typescript
  • next.js
손성오 댓글 3 좋아요 0 조회수 430

캐싱 옵션이 적용되질않아요.

미해결

한 입 크기로 잘라먹는 Next.js

어떠한 옵션을 적용해도 콘솔과 같은데 뭐가 잘못되었을까요? 새로고침이나, 로고를 눌러서 인덱스 파일에 가도 똑같은 로그만 나타납니다.

  • react
  • typescript
  • next.js
트릴 댓글 3 좋아요 0 조회수 224

4.2 React 렌더링 과정 에서 왜 컴포넌트가 두 번씩 호출될까요?

미해결

실무 중심! FE 입문자를 위한 React

/*FunctionalComponent.jsx파일*/ import {useEffect,useState} from 'react'; function FunctionalComponent() { console.log('Function Beginning'); const [value, setValue] = useState(0); useEffect(() => { console.log('Function useEffect[]'); return () => { console.log('Function useEffect return[]'); } },[]); useEffect(() => { console.log('Function useEffect[value]'); return () => { console.log('Function useEffect return[value]'); } },[value]); console.log('Function End'); return ( <div> <h1>!FunctionalComponent</h1> <h1>value: {value}</h1> <button onClick={() => { setValue((state) => state + 1) }} > Increase value </button> </div> ); } export default FunctionalComponent /*App.jsx파일*/ import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' import axios from 'axios'; import FunctionalComponent from './practice/FunctionalComponent' function App() { return ( <FunctionalComponent /> ) } export default App

  • react
  • redux
  • node.js
  • sass
  • swr
최상협 댓글 1 좋아요 0 조회수 197

react-beatiful-dnd에서 문제가 발생합니다.

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 기능상에 문제가 있는건 아니지만, 계속해서 아래의 에러가 발생합니다. 사용하고 있는 버전의 문제일까요? { "name": "react-todo-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.6.3", "@testing-library/react": "16.2.0", "@testing-library/user-event": "13.5.0", "react": "^19.0.0", "react-beautiful-dnd": "13.1.1", "react-dom": "^19.0.0", "react-scripts": "5.0.1", "web-vitals": "2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "autoprefixer": "10.4.20", "postcss": "8.5.3", "tailwindcss": "3.4.17" } } Lists.js import React from 'react'; import List from './List.js' import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; const Lists = React.memo(({todoData, setTodoData}) => { // console.log('Lists Component') const handleEnd = (result) => { if(!result.destination) return; const newTodoData = Array.from(todoData); const [reorderedItem] = newTodoData.splice(result.source.index, 1); newTodoData.splice(result.destination.index, 0, reorderedItem); setTodoData(newTodoData); } return <div> <DragDropContext onDragEnd={handleEnd}> <Droppable droppableId='todo'> {(provided, snapshot) => ( <div ref={provided.innerRef} {...provided.droppableProps} > {(todoData ?? []).map((data, index) => ( <Draggable key={data.id} draggableId={data.id.toString()} index={index} > {(provided, snapshot) => ( <List key={data.id} id={data.id} title={data.title} completed={data.completed} provided={provided} snapshot={snapshot} todoData={todoData} setTodoData={setTodoData} /> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div>; }) export default Lists; App.js import React, {useState} from 'react' import "./App.css" import Lists from './components/Lists' import Form from './components/Form' export default function App() { // console.log('App Component') const [todoData, setTodoData] = useState([ { id: 1, title: '운동하기', completed: false, }, { id: 2, title: '공부하기', completed: false, } ]) const [value, setValue] = useState("") return ( <div className="flex items-center justify-center w-screen h-screen bg-blue-100" > <div className='full p-6 m-4 bg-white rounded shadow md:w-3/4 md:max-w-lg lg:w-3/4 lg:max-w-lg'> <div className="flex justify-between mb-3"> <h1>할 일 목록</h1> </div> <Lists todoData={todoData} setTodoData={setTodoData} /> <Form value={value} setValue={setValue} setTodoData={setTodoData}/> </div> </div> ) }

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
  • react-beatiful-dnd
  • isdropdisabled
고유림 댓글 1 좋아요 0 조회수 126

useEffect 관련 질문드립니다.

미해결

실무 중심! FE 입문자를 위한 React

useEffect의 dependency array에 배열을 넣는 경우 "Maximum update depth exceeded." error가 발생하게 되는데, 이 경우는 어떻게 해야하나요? 예를 들어 아래와 같은 상황이라고 가정하겠습니다. 화면에는 테이블 1개만 존재한다. 데이터는 unknown[] 형태이다. 다른 조건에 의해 데이터의 갯수가 달라지는 경우에만 다시 렌더링한다. 코드로 예시를 들면 아래와 같습니다. const [items, setItems] = useState<unknown[]>([]); useEffect(() => void, [items]) 답변주시면 감사합니다.

  • react
  • redux
  • node.js
  • sass
  • swr
이준영 댓글 0 좋아요 0 조회수 145

Error: Route "/search" used `searchParams.q`. `searchParams` should be awaited before using its properties.

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요 강사님 해당 오류는 최신버전에서 발생하는건가요?! Error: Route "/search" used searchParams.q . searchParams should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at Page (src/app/(with-searchbar)/search/page.tsx:12:32) 10 | return ( 11 | <div> > 12 | Search 페이지 : {searchParams.q} | ^ 13 | <ClientComponent> 14 | <></> 15 | </ClientComponent> import ClientComponent from "@/components/client-component"; export default function Page({ searchParams, }: { searchParams: { q?: string; } }) { return ( <div> Search 페이지 : {searchParams.q} <ClientComponent> <></> </ClientComponent> </div> ) }

  • react
  • typescript
  • next.js
강프로그래머 댓글 2 좋아요 0 조회수 253

인기 태그

인프런 TOP Writers

주간 인기글