input에 value 속성에 대해 질문드립니다!

안녕하세요 이정환입니다.해당 내용은 정확히 우리 강의의 5.8) State로 사용자 입력 관리하기 1 챕터의 5분 25초 경에 설명되어 있습니다. 아마 한번 살펴보시면 금방 이해하실 수 있을거에요

useMemo 강의 부분에 대해 질문있습니다.

안녕하세요 이정환입니다.먼저 어떤 부분의 코드(정확히는 컴포넌트)가 리렌더링 되고 있는지는 강의에서 안내드린대로 리액트 개발자 도구의 Highlighting 기능을 이용하시는것이 가장 좋습니다. 만약 하이라이팅으로 구분이 어려우시다면 React-Scan 등의 도구를 추가 적용해보시는 것도 추천드립니다 (요새 핫하더라구요)여기에 더해 구체적으로 언제가 최적화를 하기 좋은 타이밍이냐는 궁금증도 있으실 것 같은데요 이에 대해서는 저희 카페에 제가 공유해둔 아티클을 첨부해드리면 좋을 것 같습니다!내 서비스는 왜 느릴까? 토스 개발자들의 프론트엔드 성능 최적화 이야기 | 한입 뉴스 #7또 다음의 아티클을 읽어보셔도 좋을 것 같습니다!언제 useMemo와 useCallback을 사용해야 할까?

새 프로젝트 생성시 빌드 에러가 뜹니다

안녕하세요 이정환입니다.긴급하게 확인해보니 Vite 자체의 오류로 확인되었습니다. 현재 Vite의 GitHub Issue가 불타고 있네요https://github.com/vitejs/vite/issues/19019https://github.com/vitejs/vite/issues/19018(사진) 빠르게 문제 해결하시려면 이전 버전의 Vite를 사용하시는 걸 추천드립니다.다음과 같이 vite@5 명령으로 사용하실 수 있으며 강의와 동일한 환경이니 걱정하지 않으셔도 됩니다.npm create vite@5

페이지라우터와 앱라우터의 데이터 패칭 방식의 차이에 관한 질문.

안녕하세요 이정환입니다.오해가 있으신것 같습니다! "서버 컴포넌트에서 필요한 데이터를 직접 Fetching 하면 된다" 라는 이야기는 "서버 컴포넌트끼리 데이터를 Props로 주고받지 못한다" 라는 이야기가 아닙니다. 서버 컴포넌트간에도 역시 당연히 페이지 라우터 버전과 동일하게 데이터를 주고 받을 수 있습니다. 그러나 굳이 이렇게 할 이유가 없으므로 그렇게 하지 않는 것 입니다. 데이터의 전달이 복잡해지니까요

리액트 라이프 사이클 질문

안녕하세요 이정환입니다.먼저 좀 더 질문을 구체화 해 주실 수 있을까요? TodoItem 컴포넌트 하나만으로는 말씀하신 상황을 구체적으로 파악하기 어려울 것 같습니다. 강의와 코드도 조금 다른 것 같구요!대략적으로만 파악하자면 useState의 초기값으로 Props로 받은 content를 고정해두었을 때와 useEffect를 통해 content의 값이 변화할 때 setUpContent를 호출하는 것과의 차이를 물어보신 것 같은데요 useState의 초기값은 컴포넌트의 리렌더링에 반응하지 않습니다.즉 content로 제공되는 Props의 값이 변화한다고 해서 초기값이 다시 설정되거나 하는건 아니라는거죠 그렇기 때문에 content Props의 값이 변화할 것으로 예상된다면 useEffect를 사용하는게 더 좋은 방법이 될 수 있을 것 같습니다. 물론 이는 제한된 내용을 기반으로 답변된 내용이라 정확하지 않을 수 있습니다.

useReducer로 투두리스트 업그레이드 부분 질문있습니다.

안녕하세요 이정환입니다.앗 제가 질문을 놓쳤네요 ..! 원래 매일 달아드리는데 하루 늦게 답변드리는 점 죄송합니다 🙇‍♂ 우선 dispatch는 상태 변화를 일으키기 위해 사용하는 함수입니다. 우리 강의에서는 말씀하신대로 onCreate 함수 내부에서 dispatch를 호출하고 있는데 이는 onCreate 함수가 실행되었을때 매개변수로 전달받은 값들을 통해 새로운 일기를 추가한다는 상태 변화를 일으키려고 하기 때문입니다. 결론적으로 그 목적 자체는 setState와 동일하다고 이해하시면 쉬울 것 같습니다. 이어서 useReducer의 목적은 간단하게 구현하는데에 있다기 보다는 강의에서 설명드린 그대로, 복잡한 상태변화 로직을 컴포넌트 내부로부터 분리하기 위함입니다. 이 내용은 우리 강의의 9.1) useReducer를 소개합니다 에 자세히 설명되어 있으니 참고하시면 좋겠습니다. 마지막으로 Redux와 useReducer는 이름만 비슷합니다 ㅎㅎ

npx create-react-app . --template typescript 실행 시 에러가 발생합니다.

안녕하세요 이정환입니다.아이코..! React 19 릴리즈로 인해 요런 오류가 발생하는군요 🥲 말씀하신대로 vite를 이용해 생성하셔도 됩니다! 크게 다른 부분은 없으니 걱정하실 필요 없어요그럼에도 만약 CRA로 생성하고 싶으시다면 아래의 AI 인턴의 답변대로 명령어 끝에 의존성 충돌을 무시하고 설치를 강행하는 --legacy-peer-deps 옵션을 붙여 설치하시면 됩니다. npx create-react-app . --template typescript --legacy-peer-deps

이 호출과 일치하는 오버뢰드가 없습니다. 0개의 인수가 필요한데 1개를 가져왔습니다. 오류가 뜨네요

안녕하세요 이정환입니다.우선 코드에 오타가 있네요 Action 타입을 정의하는 부분에서 id를 in으로 잘못 작성하신것 같습니다.(사진)해당 오타로 인해 타입 추론이 정상적으로 이루어지지 않은걸로 보여요! 오타 수정하시면 문제 없이 동작할 것 같습니다. 그래도 안되면 답글 주세요

강의 자료는 어디에 있나요?

안녕하세요 이정환입니다.해당 강의에서 드래그를 내려보시면 아래에 요렇게 나와있습니다!혹시 누락된 부분 있으시면 알려주세요!(사진)

이건 무슨 함수일까요...? 어떻게 해석해야 할까요...?

안녕하세요 이정환입니다.혹시 올려주신 Fn : (name: string, value: any) => void = () => {} 이 어디에서 나온 코드인가요? 만약 콜론 뒤에 나타나는 (name: string, value: any) => void = () => {} 이 Fn 이라는 타입이라면 이는 잘못된 문법 사용입니다. (사진)아마 커링 함수를 위한 타입을 정의하시려고 하는 것 같은데요그렇다면 다음과 같이 정의해 사용하셔야 합니다.type Func = (name: string, value: any) => () => void; const func1: Func = (name, value) => () => null; const func2: Func = (name, value) => { return () => null; }; 단 우리 강의에서는 커링에 대해 다루지는 않기 때문에 커링과 관련해 문법이 잘 이해가 안되신다면 다음 문서를 참고하시면 좋겠습니다.https://ko.javascript.info/currying-partials