본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 useReducer 이해하기 이전에 만든 사용자 리스트 기능에서의 주요 상태 업데이트 로직은 App 컴포넌트 내부에서 이루어졌다. 상태를 업데이트 할 때에는 useState 를 사용해서...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 19. React.memo 를 사용한 컴포넌트 리렌더링 방지 이번에는, 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 React.memo 라는 함수에 대해 알아보자. 이 함수를 사용한다면,...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 18. useCallback 을 사용하여 함수 재사용하기 useCallback 은 useMemo 와 비슷한 Hook 이다. useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 ...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 17. useMemo 를 사용하여 연산한 값 재사용하기 이번에는 성능 최적화를 위하여 연산된 값을 useMemo 라는 Hook 을 사용하여 재사용하는 방법을 알아보자. App 컴포넌트에서 다음과 같이 countActiveUsers 라는 함수를 만들어서,...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 이번에는 useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 pro...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 15. 배열에 항목 수정하기 이번에는, 배열 항목을 수정하는 방법을 알아보자. User 컴포넌트에 계정명을 클릭했을때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현을 해보자. 우선, App 컴포넌트의 users 배열 안의 객체 안에 ...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 14. 배열에 항목 제거하기 이번에는 배열에 항목을 제거 할 때 어떻게 해야 하는지 알아보자. 우선, UserList 에서 각 User 컴포넌트를 보여줄 때, 삭제 버튼을 렌더링해주겠다. UserList.js import React from ...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 13. 배열에 항목 추가하기 이번에는 배열에 새로운 항목을 추가하는 방법을 알아보자. 우선, input 두개와 button 하나로 이루어진 CreateUser.js 라는 컴포넌트를 src 디렉터리에 만들어보자. CreateUser.js imp...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 12. useRef 로 컴포넌트 안의 변수 만들기 컴포넌트에서 특정 DOM 을 선택해야 할 때, ref 를 사용해야 한다고 배웠었다. 그리고, 함수형 컴포넌트에서 이를 설정 할 때 useRef() 훅을 사용하여 설정한다고 배웠었다. useRef() Ho...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 11. 배열 렌더링하기 이번에는 리액트에서 배열을 렌더링하는 방법을 알아보자. 아래와 같은 배열이 있다고 가정해보자. const users = [ { id: 1, username: 'velopert', email: 'publi...