728x90 Frontend15 [React] Hooks : optimizing 성능 최적화(3) - useCallback useCallback이란? useCallback은 useMemo와 비슷한 Hook입니다. useMemo는 특정 결괏값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 함수입니다. useCallback의 사용법 const memoizedCallback = useCallback(function, deps); useCallback은 첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 형태의 함수 실행 조건의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해 줍니다. useCallback 안에 첫 번째 매개변수로 구현하고자 하는 함수가 들어오고, 두 번째 매개변수 자리에는 의존성 배열이 들어갑니다. useCallback을 사용하면, 함수.. 2022. 12. 26. [React] onClick 이벤트 발생 시 함수 실행하기 onClick 함수란? 사용자가 요소를 클릭했을 때 발생하는 이벤트입니다. 오류 발생 상황 컴포넌트가 렌더링 될 때 db에 있는 모든 자료들이 삭제가 되는 상황입니다. 코드 function CommentList() { const [comments, setComments] = useState(null); const fetchComments = async () => { const { data } = await axios.get("http://localhost:3001/comments"); setComments(data); }; const onDeleteComments = (id) => { dispatch(deleteComment(id)); axios.delete(`http://localhost:3001/co.. 2022. 12. 23. [React] Hooks : optimizing 성능 최적화(2) - useMemo useMemo란? useMemo는 컴포넌트의 성능을 처적화시킬 수 있는 대표적인 react hooks 중 하나입니다. useMemo에서 Memo는 Memoizaion을 뜻합니다. Memoization이란 기존에 수향하 연산의 결과값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다. 🔥기억하기!! 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여 실행되는 것을 뜻합니다. 심지어 하위 컴포넌트에 최적화 설정을 해주지 않으면 부모에게 받은 props가 변경되지 않았더라도 리렌더링 됩니다. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받은 props가 변경될 때마다 리렌더링 됩니다. 심지어 하위 컴포넌트에 최적화 설정을 하지 않으면 부모에게 받는 pro.. 2022. 12. 22. [React] Hooks : optimizing 성능 최적화(1) - React.memo( ) React.memo( )란? 우선 memo( )는 훅이 아닙니다. 하지만 뒤에 공부할 useCallback이나 useMemo를 사용하기 위해서는 반드시 알아야 하는 개념입니다. React.memo( )는 Memorization(메모제이션) 기법으로 동작하며, 고차 컴포넌트(Higher Order Component, HOC)입니다. 컴포넌트가 props로 동일한 결과를 렌더링 하면, React.memo를 호출하고 결과를 Memoizaing(메모이징)하도록 래핑 하여 경우에 따라 성능 향상을 할 수 있습니다. 💥쉽게말해 화면에서 변경되는 부분이 없음에도 불구하고 아래의 이유로 화면이 다시 렌더링 될 때, 그 불필요한 렌더링을 줄이는 것으로 리액트 프로젝트의 부하를 줄이고 퍼포먼스를 향상시킬 수 있다는 뜻입니.. 2022. 12. 20. [React] Redux(3) [Redux Toolkit] Redux Toolkit이란? Redux Toolkit은 우리가 이전에 배운 Redux를 개량한 것으로 생각하면 됩니다. Redux를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 생기기 시작했고, Redux 팀에서 이것을 수용하여 코드는 적게, 그리고 Redux를 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 Redux Toolkit입니다. 줄여서 RTK라고도 합니다. ⭐그래서 Redux와 Redux Toolkit은 전혀 다른가? ▶ Redux Toolkit은 우리가 배웠던 Redux와 구조나 패러다임이 모두 똑같습니다. 즉 새로운 것이 아닙니다. 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 우리가 일일이 손으로 만들어 줘야 했던.. 2022. 12. 20. [React] React-Router-Dom react-router-dom이란? react-router-dom이란 react의 화면 전환을 도와주는 역할을 합니다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다면, 리액트에서는 React-Router 를 통해 Link 태그를 사용하여 화면을 전환합니다. react는 변화가 있는 컴포넌트만 업데이트하여 효율적으로 성능을 관리하는 구조로 페이지 이동 시 굳이 화면 전체를 새로고침 할 필요가 없기 때문입니다. React-Router-Dom 사용하기 1. 패키지 설치 yarn add react-router-dom 2. 페이지 컴포넌트 생성 우선 여러개의 페이지를 배우는 것을 배우는 것이니, 가상의 여러페이지 Home, About, Contact, Works 만듭니다. 3. Router.js 생성.. 2022. 12. 15. 이전 1 2 3 다음 728x90
