게시글
질문&답변
2024.04.24
reset 시점에 searchResult 빈 배열로 update
이미 답을 찾으셨을 것 같은데요. 지적해 주신것처럼 배열도 초기화 해주는 것이 안전합니다. 영상에는 없지만 다음 브랜치(react/search-result-4)로 이동하면 해당 코드가 있을 거에요. 중요한 부분 놓치지 않고 말씀해 주셔서 감사합니다.
- 1
- 2
- 55
질문&답변
2024.03.28
[4.4장 메모이제이션 훅] 4.4.4 useCallback curried function에 관한 질문입니다.
둘은 다릅니다. handleClick1은 훅에 생성함수를 전달하는데 항상 undefined를 반환합니다. 의존성과 무관하게 항상 undefined를 메모이제이션하는거죠. handleClick1은 함수가 아니라 undefined라서 실행하면 TypeError가 발생할 겁니다. 한편 handleClick2는 생성함수를 전달하는데 postId를 인자로 받는 함수를 반환합니다. 의존성에 따라 다른 동작을 하는 함수를 메모이제이션합니다. 이 반환값을 할당받은 handleClick2은 함수로 실행할수 있습니다.
- 1
- 2
- 103
질문&답변
2024.03.28
[4.4장 메모이제이션 훅] 4.4.2 useMemo 에서 every 함수에 관한 질문입니다.
새로운 배열이 의존성으로 들어가기 때문에 다른 값으로 인식합니다. 배열은 참조 값을 가지고 비교하기 때문입니다. 차근차근히 순서를 보시면요. Tag1을 클릭하면 tag 상태가 갱신되고 루트 컴포넌트가 리렌더됨 Board 컴포넌트를 다시 그리면서 새로운 배열을 posts 인자로 전달. (객체 리터럴을 사용하기 때문) Board 컴포넌트는 인자 posts를 MyReact.useMemo 의존성 인자로 전달 이전에 받은 배열과 참조 값이 다름. 아래 AI 도 제대로 답해주셨네요.
- 1
- 2
- 70
질문&답변
2024.03.25
TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable
코드 맨 아래 플러그인 지정하는 부분에서 발생한 원인이네요. ...(process.env.NODE_ENV === "production" && [ new MiniCssExtractPlugin({ filename: "[name].css", }), ]), 첫 번째 표현식이 false 이기 때문에 전체 문장은 false가 될 겁니다. [...false] 로 평가되어 불리언 타입에 나머지 연산을 시도하다가 TypeError 가 발생했을 것 같아요. 삼항 연산자로 한 번 바꿔보시겠습니까? ...(mode === "production" ? [new MiniCssExtractPlugin({ filename: `[name].css` })] : [])
- 1
- 1
- 67
질문&답변
2024.03.25
혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?
웹팩 4 버전 시절에 만든 강의입니다. 지금은 5버전을 많이 사용해서 내용이 정확히 일치하지는 않는데요. 주요 개념와 api는 여전히 유효합니다. 라이브러리 업데이트에 따라 강의 업데이트 하려고하는데요. 아직 구체적인 일정은 정하지 못했습니다. 여전히 관심 갖어 주셔서 정말 고맙습니다.
- 1
- 1
- 84
질문&답변
2024.03.25
[4.3장 리듀서 훅] 4.3.7 활용 MyForm(풀이) 오타 제보 및 질문이 있습니다.
오타를 짚어 주셔서 고맙습니다. 다른 분들도 도움 되시라고 4.3.7 수업 본문에 적어 두었습니다. -- 어떤 부분이 궁금하신 건지 잘 모르겠습니다. 질문 내용을 여러번 읽어 보고 영상도 다시 확인했는데요. 혹시 실습 코드를 따라하시면서 캡쳐처럼 버그를 마주하신 게 아닌가 싶습니다. 어떤 코드였을 때 이런 현상이 있는지 알면 질문 내용을 파악하는 데 도움이 될것 같아요.
- 1
- 2
- 80
질문&답변
2024.03.21
[4.1장 레프 훅] useRef관련 질문이있습니다.
MyReact.useRef의 구현을 보시면 힌트가 되실 겁니다. 호출 될 때마다 커서를 증가 시키는데요. 매번 새로운 레프 객체를 만들기 때문에 { current: 1 } 값에 1을 더해 2가 로깅되는 현상입니다. 버튼 클릭 상태 갱신 컴포넌트 리랜더 훅 호출 MyReact.useRef: 이전 호출에서 증가된 커서로 memorizedStates 접근. 값이 없어서 새로 만듬. {current: 1} // 문제의 원인 이 현상을 해결하려면 컴포넌트 측에서 MyReact 커서를 초기화해야합니다. export default () => { // 커서를 초기화 합니다. MyReact.resetCursor(); const ref1 = MyReact.useRef(1); const [state, setState] = React.useState(0); if (state > 2) { ref1.current = ref1.current + 1; console.log("ref1", ref1); } 블로그에는 추가해 놓았는데 참고해주세요. https://jeonghwan-kim.github.io/2023/06/24/lecture-react-season2-part4-ch1#useref-직접-만들기 제가 영상을 만들 때 누락한 부분이었네요. 꼼꼼히 살펴봐 주셔서 실수를 바로 잡을 기회가 생겼습니다. 정말 고맙습니다.
- 1
- 1
- 79
질문&답변
2024.03.18
[1.3장 주문 내역 화면] 1.3.5 Card 조합 질문 있습니다
데이터를 전달하는 방식에 관해 궁금하신 것 같습니다. 컴포넌트도 클래스나 함수이기 때문에 문제를 더 일반적으로 정의하면 '함수(혹은 객체)에 메세지를 전달하는 방법' 정도가 될 수 있겠네요. 메세지를 인자로 전달하는 방식이 객체나 원시 타입인 경우가 있는데요. 둘 간의 성능적인 차이는 없다고 봅니다. 오히려 원시 타입 인자는 함수를 실행할 때마다 값을 복사하기 때문에 메모리를 더 쓰게 될 거에요. 물론 이것이 성능 저하에 의미있는 영향을 미치진 않고요. 저는 추상화 관점 으로 바라 봅니다. 객체나 함수에게 메세지를 전달할 때 추상화된 값을 전달하는 것이 원시타입을 전달하는 것 보다 사람이 이해하기 쉽기 있기 때문입니다. 아래 코드는 ' 컴포넌트에게 order 객체를 전달한다'라고 읽을 수 있어요. 한편 아래 코드는 좀 더 구체적이죠. 정답은 명확치 않습니다. 상황에 따라 달라요. 어플리케이션 안에서 주된 도메인 객체(order)가 있는 상황이라면 이걸 잘 활용하는 것이 코드 관리에 좋습니다. 객체 단위로 생각할 수 있기 때문이에요. 컴포넌트도 이 도메인 객체 단위로 설계해 order 인자를 전달한 것이고요. 컴포넌트가 도메인 정보를 알 필요가 없다면 두 번째가 더 합당할 거에요. 특정 인자에 도메인 냄새가 없어서 원시 타입의 값을 받도록 설계할 수 있기 때문입니다.
- 1
- 1
- 105
질문&답변
2024.03.17
[3.5장 컨택스트 훅] 3.5.2 useContenxt 에서 질문이 있습니다.
MyReact.useContext() 때문입니다. Count에서 처음 호출될때 처음 컨택스트 값을 가져옵니다. const [value, setValue] = React.useState(context.emitter.get()); 아직 프로바이더가 값이 제공하기 전이라 폴백으로으로 전달한 빈 객체가 전달 될거에요. Count는 이 컨택스트에서 값을 찾기 때문에 undefined로 처음 렌더합니다. useContext는 context값에 따라 부수효과를 실행하는데요. 프로바이더가 제공한 context 값이 바뀌어 동작합니다. 컨택스트에게 값이 바뀌면 setValue를 호출하도록 요청하고. 컨택스트가 이 함수를 실행하면 상태가 바뀌면서 다시한번 value가 바뀌게 됩니다. Count가 두번째 레더합니다. 실제 리액트의 훅은 한 번만 렌더하는데요 . 마이리액트는 리액트 동작 이해를 위한 용도로 봐주시면 좋겠습니다 .
- 1
- 2
- 109
질문&답변
2024.03.13
[1.3.6 상태정의] state 관련
this.state = {} 로 표시해도 무방합니다. 다만 상태의 전체 모양을 쉽게 파악하기 위해서는 sthis.state = { order: null } 로 값을 초기화하는게 더 낫다고 생각해요. 저는 코드 읽는데 도움이 되더라고요.
- 1
- 1
- 87