📖 들어가며 React에서 성능을 최적화하기 위해 사용할 수 있는 React.memo에 대해 소개하고, 기능을 어떤 상황에서 왜 사용하고 동작원리와 사용 예시 코드도 함께 알아보겠습니다. React.memo란 ❓ memo를 사용하면 해당 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있습니다. 즉, 메모화된 버전의 컴포넌트로 해당 컴포넌트의 props가 변경될 때만 리렌더링을 할 수 있습니다. 커다란 큐모의 컴포넌트나 복잡한 상황에서 불필요한 리렌더링을 막아 성능을 최적화할 수 있습니다. 동작 원리 💡 React.memo는 인자로 들어간 컴포넌트에 어떤 props가 입력되는지 확인하고 입력되는 모든 props의 신규 값을 확인한 뒤 이를 기존의 props의 값과 비교하도록 리액트에게 전..

📖 들어가며 React + Typescript 환경에서 React Testing library와 jest를 이용해서 테스트 코드 작성에 대해서 공부하려는 도중에 오류가 발생했고, 결과적으로 해결하기 위해 해야 할 것은 별 거 아니었지만 힘들게(?) 해결 방안을 찾아서 기록을 해두려고 한다. 1. 문제 발생 CRA typescript로 패키지들을 설치하고 난 후에 npm test 명령어를 통해서 기본적으로 작성되어 있는 테스트 코드들이 잘 실행이 되는지 확인을 해봤다. 하지만 ReactDOM.render is no longer supported in React 18 오류가 발생했다. 테스트 코드 자체는 PASS가 되면서 잘 실행이 되었지만 위와 같은 오류 메시지가 매우 신경 쓰였다. 2. 발생 원인 Rea..

📖 들어가며 React를 처음 학습하던 시절, Redux가 무엇인지, 그리고 왜 필요한지에 대한 명확한 이해 없이 'Redux를 왜 배워야 하는지'에 대해 의문을 갖곤 했습니다. 하지만, React를 이용하여 클론 코딩을 하거나 실제 프로젝트를 진행하면서 데이터를 사용하고자 하는 컴포넌트가 멀리 떨어져 있어 자식 컴포넌트에게 불필요하게 많은 Props를 전달해야 하는 상황(Props Driling)을 겪게 되었습니다. 이런 경험을 통해 "전역 상태 관리"의 필요성을 체감하게 되었습니다. 그래서 이번 포스팅에서는 Redux에 대해 알아보려 합니다. Redux란 ❓ Redux는 JavaScript 애플리케이션의 상태를 효과적으로 관리하는 데 도움을 주는 라이브러리입니다. Redux는 React와 함께 사용되..

📖 들어가며 리액트로 팝콘 타임을 클론 코딩하는 포트폴리오를 제작하면서 공부 중에, Link (react-router-dom)을 클릭하면 url은 변경이 되지만 컴포넌트가 업데이트가 되지 않아서 제대로 기능이 작동하지 않는 문제를 겪었다. 해결하고 나니깐 정말 별 것 아니었지만...(개념 부족) 무엇이 문제이고, 어떻게 해결했는지 다시 복습하기 위해 정리해본다. ❗ 문제 문제의 화면이다. Detail 컴포넌트에서 해당 영화의 관련 영화 데이터를 받아와서 보여주는 컴포넌트다. Detail 컴포넌트에서 관련 영화를 보여준 뒤, 관련 영화를 클릭하면 그 관련 영화의 Detail 컴포넌트가 렌더링 되게 구현하고 싶었다. 하지만 사진에 보이는 바와 같이 클릭을 하면 url은 잘 변경이 되지만 해당 영화의 Deta..

📖 들어가며 최근 React를 공부하는 도중에 react router를 설치해야 하는 상황이었습니다. react router를 설치 했는데, 로그에 npm error가 여러 개 발생했습니다. 리액트로 실행 시키자 아래와 같은 오류가 발생했습니다. ./src/App.js Module not found: Can't resolve './src/components/Navbar/Navbar' in '/Desktop/React_Components/test/src' Module not found: Can't resolve './node_modules/react' 💡 해결 방법 create-react-app으로 구성된 리액트 파일은 아래와 같이 되어있습니다. 프로젝트 내부에 있는 package-lock.json 또는 ..