🌳Frontend/react

//npm 이용시 npm install @mui/material @emotion/react @emotion/styled //yarn이용시 yarn add @mui/material @emotion/react @emotion/styled https://mui.com/

React는 이전 Props와 새 props를 Shallow equality 를 비교한다. 즉, 새 props와 이전 props 들의 참조가 동일한지 여부를 고려한다. 부모가 다시 렌더링될 때 마다, 새 객체나 배열을 생성하면 개별 요소가 각각 동일하더라도 React는 변경된 것으로 간주한다. 얕은비교 기본 타입 데이터의 경우 값이 동일한지만 비교하고, 객체의 경우 참조값만 비교한다. => 그래서 객체를 state로 사용하게 될 경우, 값이 같더라도 참조값이 다르기 때문에 재렌더링이 발생한다. const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(obj1 === obj2); // false https://dori-coding.tist..

렌더링이란 ? 쉽게말하면, 화면에 UI요소가 그려지는 or 보여지는 동작을 말한다. 더 딥하게 설명하자면, 코드상에서 props 와 state 에 기반하여 컴포넌트가 그려지는 과정이 될 것이다. 위의 화면에서 사용자가 검색어를 입력하고, 리스트를 추가하고, 체크하고, 삭제하는 과정을 렌더링된다 라고 말할 수 있다. 리액트의 컴포넌트 렌더링 순서 리액트에서 컴포넌트 렌더링 순서는 최하단 컴포넌트 부터 시작해서 최상단 컴포넌트가 마지막 순서가 된다.

원문: https://javascript.plainenglish.io/stop-using-usememo-now-e5d07d2bbf70 번역: https://velog.io/@lky5697/stop-using-usememo-now 을 읽고 재정리하였습니다. useMemo 란 useMemo 는 알다시피 계산결과를 memorization (유사하게, 기억한다 라고 생각하자.) 한다. const result = useMemo(() => { // running.... return value }, [deps]) 코드가 위와 같을 때, deps 로 들어온 state 값에 따라 side effect 로 useMemo 안의 로직이 실행되고 그 결과값을 리턴하게 된다. deps 의 값에 따라 리턴되는 value 값이 다를..