리액트 (2) 썸네일형 리스트형 [Link Developer] HOC로 반환된 컴포넌트의 props undefined 이슈 오류 발견 MyProfile 페이지에서 발견된 에러이다. props에 저장된 로그인한 유저의 id를 조회하여 백엔드로 API 요청을 보낸다. 백엔드에서는 요청받은 id를 DB에서 찾은 뒤 해당 user에 객체를 클라이언트로 응답한다. 위 처럼 구상했었지만 props가 undefined 에러가 출력된다. 오류 분석 및 원인 useEffect(() => { const userId = props.user.userData._id let body = { _id: userId } axios.post('/api/users/profile', body) } 위 useEffect는 리액트 라이프 사이클에서 컴포넌트가 마운트된 직후 그러니깐 componentDidMount 단계에서 props를 호출하였기 때문에 오류가 난다.. [React] 최적화 훅 useMemo, useCallback React는 state가 변경되면 리렌더링을 한다. 다시말해 Virtual DOM과 DOM을 비교하여 변경된 부분을 반영하고 다시 렌더링 해주는 과정을 거친다. 이러한 과정에서 비효율적인 문제가 존재한다. 무조건 state가 변경되면 변경된 state와 무관한 컴포넌트의 구성요소가 리렌더링이 된다는 것이다. 이렇게 되면 불필요한 연산을 하는 것은 물론이고 연산을 다시하는 과정을 거쳐서 결과적으로 성능 저하로 좋지 않은 사용자 경험을 제공한다. 그걸 극복하기 위해서 나온 훅들이 useMemo와 useCallback이다. useMemo const Example = () => { const [textInput, setTextInput] = useState(''); const [count, setCount] =.. 이전 1 다음
