TIL (2) 썸네일형 리스트형 2023.8.24일 TIL useMemo()로 최적화 하기 // useMemo 사용 전 // App.js function App() { const [listTitle, setListTitle] = useState('My List'); const changeTitleHandler = useCallback(() => { setListTitle('New Title'); }, []); return ( Change List Title ); } export default App; import React from 'react'; import classes from './DemoList.module.css'; const DemoList = (props) => { const sortedList = props.items.sort((a,b) => a.. 2023.8.23 TIL 리액트가 실제로 동작하는 방식 리액트는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이며, 리액트의 핵심은 컴포넌트이다. 여기서 중요한 개념 중의 하나가 리액트 DOM 이란 것이다. 리액트 DOM은 웹에 대한 인터페이스이다. 리액트는 컴포넌트를 어떻게 다루는지 알고 있지만, 브라우저와는 전혀 관계가 없고 리액트는 웹을 모른다. 이런 것들은 실제 HTML 요소들을 화면에 표시해주는 리액트 DOM이 고려할 것들이다. 리액트 DOM은 브라우저의 일부인 실제 DOM에 대한 작업을 한다. 이에 반해 리액트는 컴포넌트만 신경쓴다. props를 관리하고, 부모-자식 컴포넌트간의 통신을 연결해주고, 내부의 데이터인 상태라는 것을 다룬다. 화면에 뭔가를 그리려 할때는 리액트는 리액트 DOM에게 알리고, 리액트 D.. 이전 1 다음