inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

Immer 에서 filter, map 사용

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

지난강의에서 useImmer에서 활용한 update함수에서는 push, splice와 같은 현재의 객체를 변환시키는 api를 활용했었습니다. 그래서 immer 가 적용된 상황에서는, 현재 객체를 변환시키는 것만이 답일것이라 생각해서, 오히려 filter api를 써야 코드가 더 간단해지는 상황에서는 useState를 따로 분리해서 써야 고민하고 있었습니다. 그런데 이번 강의에서 useImmerReducer에서 활용하는 것을 보아하니, State가 아니라 Immer 이 적용된 케이스더라도, return으로 새로운 객체를 반환하거나, 직접 객체에 변화를 주거나 하는 방법이 둘다 적용이 되는것으로도 보이는것 같더라구요? case 'deleted':에서도 draft.filter에 return 이 적용되면, immerReducer라도 잘 작동하고, return을 없애고, break로 나오게 하면, 변화가 아무래도 적용이 안되더라구요(당연하겠죠... 원래 객체에 변화를 준것이 아니니) 그래서 immer나 immerReducer를 활용한다는 것은 useState을 확장시키는 느낌인건가요? 직접객체에 변화를 주는것 뿐만아니라, useState에서 했던것처럼 새로운 객체를 만들어 return하는 것 '까지' 가능한건가요? 만약 immer가 적용된 상황에서, 직접 객체를 변환하는 코드와, 새로운 객체를 만들어 return 하는 코드가 하나에 전부 적용되어 있다면 어떻게 작용하나요? 다시 말해, draft.push로 '변경사항이 immer에 반영되고', 동시에return으로 draft.filter한 값을 보내면, 어떻게 작용하며, 어떤 로직이 적용되나요? 감사합니다

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
주병규 댓글 1 좋아요 0 조회수 73

auto import했을때에 Dispatch, SetStateAction

해결됨

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

import type { Dispatch, SetStateAction } from "react"; 저는 강의와 다르게 이렇게 type이 붙어서 나오는데, 에러는 나지 않지만.. 궁금해서 질문 남깁니다 무엇이 다른건가요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
귀한 불도새 댓글 2 좋아요 0 조회수 78

vite 설치에 대해 질문있습니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

안녕하세요 vite를 설치해서 리액트를 잘 사용하다가 최근 vite를 설치하고 npm run dev로 실행을 하니 아래 이미지와 같은 에러가 계속 나더라구요. 찾아보니 버전과 관련이 되어 있는거 같은데 아무리 찾아봐도 해결이 되지 않더라구요. 현재 vite는 사용하지 못하는건가요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
부드러운 족제비 댓글 2 좋아요 0 조회수 117

라이브러리 버전 일치 이슈

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

npm init vite@5.2.3 를 통해 설치 후 npm i를 통해 필요한 라이브러리를 다운 받을시에, 터미널 창을 통해 각종 경고 안내가 나옵니다. 예를 들어 하나만 보여드리자면, npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported 입니다. 이처럼 온갖 라이브러리들이 '더 이상 지원하지 않는 버전임'을 명시하고 있는데, 최신 버전을 사용해서 수업을 따라가야 하나요, 아니면 '더이상 지원하지 않는 버전'의 라이브러리를 사용해서 코드를 짜도 이상이 없을까요? 안내해주신 것처럼 라이브러리 버전을 맞춰서 수업을 따라가고 싶은데, 터미널에서 이러한 경고를 보여주니, 버전을 맞출시에 '지원하지 않는 버전'문제로 인한 추가적인 오류가 생길까 걱정됩니다. 요약 1.터미널에서 말하는 '더 이상 지원하지 않는 버전' 안내를 무시하고, 짐코딩님 강의의 라이브러리 버전을 사용해도 문제가 없을까요? 2.최신 버전을 사용하고, 달라진 문법등의 오류를 감당하는게 나을까요? 2번 질문의 문제에 대한 기술적인 지원을, 짐코딩님을 통해 받을 수 있을까요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
주병규 댓글 1 좋아요 0 조회수 105

"Enter 키 발생 시 항목 추가" 부분에서 공백이 포함되면 한 줄이 더 입력됩니다

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

추가할 todo에 공백이 포함된 상태로 엔터를 입력하면 위와 같이 추가가 되는데 제가 잘못한 부분이 있을까요? https://github.com/juan-rybczinski/learn-react/commit/dba6aab43a96601fed941edfa652e4508f6a88e9

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
Jaehyeon Lee 댓글 2 좋아요 0 조회수 71

counterReducer.ts

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

counterReducer.ts 파일은 왜 tsx파일이 아닌 ts인가요??

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
himy1114 댓글 2 좋아요 0 조회수 86

immer 에서 불변성이란

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

immer 에서 불변성이란게 무슨 뜻인가요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
j j 댓글 2 좋아요 0 조회수 111

파일확장자 질문

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

