ReactJS
-
"클린 코드" 는 "방어운전" 과 같다.ReactJS 2023. 10. 21. 07:20
사실 팀 프로젝트를 할 때마다 클린 코드의 중요성을 체감하고 있지만, 이번 프로젝트는 무려 디렉터, 기획팀, UI/UX 디자인 팀, 개발팀(프론트,백엔드), 운영팀이 함께 작업을 하는 내 인생 나름 대규모 프로젝트여서 클린 코드의 "필요성"을 아주 깊게 느끼는 중이다. 오히려 상대적으로 1인 프로젝트, 소규모 프로젝트에서 클린 코드가 그렇게 중요하지 않았기 때문에 내가 "재사용성" 높은 코드를 짜는 데 귀찮음을 느꼈다는 걸 깨달았다. 클린 코드의 정의 클린 코드는 일반적으로 유의미한 변수 이름, 한 개의 함수 당 하나의 역할, 이해하기 쉬운 로직 등을 합쳐 알아보기 쉬운 코드를 의미한다. 맞는 말이다. 나는 여기에, 협업을 하면서 느낀 React 에서의 클린 코드를, 중요도 순으로 개인적으로 정의하고 싶..
-
React.memo, useMemo, useCallback 진짜로 언제 사용해야 할까?ReactJS 2023. 10. 14. 05:56
일단 당연한 사실들을 한번 짚어보자 React.memo: 컴포넌트 매핑 함수로 컴포넌트를 캐싱해서, 컴포넌트의 state 가 변경되지 않았음에도 쓸데없이 리렌더링을 방지함 useMemo: 컴포넌트가 렌더링 중에 생성하는 변수를 캐싱하여, 변수를 생성할 때 관여하는 인자가 바뀌지 않으면 변수를 새로 생성하지 않음 useCallback: useMemo 의 함수 버전 useMemo 로 객체를 캐싱하고, useCallback 으로 이벤트 핸들러 함수를 캐싱해서 컴포넌트의 prop 으로 전달해주면, memo로 캐싱한 컴포넌트는 prop 이 바뀌지 않은 것을 제대로 인식하고 리렌더링 하지 않는다. (안그러면 React.memo 의 prop 비교 방식이 shallow copy 이기 때문에, 단순히 이전 prop 과의..