반응형 JavaScript49 19.useReducer 를 사용하여 상태 업데이트 로직 분리하기 useReducer 이해하기 상태를 업데이트 할 때에는 useState 를 사용해서 새로운 상태를 설정하였는데, 상태를 관리하게 될 때 useState 를 사용하지 않고 → useReducer 를 사용하는 방법이 있음 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있음 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있음 App 컴포넌트에서 useReducer 를 사용해보기전에 우리가 useState 를 처음 배울 때 만들었던 Counter.js 컴포넌트에서 useReducer 를 적용해 보겠음 function reducer(state, action) { // 새로운 상태를 만드는 로직 // const .. 2021. 8. 2. 18.React.memo 를 사용한 컴포넌트 리렌더링 방지 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 React.memo 라는 함수 이 함수를 사용한다면, 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정해줄수있음 CreateUser.js import React from 'react'; const CreateUser = ({ username, email, onChange, onCreate }) => { return ( 등록 ); }; export default React.memo(CreateUser); UserList.js import React from 'react'; const User = React.memo(function User({ user, onRemove, onTogg.. 2021. 7. 31. 17.useCallback 을 사용하여 함수 재사용하기 useCallback 은 useMemo 와 비슷한 Hook이다. useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용 const onCreate = () => { const user = { id: nextId.current, username, email }; setUsers(users.concat(user)); setInputs({ username: '', email: '' }); nextId.current += 1; }; const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬 // = user.id 가 id 인 것을 제거함 setUsers(us.. 2021. 7. 29. 16.useMemo 를 사용하여 연산한 값 재사용하기 성능 최적화를 위하여 연산된 값을 useMemo라는 Hook 을 사용하여 재사용하는 방법 App.js import React, { useRef, useState } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function countActiveUsers(users) { console.log('활성 사용자 수를 세는중...'); return users.filter(user => user.active).length; } function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { usernam.. 2021. 7. 27. 이전 1 2 3 4 5 6 ··· 13 다음 반응형