![]()
React.memo()란? React는 먼저 컴포넌트를 랜더링한 뒤 , 이전에 랜더링 된 겨로가와 비교하여 DOM 업데이트를 결정 만약 렌더링 결과가 이전과 다르다면, React는 DOM 을 업데이트 이 과정에서 만약 컴포넌트가 React.memo()로 둘러 쌓여 있다면, React는 컴포넌트를 렌더링하고 결과를 메모이징 함 그리고 다음 렌더링이 일어날 떄 랜더링하는 컴포넌트의 props가 같다면, React는 메모이징된 내용을 재사용 React Memo를 사용을 지양해야한 상황 랜더링 될 떄 props가 다른 경우가 대부분인 컴포넌트를 생각해보면, 메모이제이션 기법의 이점을 얻기 힘듬 props가 자주 변하는 컴포넌트를 React.memo()로 래핑 할지라도, React는 두가지 작업을 리 렌더링 할 ..
https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install react-icons --save Usa react-icons.github.io
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 035a41c4e on 7/10/2023. chrome.google.com 개발자 도구에서 react 구조 볼 수 있게 도와주는 툴
[ 상태 관리 ] useState()는 컴포넌트에서 바뀌는 값을 관리하는 함수입니다. 리액트 컴포넌트에서 동적인 값을 상태(state)라고 부르는데, 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에 상태 관리가 필요합니다. React Hooks이 나오기 전까지는 클래스 기반의 컴포넌트를 사용하여 상태값을 관리할 수 있었지만, 클래스 기반의 컴포넌트는 유지 보수가 힘들다는 단점이 있습니다. 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었는데요! 이때 사용하는 함수가 useState() 함수입니다. [ useState ] useState()는 상태의 초기값을 인수로 전달 받아 호출됩니다. 이때의 반환값은 상태를 나타내는 배열로, 배열의 첫..
![]()
https://ko.legacy.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.legacy.reactjs.org class 만드는 대신 hook 이라는 함수로 대체 https://ko.legacy.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 리엑트는 라이브러리 jQuery랑 node랑 동일한 라이브러리 https://chrome.google.com/webstore/detail/react..