기본적으로 tsx 확장자로 된 파일을 만들어서 작업을 하는데 때에 따라 ts 같은 파일도 만든데 무슨 차이가 있나요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
j j 댓글 2 좋아요 0 조회수 180

"" , '', `` 각각 사용 방법이 궁금해요.

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

"" , '', `` 각각 사용 방법이 궁금해요.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
j j 댓글 2 좋아요 0 조회수 57

11-03 강의

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

Button.tsx에서 const {children, ...rest} = props; 부분이 이해가 가지 않습니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
j j 댓글 2 좋아요 0 조회수 75

TotalCounter을 작성할때

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

저는 처음에 과제를 할때 setTotal 을 직접 prop 으로 내렸는데 handleTotal 을 만들어서 함수로 내려준 이유가 있을까요?? 차이점과 장단점에 대해서가 궁금합니다. import Counter from "./Counter"; import React, { useState } from "react"; function Main() { const [Total, setTotal] = useState(0); return ( <main> <h2>Main Component</h2> <h1>{Total}</h1> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> <br /> <br /> <Counter Total={Total} setTotal={setTotal} /> </main> ); } export default Main;

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
조성경 댓글 2 좋아요 0 조회수 77

event객체 전달에 관해서

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

앞선 강의에서 매개변수가 있는 경우 event객체를 명시적으로 전달하라고 하셨는데 본 강의에서는 매개변수가 있지만 따로 명시하지 않으신 부분이 궁금합니다. event객체를 사용하지 않는 경우에도 매개변수가 있는 경우 명시적으로 지정해줘야 하는지, 혹시 제가 잘못 이해한 것이라면 어느 상황에 명시적으로 event 객체를 전달하는지 알고 싶습니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
정민서 댓글 2 좋아요 0 조회수 68

여러 단어 선택해서 한번에 수정하는 법!

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

안녕하세요. 이번 영상 4:33쯤에서 커서를 여러군데에 만들고 수정하는 부분이 나오는데 어떻게 하신건지 궁금해요! 그리고 단어를 한번에 수정하더라도 원래 소문자였던 부분은 소문자, 원래 대문자였던 부분은 대문자로 처리되던데 이 부분도 궁금해요!

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
Do Hae Kim 댓글 2 좋아요 0 조회수 215

강의 노트

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

281강 강의 노트는 어디서 확인이 가능할까요? 안보이네요ㅠ

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
rladbstjd96 댓글 2 좋아요 0 조회수 90

강의자료파일관련

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

안녕하세요~ 강의자료를 다운받았는데요.. 자료가 매칭이 잘안되고 누락된듯합니다.. 다시한번 확인 부탁드립니다. 섹션4에 26번에서 다운받은 code.zip파일입니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
댓글 2 좋아요 0 조회수 107

질문입니다.

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

강의에서 현업관련해서 interface 보다 type을 별도의 파일을 더 선호 한다고 하셨는데, interface보다 type이 선호되는 이유를 알고 싶습니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
heuieun choi 댓글 2 좋아요 0 조회수 84

gitHub 레파지토리 보면

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

왜 39강까지지만 push하구 그 이후 회차들은 push안했나요? 강의 수강회차별로 소스 싱크맞추어서 학습하면 도움이 많이 될텐데 강의별로 확인해셔서 소스 동기화 요청드립니다. 80강이면 80강 까자끝난 소스가 올라오면 되겠죠 ? 79강에서 80강 갔는데 ui가 바뀌어서 어떻게 환경을 잡아야할지 당황스럽습니다.

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
yoo 댓글 3 좋아요 -4 조회수 133

80강 수강중인데

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

80강 3분 08초에서 > 3분 09초로 넘어갈때 메모UI로 어떻게 바뀐건가요? 강의교안에 수정해야 될게 있으면 추가해주세요 / 이런사소한것도 신경안쓰고 강의를 올리십니까 ? 리액을 익히는게 목적인데 환경 잡느라 시간 다 날립니다. 추가영상 촬영해서 올려주시고 교안도 수정해주세요

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
yoo 댓글 3 좋아요 -3 조회수 103

79 타이틀수정 강의중

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

78 삭제 강의 이후 79 타이틀 수정 으로 넘어 갈떄 home.jsx UI가 바뀌는데 그거에 대해 설명이 없네요 . 강의교안에 home.jsx 파일 올려주시고 / 영상에도 home.jsx 변경 하는거 추가해서 촬영 부탁드립니다.

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
yoo 댓글 1 좋아요 0 조회수 66

소스 코드 공유합니다

해결됨

리액트 기초 (Introduction to React)

https://github.com/tolfromj/react-basic 파이팅~!! (vite 사용해서 환경설정이 조금 다릅니다. 강의 수강하면서 직접 타이핑해서 오타나 오류 있을 수 있습니다. )

  • react
  • react-router
  • hook
qawsed 댓글 0 좋아요 5 조회수 166

인기 태그

인프런 TOP Writers

주간 인기글