React (3) 썸네일형 리스트형 HOOK State 컴포넌트의 상태 const [state, setState] = useState(초기값); 변수들의 값이 유지됨 State에 변화가 발생하고 렌더링이 되어도 Ref의 값은 그대로 유지됨 따라서 변경시 렌더링이 발생하면 안되는 값들을 저장할 때 사용함!! 2. DOM 요소에 접근 컴포넌트 최적화를 위해 사용되는 Hook => useMemo, useCallback useMemo useMemo에서 Memo란 Memoization 컴포넌트가 업데이트 되고 렌더링 될때, 업데이트가 필요없는 불필요한 컴포넌트까지 같이 리렌더링 되는 경우가 있다 이런 경우 성능이 떨어지게 되는데, 이를 방지하기 위해 사용하는 것이 useMemo이다. useMemo는 연산된 값을 렌더링 시 재사용할 떄 쓰인다 기본형태: us.. React - List와 Key List의 항목 별로 key를 부여해야지 특정 항목만 업데이트 된다. key가 없으면 전체 항목이 업데이트 됨으로 비효율적 key에는 index값을 넣으면 안됨(공식문서에서 최대한 지양하라고 기재됨) key는 고유해야되며 중복되서는 안됨 Virtual DOM(가상돔) Viirtual DOM 가상돔 DOM(Document Object Model) getElementById()나 querySelector()와 같은 API를 사용하여 DOM 내부에 접근해서 조작한다 React의 가상돔은 실제돔이 아닌 실제돔의 복사본 이 실제돔의 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어 있음 가상돔은 실제돔과 다르게 직접적으로 접근할 수 없고 따라서 수정할 수 없음 React는 항상 두 가지 형태의 가상돔 구조를 가지고 있음 1. 렌더링 이전 화면 구조(내용)를 나타내는 가상돔 2. 렌더링 이후에 보이게 될 화면 구조(내용)를 나타내는 가상돔 React는 state가 변경될 때마다 화면이 새로 렌더링 됨. React는 렌더링이 발생 될 상황에 놓일 때마다 새로운 화면에 들어갈 .. 이전 1 다음
