Dr.Mlem Blog

Q1.useMemo와 useEffect의 차이점에 대해서 좀 더 설명해줄 수 있겠어?   A1.ChatGPT의 말: 물론입니다! useMemo와 useEffect는 둘 다 React에서 의존성 배열을 사용하지만, 목적과 동작 방식이 다릅니다. 각각의 역할과 차이점을 상세히 살펴보겠습니다.useMemo란?주요 목적: 값을 메모이제이션하여 불필요한 재계산을 방지하고 성능을 최적화합니다.반환값: 계산된 값을 반환합니다.사용 사례:계산 비용이 높은 작업(예: 복잡한 수학 계산, 데이터 필터링 등)을 메모이제이션.특정 값이 바뀌지 않으면 이전 계산 결과를 재사용.동작 과정의존성 배열에 포함된 값이 변경될 때만 계산 함수를 실행합니다.계산된 결과를 메모리에 저장하고, 다음 렌더링에서도 동일한 값을 반환합니다.예제:..

(10 13-simple-dashboard의 dashboard/index.js 코드중...)Q1. const { loading, status, message, item } = useSelector((state) => state.TitanicSlice); 이런 코드가 있을 때, 변수 item은, React redux 기능을 통해 관리되는 상태변수라고 하면 알맞은 말인가?   A1.네, 맞습니다. item 변수는 React-Redux 기능을 통해 관리되는 상태 변수입니다.useSelector 훅을 사용하여 Redux store의 상태를 구독하고 필요한 데이터를 가져오고 있습니다. 코드에서 item은 state.TitanicSlice에 정의된 item 속성을 참조합니다. 이 상태는 Redux의 TitanicS..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

(useLocation, useNavigate에 대한 설명은 12월 4일에 했으나, 해당 부분의 영상이 날아가서, 따로 복습하기 위해 작성한 글) Q1.React를 공부중에 있는데, useNavigate() 훅과 useLocation()훅에 대해서 배우고 있었어. 그런데 다른 훅들과 달리, 저 2개의 훅은 상대적으로 기능이 단순한 것 같아. 그래서 내가 배운게 맞는지 확인하고자 해.  useNavigate()훅은, 현재 리엑트 프로젝트를 렌더링하고 있는 브라우저의 URL에, 파라미터로 받은 문자열로 변조해주는 것이고, useLocation()훅은, 현재 리엑트 프로젝트를 렌더링하고 있는 브라우저의 URL 정보를 가져오는 훅인 것이지?  내가 질문한 내용에 부족한 점이 있다면 보충해주고, 답변은 존댓말로 ..

(React 10-11 simple-crud에서)Q1.리엑트에서, 어떤 form 태그에 input 태그 여러개가 있는데, 각각 name 속성에 id, dname, loc 를 부여했어.  이런 상황에서, form태그에 submit 버튼이 눌렸다고 가정할 때, const current = e.currentTarget; 이렇게 이벤트가 걸린 본인을 가져오고 있는데, 순정 JS는 저렇게 코드를 가져올 수 있는지 없는지가 궁금하고, 안된다면 React와의 어떤 차이에 의해서 안되는지, 이게 첫 번째 궁금한 내용이고,  그 다음 궁금한 내용이, 해당 코드 이후, form 태그 안에 name속성에 id, dname, loc가 부여된 input 태그의 값을 가져오기 위해서 const id = parseInt(curre..

Q1.React에서,  const [count, setCount] = useState(0);setCount(count + 1);setCount(count + 1); 이런 코드가 있으면, 최종적으로 count는 1이야? 2야? 그 이유도 자세히 설명해줘   A1.ChatGPT의 말: count의 최종 값은 1입니다.이유:setCount는 비동기로 작동합니다. 이 때문에 setCount를 호출할 때 즉시 상태(count)가 업데이트되지 않고, React가 상태를 배치(batch)로 처리하여 업데이트를 스케줄링합니다.코드 분석:const [count, setCount] = useState(0);setCount(count + 1); // 첫 번째 업데이트setCount(count + 1); // 두 번째 업..

Q1.React에서 useEffect같은 경우에는, 2번째 파라미터로 의존성(혹은 종속성)배열을 넣어서, 그 배열 안에 계속 지켜볼 상태변수를 넣어두면, 해당 배열에 들어간 상태 변수들 중 하나라도 값이 바뀌면 useEffect에 들어간 콜백함수를 실행하게 되는데,  이때 궁금한 것이, 이 의존생 배열을 파라미터로 받는 hook은, React에서 useEffect 말고도 어떤 hook있는지야.  1. 어떤 hook들이 2번째 파라미터로 의존성 배열을 받는거야? 2. 또, 2번째 파라미터로 의존성 배열을 받는 다른 hook들이 있다면, 해당 hook들도 의존성 배열 안에 상태변수만을 받는지, 3. 그리고 배열에 들어간 값들을 useEffect 처럼 모니터링하다가 변화를 감지하면 hook에 들어온 콜백함수를..

Q1.짧게 물어볼게. useEffect에서 2번째 파라미터에 들어가는 배열에 상태변수 3개가 있다고 하자. 그 중 하나라도 바뀌면, useEffect에 걸린 함수가 전부 다 실행되는거지? 상태 변수 3개 다 바뀌어야 할 필요 없이, 그 중 하나라도 바뀌면 작동하는거지?   A1.ChatGPT의 말: 맞아! useEffect에서 두 번째 파라미터인 의존성 배열에 상태 변수 3개가 있다고 하면, 그 중 하나라도 값이 바뀌면 useEffect에 정의된 함수가 실행돼.즉, 배열에 들어 있는 상태 변수 중 하나라도 값이 변경되면 리액트는 "이 의존성 배열 안에 있는 값이 변했구나!"라고 감지하고, useEffect의 콜백 함수를 다시 실행시켜.예를 들면:useEffect(() => { console.log("의..

(10-10 simple-ajax의 titanic/index.js 코드)Q1.현재 이런 React JSX 코드가 있어. 그런데, 드롭다운 메뉴에 있는 값을 읽어오는 함수에서,const choice=e.currentTarget.value;​이렇게 드롭다운 메뉴에 있는 값을 한 번에 가져오고 있는데, JS에서는const current = e.currentTarget;const choiceIndex = current.selectedIndex;const choice = current[choiceIndex].value; 이렇게 가져와야 한다고 설명을 들었어. 왜 React에서만 해당 방식으로 드롭다운 메뉴의 값을 가져올 수 있는 것인지 설명을 해줘.   A1.ChatGPT의 말: React에서 e.currentT..