전체 글
-
23. Context API 를 사용한 전역 값 관리 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 5. 14:43
ContextSample 컴포넌트에서 text라는 pros에 "Good"을 GrandParent 컴포넌트에게 전달하면, GrandParent 컴포넌트에서 Parent 컴포넌트에게, 다시 Parent 컴포넌트에서 Child 컴포넌트에게 전달해서 화면에 "Good"이 보여진다. * pros의 전달 과정 : ContextSample → GrandParent → Parent → Child 구조는 다음과 같다. /src/ContextSample.js : import React from "react"; function Child({ text }) { return {text} } function Parent({ text }) { return } function GradParent({ text }) { return }..
-
22. 커스텀 Hooks 만들기 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 3. 23:45
컴포넌트를 만들다보면, 반복되는 로직이 자주 발생합니다. 예를 들어서 input 을 관리하는 코드는 관리 할 때마다 꽤나 비슷한 코드가 반복되죠. 이번에는 그러한 상황에 커스텀 Hooks 를 만들어서 반복되는 로직을 쉽게 재사용하는 방법을 알아보겠습니다. 커스텀 Hooks 를 만들 때에는 보통 use 라는 키워드로 시작하는 파일을 만들고 그 안에 함수를 작성합니다. 커스텀 Hooks 를 만드는 방법은 굉장히 간단합니다. 그 안에서 useState, useEffect, useReducer, useCallback 등 Hooks 를 사용하여 원하는 기능을 구현해주고, 컴포넌트에서 사용하고 싶은 값들을 반환해주면 됩니다. src 디렉터리에 hooks 라는 디렉터리를 만들고, 그 안에 useInputs.js 라는..
-
21. App 컴포넌트를 useReducer 로 구현하기 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 1. 22:57
이번에는, App 컴포넌트에 있던 상태 업데이트 로직들을 useState 가 아닌 useReducer 를 사용하여 구현해보겠습니다. 우선, App 에서 사용 할 초기 상태를 컴포넌트 바깥으로 분리해주고, App 내부의 로직들을 모두 제거해주세요. 우리가 앞으로 차근차근 구현 할 것입니다. 먼저, reducer 함수의 틀만 만들어주고, useReducer 를 컴포넌트에서 사용해보세요. /src/App.js : import React, { useRef, useReducer, useMemo, useCallback } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function countActiveU..
-
20. useReducer 이해하기 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 1. 20:53
우리가 이전에 만든 사용자 리스트 기능에서의 주요 상태 업데이트 로직은 App 컴포넌트 내부에서 이루어졌었습니다. 상태를 업데이트 할 때에는 useState 를 사용해서 새로운 상태를 설정해주었는데요, 상태를 관리하게 될 때 useState 를 사용하는것 말고도 다른 방법이 있습니다. 바로, useReducer 를 사용하는건데요. useState 는 설정하고 싶은 다음 상태를 직접 지정해주는 것으로 상태를 업데이트하는 반면, useReducer 는 액션이라는 개체를 기반으로 상태를 업데이트 합니다. 여기서 액션 객체는 업데이트할 때 참조하는 객체입니다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고..
-
19. React.memo 를 사용한 컴포넌트 리렌더링 방지 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 6. 30. 23:14
이번에는, 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 React.memo 라는 함수에 대해서 알아보겠습니다. 이 함수를 사용한다면, 컴포넌트에서 리렌더링이 필요한 상황에서만 리렌더링을 하도록 설정해줄수있어요. 사용법은 굉장히 쉽습니다. 그냥, 감싸주시면 돼요. 우선 CreateUser 부터 적용을 해주겠습니다. /src/CreateUser.js : ... export default React.memo(CreateUser); 참 쉽죠? UserList 와 User 컴포넌트도 적용을 해줄게요. /src/UserList.js : const User = React.memo(function User({ user, onRemove, onToggle..
-
18. useCallback 을 사용하여 함수 재사용하기 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 6. 30. 22:27
useCallback 은 우리가 지난 시간에 배웠던 useMemo 와 비슷한 Hook 입니다. useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다. 이전에 App.js 에서 구현했었던 onCreate, onRemove, onToggle 함수를 확인해봅시다. const onCreate = () => { const user = { id: nextId.current, username, email }; setUserInfo(userInfo.concat(user)); setInputs({ username: '', email: '' }); nextId.current += 1; }; const onRemove = id =>..
-
17. useMemo 를 사용하여 연산한 값 재사용하기 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 6. 30. 21:58
이번에는 성능 최적화를 위하여 연산된 값을 useMemo라는 Hook 을 사용하여 재사용하는 방법을 알아보도록 하겠습니다. App 컴포넌트에서 다음과 같이 countActiveUsers 라는 함수를 만들어서, active 값이 true 인 사용자의 수를 세어서 화면에 렌더링을 해보세요. /src/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..
-
16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 6. 30. 21:34
이번에는 useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법에 대해서 알아보겠습니다. 1. 화면이 처음 떴을때 실행. - deps에 [] 빈배열을 넣을 때 - life cycle중 componentDidmount처럼 실행 2. 화면이 사라질때 실행(clean up함수). - componentWillUnmount처럼 실행 3. deps에 넣은 파라미터값이 업데이트 됬을때 실행. - componentDidUpdate처럼 실행. 마운트 / 언마운트 우선, 마운트/언마운트를 관리해보겠습니다. /src/UserList.js : import React, { u..