usecallback과 usememo를 중복해서 쓰는 이유(context 분리하기 챕터)

안녕하세요 이정환입니다.3번 -> 2번 -> 1번 요 순서대로 답변드릴게요! 3) useEffect vs useMemo두 Hooks 모두 의존성 배열에 담긴 값이 변화했을때 콜백함수를 실행시키는 것은 동일하나, useMemo는 콜백함수의 값을 반환하는 반면 useEffect는 결과를 반환하지 않습니다. 이런 차이점으로 인해 useEffect는 보통 특정 시점에 값을 반환할 필요 없는 동작을 정의할때 사용되고, useMemo는 특정 시점에 계산해야 할(계산해 반환해야 할 값)을 정의할 때 사용합니다.이에 대한 설명은 우리 강의의 10.2 챕터를 다시 참고하시면 좋을듯 합니다. 2) Provider 컴포넌트에게 value Props를 전달할 때Provider 컴포넌트에게 value Props로 전달되는 값 역시 Props이므로 객체 형태로 전달됩니다. 다만 Context의 Provider 컴포넌트는 우리가 직접 구현하는게 아닌, React에서 자체적으로 제공하는 내장 컴포넌트이므로 전달한 Props에 대한 구조 분해 할당을 직접 구현하실 필요는 없습니다. Context의 Provider는 그저 Props로 전달받은 객체를 그대로 하위 컴포넌트들에게 공급하는 역할만 딱 깔끔하게 수행합니다. 1) useMemo를 사용해야 하는 이유이유는 간단합니다. 그렇지 않으면 함수들을 감싸고 있는 객체가 리렌더링 되기 때문입니다. 우선 onCreate, onUpdate, onDelete 함수들 자체는 각각 useCallback으로 감싸져서 컴포넌트가 리렌더링 되어도 다시 생성되지 않습니다. 그러나 이 세 함수를 감싼{ onCreate, onUpdate, onDelete } 객체 자체는 컴포넌트 리렌더링시 다시 생성됩니다. 그리고 우리가 Provider 컴포넌트에게 Props로 전달해야 하는 값은 이 객체입니다. 따라서 { onCreate, onUpdate, onDelete } 객체가 다시 생성되지 않도록 useMemo를 활용해야합니다.

이벤트 선언 관련 질문입니다.

안녕하세요 이정환입니다.AI 인턴이 완벽한 답을주었네요! 추가적으로 궁금하신 부분이 있다면 답글 남겨주세요PS. 해당 내용은 우리 강의의 5.5) 이벤트 처리하기 3분 30초 경에 설명해드리고 있습니다. 해당 부분을 참고하시면 좋겠습니다 😀

복합 대입 연산자

안녕하세요 김정현님 이정환입니다.num7 += 20을 한 시점에서, num7 변수에 저장된 값에 20이 더해집니다.따라서 num7+=20 까지 수행했을때 num7 변수의 값은 30이 됩니다.여기서 num7-= 20을 수행하면 30 - 20이 되어 값이 10이 됩니다. 추가로 num7 -=20; 에서 20;이 앞에 오게 되는 이유가 무엇이냐고 질문 주셨는데요,죄송하지만 이에 대해서는 질문의 의미를 정확히 파악하지 못했습니다 ㅠㅠ더 구체적으로 말씀해주시면 다시 답변 드리겠습니다

사전렌더링과 데이터페칭 수업 질문

안녕하세요 이정환입니다.우선 한입 Next.js 강의를 들으시는 대부분의 수강생 분들께서는 이미 리액트로 최소 1~2개의 개인 프로젝트를 진행해보신 경험이 있으시리라 예상했기에 이와같이 안내드리고 있습니다.그러나! 프로젝트 경험이 없으신 분들께서도 수강하시는데에는 아무런 문제가 생기지 않을 수 있도록 "복습" 이라는 키워드와 함께 리액트에서의 데이터 페칭 방법도 아주 자세히 안내해드리고 있으니, 해당 내용을 참고하시면 본 강의의 수강에는 전혀 문제 없으실겁니다. 생각해보니 한입 리액트 수강 이후 즉시 한입 Next.js를 수강하시는 분들께는 그렇게 느껴지실 수 있겠군요 ... 😓 이 부분은 한입 리액트 강의에 데이터 페칭 관련된 내용을 추가하는 식으로 개선해보도록 하겠습니다 감사합니다.

콜백함수-호출 시 인수 값을 안 넣어도 되는건지 궁금합

