usememo나 usecallback은 같은 컴포넌트 내에서 데이터나 함수의 최적화에 사용되지만 Component 자체를 최적화하려면 React.memo를 사용한다 그 중 외부 디자인 라이브러리 컴포넌트 사용시에는, 공통으로 필요한 부분에 대해 React.memo 처리해주는게 좋다 React.memo로 컴포넌트를 처리해주면, 해당 컴포넌트에 대해서는 이전 렌더링 결과가 달라지는 경우만 다시 렌더링해준다 내 경우에는 Material UI CSS 수정-> React.memo 처리하는 경우가 많았다 예컨데 해당 코드는 Material UI에서 제공하는 TextField를 가져와 CSS처리한 것이다. withStyle로 CSS를 수정한 경우 다시 컴포넌트를 리턴한다 따라서 리턴한 객체에 그대로 memo처리가 가..

Avartar 컴포넌트를 imgSrc의 숫자만큼 만들어 렌더링 한다 이때 map으로 생성된 컴포넌트 배열을 담아서 리턴하면 된다. 실제로 화면에는 함수를 실행시켜 렌더링 해준다

약간 헤매서 정리 1) 공통으로 적용될 컴포넌트가 없을때 - if문 사용 2) 공통으로 적용될 컴포넌트가 있을때 - 삼항 조건 연산자 사용

Navigator는 원래 공통적으로 페이지 전체에 적용되어야 하는 UI인데, 가끔 적용되지 않아야 할 페이지가 있다. 이렇게 이미 네비게이터를 생성하고 BrowserRouter로 감싸준 경우, BrowserRouter안에 들어가는 모든 컴포넌트에는 네비게이터가 생긴다 새로 추가하는 컴포넌트에는 네비게이터를 적용시키지 않고 싶다면? 전체를 다시 Switch로 감싸준 후, 네비게이터가 적용되는 컴포넌트들은 네비게이터와 함께 다시 Route로 감싼다

부모에서 자식으로 props를 이용하여 데이터를 전달하는 예시는 많지만 가끔은 자식에서 부모로 데이터를 전달하게 되는 상황도 생긴다 InputCell이라는 컴포넌트를 exampleCell이라는 컴포넌트에서 자식으로 가져오고 싶은 경우를 예로 들어보자 InputCell은 유저로부터 데이터를 입력받는 기능을 수행하는 컴포넌트이다. 이 경우에는 InputCell 컴포넌트에 입력한 데이터를 exampleCell로 가져와야 한다 여러가지 방법이 있을텐데 내 경우에는 이렇게 처리했다 우선 부모 컴포넌트에서 setter 함수를 정의한다 이때 useState를 사용하게 되면, 컴포넌트가 매번 리렌더링이 되기 때문에 최적화 이슈가 생긴다 (www.codebeast.dev/usestate-vs-useref-re-rende..

잊지말자...