묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결실무 중심! FE 입문자를 위한 React
13-1, 13-2 질문
강의에서 나온대로 다 따라 갔는데 아무것도 안됩니다.콘솔창에서는 const [surveyData, setSurvey] = useRecoilState(surveyState).questions; 에서Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) 라는 에러 뜹니다
-
미해결실무 중심! FE 입문자를 위한 React
12-2. Recoil -> Jotai 변환 코드 공유합니다.
Recoil 지원 중단 문제로 강의에 나온 Recoil 관련 내용을 Jotai 라이브러리로 대체했습니다.여러 수강생 분들이 같은 문제를 겪는 듯해서 제가 사용한 코드를 공유합니다.recoil 제거 & jotai 설치npm uninstall recoil npm install jotaiatom.js 변환 코드: jotai 의 atom 에선 key 값이 없습니다.import {atom} from "jotai"; const testState = atom(['a', 'b', 'c', 'd']); export default testState;testWithComma.js: 마찬가지로 키 값이 없으며, 좀 더 단순하게 사용 가능합니다.import {atom} from "jotai"; import testState from "./atom.js"; const testWithComma = atom((get) => { const abcdArr = get(testState) return abcdArr.join(','); }) export default testWithComma;CompletionPage.jsx: useRecoilValue -> useAtomValue 로 변경하시면 됩니다.const testValue = useAtomValue(testWithComma); Jotai 와 Zustand 중 고민하다가 Jotai가 Recoil과 더 유사하다고 하여 우선 Jotai로 학습 진행했습니다. 강의 수강에 참고가 되길 바랍니다.
-
미해결실무 중심! FE 입문자를 위한 React
recoil error 나시는 분들 보세요
리코일 에러 나시는분들 보세요 최근에 강의 시작하셨으면 리액트가 19로 설치되셨을탠데 리코일이 리액트 18까지만 지원하고있습니다. 원활하게 나머지 진행하시기위해서 npm install react@18 react-dom@18 --save으로 react18로 버전 낮춰주시면 나머지 진행 가능하십니다.
-
미해결실무 중심! FE 입문자를 위한 React
어려워요 뭔소리죠 대체
반복문 뭔 소린지 모르겠어요 뭔가 영상이 짤린 느낌
-
미해결실무 중심! FE 입문자를 위한 React
사진이 잘 안보여요.
Lifecycle 사진이 잘 안보입니다. 크게 보여준 사진 필요해요.
-
미해결실무 중심! FE 입문자를 위한 React
반복문 사용법은 안알려주고 주의사항만 알려주시는거군요
뭔가 편집오류인거같네요12초정도에 반복문 사용시 주의사항만 나오고 방복문 사용방법은 안알려줍니다.저야 뭐 대충알아들었는데 초보자분들은 당황스러울듯하네요
-
미해결실무 중심! FE 입문자를 위한 React
hooks recoil불러오는 과정에서 src내부에 있는 파일이 안불러와집니다
-
미해결실무 중심! FE 입문자를 위한 React
제발 코드샌드박스 링크 좀 달아주세요....
제목 그대로입니다.코드샌드박스 링크좀 어딘가에 달아주시든지, 자료파일에 좀 첨부해주시든지,어떻게 좀 해주세요.화면 스톱 해놓고 일일이 주소창 쳐서 들어가고 있어요.너무 불편해요!질문답변 게시판에 링크 달아놓은거 없는지 검색도 해봤는데 전혀 엉뚱한 대답만 있는 것 같고..
-
미해결실무 중심! FE 입문자를 위한 React
App.js > QuestionBox > answers ={answers[step]}, QuestionBox.js > answer
App.js > QuestionBox > answers ={answers[step]}, QuestionBox.js > answer 왜 App.js에서 prop에 answers라고 쓰고 QuestionBox.js 에서는 answer로 받는거죠?
-
미해결실무 중심! FE 입문자를 위한 React
4.2 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
-
미해결실무 중심! FE 입문자를 위한 React
useEffect 관련 질문드립니다.
useEffect의 dependency array에 배열을 넣는 경우 "Maximum update depth exceeded." error가 발생하게 되는데, 이 경우는 어떻게 해야하나요? 예를 들어 아래와 같은 상황이라고 가정하겠습니다.화면에는 테이블 1개만 존재한다.데이터는 unknown[] 형태이다.다른 조건에 의해 데이터의 갯수가 달라지는 경우에만 다시 렌더링한다.코드로 예시를 들면 아래와 같습니다.const [items, setItems] = useState<unknown[]>([]);useEffect(() => void, [items]) 답변주시면 감사합니다.
-
미해결실무 중심! FE 입문자를 위한 React
jotai로 변경했을 때 코드
Recoil과 비슷해 보이는 Jotai로 혼자 바꿔보고 있는 중입니다 ㅠㅠ 근데 이번 강의 코드는 어떻게 바꿔야 하는지 감이 안 와요....
-
미해결실무 중심! FE 입문자를 위한 React
리코일이 업데이트가 안된지 오래됐다고하네요
계속 오류가 발생해서 알아보니까 리액트19 버전쓰시는 분들은 리코일 못쓰실거같아요 대신 jotai 이 라이브러리로 대체해서 사용해보세요 문법도 리코일이랑 비슷하네요
-
미해결실무 중심! FE 입문자를 위한 React
학습 링크
학습 링크 어디에서 확인할 수 있나요?
-
미해결실무 중심! FE 입문자를 위한 React
12-2 질문
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 지원 중단되서 안되는건가요? 해결방법이 있나요?
-
미해결실무 중심! FE 입문자를 위한 React
5-1 학습링크
pdf에서 5-1링크 클릭햇는데 codeSandBox 페이지가 없다고 뜹니다. 새로운 링크 없나요??ㅠㅠ
-
미해결실무 중심! FE 입문자를 위한 React
7-5. 메모 삭제 기능에 문제가 있습니다.
이슈 함수: 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);}
-
미해결실무 중심! FE 입문자를 위한 React
실습링크
실습 링크 들어가니깐 안됩니다.. 새로운 링크 알려주세요
-
미해결실무 중심! FE 입문자를 위한 React
2-6 구구단 배열 넣어서 출력시 질문
강사님께서 map으로 출력하시던데 2-4 반복문 강의처럼 배열로 넣어서 출력을 해보고싶었는데 출력이 세로로만 나오거나 가로로만 한줄로 나오던데 줄바꿈을 어떻게 줘야하는건지 궁금해서 작성해봅니다.
-
미해결실무 중심! FE 입문자를 위한 React
[2-1] 강의링크 메모용
https://codesandbox.io/p/sandbox/2-1-29k09?file=%2Fsrc%2Findex.js%3A9%2C1