728x90 728x90 Frontend54 React useMemo 개념 및 사용 방법 React useMemo 개념 및 사용 방법 리스트를 렌더링 할 때 정렬해서 보여주고 싶을 때가 있다. 아래와 같이 리스트를 렌더링 하면 리스트가 오름차순으로 정렬되어 렌더링 될 것이다. const TestList = (props) => { const { items } = props; const sortedList = () => { console.log('Items sorted'); return items.sort((a, b) => a - b); }; console.log('TestList RUNNING'); return ( {props.title} {sortedList.map((item) => ( {item} ))} ); }; export default React.memo(TestList); 하지만 때.. 2023. 2. 1. React useCallback 개념 및 사용 방법 React useCallback 개념 및 사용 방법 useCallback React.memo를 통해서 Button 컴포넌트가 재실행되는 것을 막고자 한다. 하지만 아래와 같이 코드를 작성하면 Button을 클릭할 때 Button컴포넌트가 재실행된다. function App() { const [title, setTitle] = useState(''); const changeTitleHandler = () => { setListTitle('New Title'); } return ( Change Title ); } const Button = (props) => { console.log('Button RUNNING'); return ( {props.children} ); }; export default Reac.. 2023. 1. 31. React memo 개념 및 사용 방법 React memo 개념 및 사용 방법 상위 컴포넌트로부터 하위 컴포넌트로 계속 뻗어나가는 컴포넌트 트리를 보면 한 가지 의문이 생긴다. 연결된 모든 컴포넌트 함수가 재실행되면 굉장히 많은 함수가 가상 비교가 된다는 것인데 성능에 영향을 미치지는 않을까 하는 질문 말이다. 이런 작업은 확실히 어느 정도의 성능을 필요로 하며 그런 식으로 모든 자식 컴포넌트를 재실행하는 것은 낭비다. 물론 가상 비교이기 때문에 리액트가 이런 식의 실행 및 비교 작업에 최적화되어 있어 간단한 어플리케이션에서는 전혀 문제가 되지 않지만 더 큰 어플리케이션이라면 좀 더 최적화가 필요하다. 따라서, 개발자는 특정한 상황일 경우에만 하위 컴포넌트를 재실행하도록 리액트에 지시할 수 있다. 이런 특정 상황은 컴포넌트가 받은 props가.. 2023. 1. 30. 리액트가 작동하는 방식 리액트가 작동하는 방식 리액트의 핵심은 컴포넌트라는 이며 우리는 사용자 인터페이스를 구축하기 위해 컴포넌트를 사용하고 리액트는 이 컴포넌트 개념을 사용한다. 즉 리액트는 컴포넌트를 통해 사용자 인터페이스를 효과적으로 구성하며 이에 대한 업데이트 역시 컴포넌트를 통해 한다. 여기에서 중요한 개념이 하나 나오는데 React DOM이다. React DOM은 웹에 대한 인터페이스이며 리액트는 어떻게 컴포넌트를 다루는지는 알고 있지만 리액트는 웹을 모른다. 이는 실제 HTML 요소들을 화면에 표시해주는 리액트 DOM이 고려할 문제이다. 리액트는 컴포넌트 관리, 상태 관리, 어떤 객체의 상태와 컴포넌트가 바뀌어야 하는지를 확인하고 컴포넌트의 변경 전후의 상태를 확인하는 라이브러리일 뿐입니다 React DOM은, 브.. 2023. 1. 29. 이전 1 ··· 8 9 10 11 12 13 14 다음 728x90 728x90
