- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요, 리액트 학습 중에 궁금한 게 있어서 질문드려요. 기본 path 가 아닌 라우트로 바로 접속을 할때, html을 받으면 라우팅이 이뤄지구 useeffect로 api 요청이 가면서 페이지 렌더링이 이뤄지는건가요?

Lifecycle 사진이 잘 안보입니다. 크게 보여준 사진 필요해요.

뭔가 편집오류인거같네요12초정도에 반복문 사용시 주의사항만 나오고 방복문 사용방법은 안알려줍니다.저야 뭐 대충알아들었는데 초보자분들은 당황스러울듯하네요

--ignore 공백 ./client' ", 에서공백을 해놨는데도 왜 에러가 뜨는지 그 이유를 잘 모르겠습니다

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

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

/*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 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 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.jsimport 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.jsimport 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> ) }

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

Recoil과 비슷해 보이는 Jotai로 혼자 바꿔보고 있는 중입니다 ㅠㅠ 근데 이번 강의 코드는 어떻게 바꿔야 하는지 감이 안 와요....

강의 들으면서 제로초님 RTK GitHub 코드도 보고 있는데요. RTK는 immer가 내부적으로 사용되어 state를 써도 불변성을 자동으로 처리하는 걸로 알고 있습니다. 그런데 https://github.com/ZeroCho/react-nodebird/blob/master/toolkit/front/reducers/user.js에선 리듀서 마다 state를 쓰는 곳이 있고 draft를 쓰는 곳이 있어서 질문합니다!역할은 같지만 단지 코드를 명시적이고 의도를 나타내기 위해 구분해서 쓰는 것이라고 생각되는데 구분해서 쓰는 다른 이유가 있는지 궁금합니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.UserEffect 빈 배열 사용하면 처음 한번만실행된다고 하는데그러면 조건문으로 posts 체크해서 사용해도 되나요?왠지 유저이펙트보다 이프문이 더 가벼울것 같아서질문드립니다

https://github.com/atlassian/react-beautiful-dnd/issues/2672react-beautiful-dnd is now deprecated #2672 Drag and Drop 기능 구현을 위한 다른 방법 설명이 필요합니다.

계속 오류가 발생해서 알아보니까 리액트19 버전쓰시는 분들은 리코일 못쓰실거같아요 대신 jotai 이 라이브러리로 대체해서 사용해보세요 문법도 리코일이랑 비슷하네요  

학습 링크 어디에서 확인할 수 있나요?

Uncaught TypeError: Cannot destructure property 'ReactCurrentDispatcher' of 'react__WEBPACK_IMPORTED_MODULE_0___default(...).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined. at currentRendererSupportsUseSyncExternalStore (index.js:505:1) at useRecoilValueLoadable (index.js:5353:1) at useRecoilValue (index.js:5372:1) at CompletionPage (index.js:6:1) at react-stack-bottom-frame (react-dom-client.development.js:22428:1) at renderWithHooks (react-dom-client.development.js:5757:1) at updateFunctionComponent (react-dom-client.development.js:8018:1) at beginWork (react-dom-client.development.js:9683:1) at runWithFiberInDEV (react-dom-client.development.js:543:1) at performUnitOfWork (react-dom-client.development.js:15042:1) 이거 오류뜨는데 리엑트 recoil 지원 중단되서 안되는건가요? 해결방법이 있나요?

npx init ~~ 를 실행하면 에러가 자꾸 발생해서, 웹사이트를 가보니 다운받는 방식이 아예 바뀐 것 같습니다.

pdf에서 5-1링크 클릭햇는데 codeSandBox 페이지가 없다고 뜹니다. 새로운 링크 없나요??ㅠㅠ

이슈 함수: deleteMemo이슈 흐름: "+" 버튼 클릭, 새로운 메모 아이템(Untitled)생성 → memo 2 삭제 → memo 1 삭제이슈 내용: Untitled 메모 아이템이 있음에도 "메모가 없습니다" 로 처리됨.이유: 삭제 시 배열의 길이가 달라지면서 index 에 영향이가는데 selectedMemoIndex 값은 그에 따라 변하지 않아서단순히 index === selectedMemoIndex 의 조건문으로 만족하지 않음.해결방법: 삭제 시 selectedMemoIndex 에도 새로운 값을 넣어줘야함.저는 아래와 같이 해결했습니다.if (index > selectedMemoIndex) {setSelectedMemoIndex(selectedMemoIndex + 1);} else if (index < selectedMemoIndex) {setSelectedMemoIndex(selectedMemoIndex - 1);} else if (index === selectedMemoIndex) {setSelectedMemoIndex(0);}