FrontEnd/React 관련자료14 에러노트 - Can't perform a React state update on an unmounted component 배경 ant-design 을 사용해 운영중인 프로젝트 에서 작업을 하던 도중, 아래와 같은 오류가 발생했다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 경고, 언마운티드된 컴포넌트에 대해선 상태를 업데이트할 수 없다. 이 작업은 수행되지 않지만, 메모리 누수가 발생하게 된다. 고치려면, 모든 subscription과 비동기 작업을 useEffe.. 2021. 3. 12. Typescript&Redux 2일차 정리 JS 기본 개념 훑기 JS에는 7가지 데이터 타입이 있다. primitive 타입 (Number, String, Boolean, Null, Undefined, Symbol) 그외는 Object(객체) 프로그래밍 언어는 서양에서 만들어졌기 때문에 `합리주의, 논리주의` 등의 사상에 영향을 받아 설계되었다. 그래서 기저에는 `1은 1이다, 2는 2다! 이는 절대불변이며 틀리지 않는 주장이다!` 와 같이 공리에 초점이 맞춰져 있다. 이러한 사상을 기반으로 시스템 및 프로그래밍 언어가 만들어져왔다. JS에 이를 적용한다면? `값`은 `변수`라는 것에 넣을 수 있다. `객체`도 `값`이고 `함수`도 `값`이다. 이들도 변수에 넣을 수 있다! JSX로 Virtual DOM 만듦 이 때 변경사항 있으면 새로운 Vir.. 2020. 9. 8. Typescript&React 강의 1일차 정리 질문) 강사님이 생각하는 CRA로 작성하였을 때의 이점과 단점? 이점: 간단하고 웬만한건 다 세팅되어 있다. 단점: 그 외의 모든 것들;; CRA가 제공하지 않는 구성들을 세팅하는 게 상당히 까다로움 초기에는 CRA로만 사용했을 때의 문제점을 느끼지 못하지만 프로젝트가 완성단계에 들어갈 때쯤에 문제를 느끼는 경우가 많음. CRA 커뮤니티 개발자들의 성향이 보수적임. 어떤 불편함을 느껴도 이를 반영시키는데 상당한 시간이 들어감 다양한 환경에 대한 대응이 어려움 - Test product, dev 환경, product 환경 등 여러가지 환경에 따라 앱이 빌드 되야하는상황이 있지만 CRA가 제공하는것은 local과 product 뿐. 다른 필요한 요소들을 주입할 수 없음. 그래서 강사님은 실제 product를.. 2020. 9. 4. React가 좋은 점(갑자기 생각난 거) 상태관리 하나의 데이터를 여러 파일에서 사용해야 되는 경우가 있는데 React를 사용하면 컴포넌트 간에 상태를 공유할 수 있기 때문에 이런 점을 편하게 해결 코드분리 화면의 구성요소 마다 컴포넌트로 분리하여 관리할 수 있음. JS로만 구현할 때는 영역을 잡아 따로 개발하는 것은 가능하지만 각 영역별로 나눈 파일을 간편하게 관리 하기는 쉽지 않음. React는 체계가 있기 때문에 보다 간편함. 또한 코드를 분리할 수 있기 때문에 유지보수 하기에 매우 편함 컴포넌트 생성 및 삭제될 때 원하는 이벤트를 줄 수 있는 거 JS로 구현할 때는 컴포넌트 상태를 감지하여 이벤트를 주는 것이 까다로움 React는 각 상태에 접근할 수 있는 Context API를 제공하여 개발할 때 유연하게 할 수 있게 됨 2020. 7. 9. 리액트 기본 과정 정리 - 10 [앞으로의 공부 방향] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 리액트는 따지고보면 정말 간단한 라이브러리 입니다. 지금까지 공부해본 것들을 요약해보면 재사용 가능한 컴포넌트를 만듭니다. props 는 부모에게서 전달받는 값입니다. state 는 자기 자신이 지니고 있는 데이터입니다 props 나 state 가 바뀌면 컴포넌트는 리렌더링 합니다. LifeCycle API 를 통해 컴포넌트 Mount, Update, UnMount 전후로 처리 할 로직을 설정하거나 리렌더링을 막을 수 있습니다. 스타일링 리액트 컴포넌트를 스타일링 하는 방법은 여러가지 입니다. 일단, 가장 기본적인 방법으로는 일반 .css 파일을 만들.. 2019. 12. 13. 리액트 기본 과정 정리 - 9 [불변성을 지키는 이유와 업데이트 최적화] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글에서는 불변성을 왜 유지하는지, 그리고 컴포넌트 업데이트 성능 최적화는 어떻게 이뤄지는지에 대해서 알아보겠습니다. 데이터 필터링 구현하기 우선 불변성의 중요성을 알아보는 과정에서 이름으로 전화번호를 찾는 데이터 필터링 기능을 구현해보겠습니다. 일단 App 컴포넌트에서 state에 기본값을 등록해놓겠습니다. 컴포넌트 업데이트 최적화 작업을 할 것인데 매번 값을 등록하는 것보다 사전에 값이 준비되어 있는 것이 작업할 때 편하.. 2019. 12. 13. 리액트 기본 과정 정리 - 8 [배열 다루기 (2) 제거와 수정] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글에서는 강의에서 중요하다고 생각되는 부분만 담았으니 참고 부탁드립니다. 데이터 제거 지난 섹션에서 배열에 데이터를 추가하는 방법과 배열 내부의 내용들을 화면에 보여주는 기능을 구현하였습니다. 이번에는 배열 내부의 데이터를 제거하는 방법과 수정하는 방법을 알아보겠습니다. 이 작업이 어려운 것은 아니지만 불변성을 유지하면서 작업을 처리해줘야 하기 때문에 기존에 하던 것과는 조금 다를 수 있습니다. 기존의 배열 데이터를 건들지.. 2019. 12. 12. 리액트 기본 과정 정리 - 7 [배열 다루기 (1) 생성과 렌더링] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글은 개인적으로 강의에서 중요하다고 생각되는 부분만 담았으므로 참고 부탁드립니다. 데이터 추가 우리 애플리케이션의 상태 데이터는 App 컴포넌트에서 관리하겠습니다. 나중에 가면 상태를 컴포넌트에서 분리하여 따로 관리하는 방법도 있습니다. 앞서 자식 컴포넌트인 PhoneForm 에서 받은 데이터를 App 의 상태에 추가하겠습니다. 이를 위해 우선 App 컴포넌트의 state에 information 배열을 만듭니다. 이 배열에.. 2019. 12. 11. 리액트 기본 과정 정리 - 6 [input 상태 관리하기] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글은 개인적으로 강의에서 중요하다고 생각되는 부분만 담았으므로 참고 부탁드립니다. input 상태 관리하기 지금까지 배운 것들을 정리해보면 리액트 기본 개념 JSX 문법 props와 state LifeCycle API 입니다. 이것만으로도 많은 것을 만들 수 있습니다. 리액트는 자바스크립트와 매우 가깝습니다. 그래서 자바스크립트를 잘 알고 있으면 리액트를 배울 때도 큰 어려움이 없습니다. 앞으로 전화번호부 프로젝트를 만들면.. 2019. 12. 11. 이전 1 2 다음
