전체 글
-
31. componentDidCatch 와 Sentry 연동 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 9. 22:01
componentDidCatch 를 사용해서 앱에서 에러가 발생했을 때 사용자에게 에러가 발생했음을 인지시켜줄 수 는 있지만, componentDidCatch 가 실제로 호출되는 일은 서비스에서 "없어야 하는게" 맞습니다. 만약에 우리가 놓진 에러가 있다면, 우리가 이를 알아내어 예외 처리를 해주어야 합니다. 우리는 발견해내지 못했지만, 사용자가 발견하게 되는 그런 오류들이 있겠죠? 그럴 때는 componentDidCatch 에서 error 와 info 값을 네트워크를 통하여 다른 곳으로 전달을 해주면 됩니다. 다만 이를 위해서 따로 서버를 만드는건 굉장히 번거로운 작업입니다. 굉장히 괜찮은 솔루션으로, Sentry 라는 상용서비스가 있습니다. 돈내고 쓰면 더 많은 작업을 할 수 있지만, 무료 모델로도 ..
-
30. componentDidCatch 메서드 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 8. 23:22
이번에는, componentDidCatch 라는 생명주기 메서드를 사용하여 리액트 애플리케이션에서 발생하는 에러를 처리하는 방법을 알아보도록 하겠습니다. 먼저, 이번 튜토리얼을 진행 하기 위하여 새로운 프로젝트를 만들어주세요. $ npx create-react-app error-catch 그 다음에, 해당 디렉터리를 에디터로 열고, 개발 서버를 시작해주세요. $ cd error-catch $ yarn start 리액트 앱에서 에러가 발생하는 상황 리액트 앱이 어떤 상황에서 에러가 발생하게 되는지 알아봅시다. 우선, User.js 라는 파일을 src 디렉터리에 생성하여 다음과 같이 컴포넌트 코드를 작성해보세요. /src/User.js : import React from 'react'; function Us..
-
29. LifeCycle Method - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 8. 22:36
LifeCycle Method 는 한국어로 "생명주기 메서드" 라고 부릅니다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다. 생명주기 메서드는 클래스형 컴포넌트에서만 사용 할 수 있는데요, 우리가 기존에 배웠었던 useEffect 랑 은근히 비슷하다고 생각하시면 됩니다. (물론 작동방식은 많이 다릅니다. 커버하지 않는 기능들도 있습니다.) 리액트를 배우시게 될 때, 이 개념에 대하여 너무 많이 시간을 쏟지 않는 것을 권장드립니다. 앞으로 사용 할 일이 별로 없을 것입니다. 다만 어떤것들이 있는지만 알아두고, 나중에 사용 해야 할 일이 있다면 매뉴얼 을 보고 사용 할 수 있는 ..
-
28. 클래스형 컴포넌트의 state 와 setState - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 7. 22:30
이번에는 우리가 이전에 만들었던 Counter 컴포넌트를 클래스형 컴포넌트로 작성해봅시다. 함수형 컴포넌트로는 다음과 같은 형태였지요? /src/Counter.js : import React, { useReducer } from 'react'; function reducer(state, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } } function Counter() { const [number, dispatch] = useReducer(reducer, 0); const onIncrease = () => { dispat..
-
27. 클래스형 컴포넌트 소개 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 7. 21:33
이제는 잘 사용하지 않지만, 그래도 클래스형 컴포넌트에 대해서 알아봅시다! 앞으로 이 강의에서 클래스형 컴포넌트를 사용하는 일은 거의 없겠지만 그래도 알아둘 필요는 있습니다. 여러분이 나중에 클래스형 컴포넌트를 사용하는 프로젝트를 유지보수하게 되는 일이 있을 수도 있고, 함수형 컴포넌트 + Hooks 로 못하는 작업이 2개정도 있긴 합니다. 추가적으로, 옛날에 만들어진 리액트 관련 라이브러리의 경우에는 Hooks 지원이 아직 안되는 경우도 있고, react-native 관련 라우터 라이브러리인 react-native-navigation 의 경우에도 클래스형 컴포넌트를 어쩔 수 없이 써야 하는 일이 종종 있습니다. 앞으로 강의에서 사용하는 일은 거의 없을거고, 여러분도 새로운 컴포넌트를 작성 할 땐 주로 ..
-
26. Reducer에서 Immer 사용하기 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 6. 23:15
미리 말씀을 드리자면, Immer 를 사용해서 간단해지는 업데이트가 있고, 오히려 코드가 길어지는 업데이트 들이 있습니다. 예를들어서 우리가 만들었던 프로젝트의 상태의 경우 users 배열이 객체의 깊은곳에 위치하지 않기 때문에 새 항목을 추가하거나 제거 할 때는 Immer 를 사용하는 것 보다 concat 과 filter 를 사용하는것이 더 코드가 짧고 편합니다. 하지만, 사용법을 잘 배워보기 위하여 해당 업데이트도 이번 강좌에서 Immer 를 사용하여 처리를 해주겠습니다. /src/App.js : // ... function reducer(state, action) { switch (action.type) { case 'CREATE_USER': return produce(state, draft => ..
-
25. Immer 를 사용한 더 쉬운 불변성 관리 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 6. 22:10
리액트에서 배열이나 객체를 업데이트 해야 할 때에는 직접 수정 하면 안되고 불변성을 지켜주면서 업데이트를 해주어야 합니다. 예를 들자면 다음과 같이 하면 안되고 const object = { a: 1, b: 2 }; object.b = 3; 다음과 같이 ... 연산자를 사용해서 새로운 객체를 만들어주어야 하죠. const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; 배열도 마찬가지로, push, splice 등의 함수를 사용하거나 n 번째 항목을 직접 수정하면 안되고 다음과 같이 concat, filter, map 등의 함수를 사용해야 합니다. const todos = [ { id: 1, text: '할 일 #1', done: tru..
-
24. UserDispatch Context 만들기 - 리액트 입문 | 벨로퍼트Front-end/React.js 2020. 7. 5. 16:30
우리가 현재 만들고 있는 프로젝트를 보면, App 컴포넌트에서 onToggle, onRemove 가 구현이 되어있고 이 함수들은 UserList 컴포넌트를 거쳐서 각 User 컴포넌트들에게 전달이 되고 있죠. 여기서 UserList 컴포넌트의 경우에는 onToggle 과 onRemove 를 전달하기 위하여 중간 다리역할만 하고 있습니다. /src/UserList.js : function UserList({ users, onRemove, onToggle }) { return ( {users.map(user => ( ))} ); } UserList 에서는 해당 함수들을 직접 사용하는 일도 없죠. 지금과 같이 특정 함수를 특정 컴포넌트를 거쳐서 원하는 컴포넌트에게 전달하는 작업은 리액트로 개발을 하다보면 자주..