안녕하세요 zip님 이정환입니다. 결과적으로 아래 코드처럼, 두번째 인수로 전달되는 콜백함수에 매개변수 idx를 선언하지 않으면 오류가 발생합니다.function repeat(count, callback) { for (idx = 0; idx 오류가 발생하는 이유는 너무나 명확합니다. 콜백함수 내부에서는 idx라는 변수에 접근할 수 없기 때문입니다. idx 변수는 repeat 함수 본문에 선언되어 있고, 콜백함수에는 인수로 전달되고 있으므로 이를 이용하시려면 아래와 같이 콜백함수에 idx라는 매개변수를 선언해주셔야 합니다.repeat(4, (idx) => { console.log(idx * 4); }); PS. 죄송하지만 질문을 정확히 이해했는지 잘 모르겠습니다 ㅠㅠ 혹시 헷갈리는 부분이 있으시다면 조금 더 구체적으로 추가 질문 주시면 답변드리겠습니다.

컴파일 실패 원인은?

안녕하세요 진진님 이정환입니다.오류 메세지를 읽어보시면params 라는 Props의 타입 정의가 잘못되었다고 나와 있습니다.이런 오류가 발생하는 이유는 우리 강의의 3.2) 페이지 라우팅 설정하기 의 6분 21초 경에 설명 드리고 있듯이 Next.js 15.1 버전부터는 searchParams와 params의 타입이 모두 Promise로 래핑되어 제공되기 때문입니다. (자세한 내용은 앞서 언급해드린 챕터를 참고하세요!)이에 해당 내용을 참고하셔서 코드 상에 serachParams와 params의 타입을 모두 Promise로 변경하시면 되겠습니다!

마지막 프로젝트 수정 코드 - 커밋

안녕하세요 진진님 이정환입니다.구체적으로 어떤 챕터의 코드가 커밋이 안되어 있다고 말씀해주신 걸까요? 페이지 라우터 버전의 한입 로그 프로젝트 코드를 말씀하신건지, 앱 라우터 버전의 한입 로그 프로젝트 코드를 말씀하신 건지 알려주시면 확인해보겠습니다.가능하다면 챕터명으로 말씀해주시면 더 빠르고 정확하게 확인이 가능할 것 같습니다.

함수- return으로 결과값 반환

안녕하세요 zip님 이정환입니다.네 맞습니다. getArea(40, 200000)의 결과는 area 변수의 값이 됩니다. 그러나 무조건 변수에 담아서 출력하실 필요는 없습니다. console.log(getArea(20, 30)) 처럼 getArea 함수 호출 결과를 즉시 콘솔에 출력하도록 설정하는 것 또한 가능합니다.

섹션 6 퀴즈 > 5번 문항 dynamic 옵션 값 오타

안녕하세요 이정환입니다.엇 그렇네요! 제보 감사합니다.다만 본 퀴즈는 제가 제작한 것이 아닌 인프런 측에서 AI로 자동 생성하는 것으로, 제게는 모니터링이나 수정의 권한이 없습니다 🥲인프런측에 조심스럽게 정정 요청 드려보겠습니다 :)

Promise 의 reject 관련 오류

안녕하세요 이정환입니다.결론부터 말씀드리면 예제와 동일하게 동작하고 있습니다 😀질문에 첨부해주신 아래의 사진을 살펴보면 기대하신대로 else 문이 정상적으로 잘 실행되어 reject가 실행되는걸 보실 수 있습니다.그러나 이때 reject는 비동기 작업을 오류로 처리하는 메서드인 만큼 예외를 발생시킵니다. 따라서 지금처럼 디버거에서 동작을 확인하시면 말씀하신 것 처럼 오류 발생이 감지됩니다.(사진) 또 터미널에서는 UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). 오류가 발생한다고 하셨는데요 이는 reject 메서드가 호출되어 발생하는 오류로 의도된 오류입니다.오류 메세지의 마지막 부분을 읽어보시면 rejecting a promise which was not handled with .catch(). 라고 하여 Promise에서 reject가 호출되어서 본 오류가 발생했음을 안내해주고 있기도 합니다. 우리 강의에서는 브라우저 디버거와 VSCode 터미널이 아닌 브라우저 콘솔을 통해 본 예제의 결과를 확인하고 있습니다. 강의를 자세히 살펴보시면 아래 그림처럼 브라우저 콘솔에도 동일한 오류 메세지가 발생하고 있는걸 보실 수 있습니다.(사진) 강의의 예제와 동일한 결과를 확인하시려면, 강의와 동일하게 브라우저의 디버거가 아닌 console 탭을 통해 결과를 확인하셔야 합니다.