ETC
패스트캠퍼스 챌린지 19일차 - 리액트 Date 라이브러리 비교(Day.js / date-fns / moment.js)
어제 들었던 강의 부분에 이어서 moment.js에서 더이상 업데이트를 안하기로 선언하고 이를 대체할 라이브러리를 배워보았다. (moment.js 에서 추천한 LUXON, Day.js, date-fns, js-Joda 중에서 가장 많이 사용하는 Day.js 와 date-fns를 실습했다.) Day.js Day.js는 moment.js와 다르게 2KB의 작은 size를 갖는다. (모멘트는 200KB가 넘음) 여러 기능을 플러그인으로 분류해놔서인지 기본 용량이 작다. (import되는 라이브러리의 size는 vscode extension Import Cost 로 확인 가능하다.) moment.js와 사용법이 거의 똑같기 때문에 대체하기가 쉽고, Immutable 하지만 Tree shaking은 지원하지 않는..
패스트캠퍼스 챌린지 18일차 - 리액트 라이브러리 intro, Moment.js
오늘은 리액트를 사용하면서 JSX, 컴포넌트의 상태관리, 렌더링 최적화, 성능 확인 외에 직접 구현해야될 기능들을 리액트 생태계에서 잘만들어둔 라이브러리를 찾아 적용하는 과정에 대해 배웠다. 라이브러리 적용 과정 사용 목적 > 검색 > 사용법 파악 > 적용 - 리액트를 많이 사용해보진 않았지만 동일한 기능을 제공하는 라이브러리가 굉장히 많은 것을 뼈저리게 느꼈던 적이 있다. 만들어져 있는 UI를 구매해서 사용한 적이 있는데 form 컴포넌트 폴더이름이 redux-form 과 다른 것으로 두가지가 있었다. 처음엔 상태관리 라이브러리 redux를 사용하는 컴포넌트인 줄 알았는데 그게 아니라 라이브러리를 의미하는 것이었다. 해당 라이브러리를 구글링했을때 정보가 거의 없고 공식문서의 예제를 보고 할때도 리액트 ..
패스트캠퍼스 챌린지 17일차 - 리액트 PropTypes 로 타입 검사하기
PropTypes - 타입 검사 버그 발생 확률을 낮추기 위해 애플리케이션의 타입 검사를 javascript extensions(Flow, TypeScript 등)을 사용할 수 있지만, React에서는 타입 검사 기능을 내장하고 있다. PropType는 클래스, 함수형, 고차 컴포넌트 모두에서 사용가능하다. PropTypes의 Validator import PropTypes from 'prop-types'; MyComponent.propTypes = { // prop가 특정 JS 형식임을 선언할 수 있습니다. // 이것들은 기본적으로 모두 선택 사항입니다. optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTyp..
패스트캠퍼스 챌린지 16일차 - 리액트 Context
Context - context를 이용하면 props drilling을 거치지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. Context 사용법 1. const ThemeContext = React.createContext('light'); - 기본값을 가진 context를 생성한다. (defaultValue로 light를 설정했으나 React 트리에서 가장 가까운 Provider에서 값을 지정하는 경우 해당값으로 변경된다) 2. - 값을 전달할 하위 컴포넌트를 Provider로 감싸준다. - Provider를 통해 전달된 값이 하위 컴포넌트에 적용되므로 컴포넌트 트리에 각각 props로 전달할 필요가 없어진다. 3. ThemedButton.contextType = ThemeContext; -..
패스트캠퍼스 챌린지 15일차 - 리액트 Memoization
Memoization Memoization은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게하는 기술이다 (출처 : 위키피디아) React 에서는 고차컴포넌트(HOC)와 Hooks를 통해 Memoization 기능을 제공하고 있다. React.memo React.memo는 고차 컴포넌트로, 컴포넌트가 동일한 props로 동일한 결과의 컴포넌트를 렌더링할 경우 React.memo를 호출하여 결과를 메모이징하여 성능향상에 도움을 준다. (컴포넌트를 바로 렌더링 하지 않고 메모이징한 이전 컴포넌트와 props를 비교하여 변화가 있을시 재렌더링 한다.) useCallback useCallback은 콜백 함..
패스트캠퍼스 챌린지 14일차 - 리액트 고차 컴포넌트(HOC)
고차컴포넌트(HOC) - 고차 컴포넌트는 컴포넌트를 파라미터로 받아와 새로운 컴포넌트를 반환하는 함수이다. const EnhancedComponent = higherOrderComponent(WrappedComponent); 일반 컴포넌트의 경우 props를 UI로 변환하여 return하지만, 고차 컴포넌트는 props로 컴포넌트를 전달받아 새로운 컴포넌트로 return 한다. 고차 컴포넌트의 형태는 Redux, Mobx, Relay, Material UI 등 여러 라이브러리에서도 확인할 수 있다. 공통 관심사(Cross-Cutting Concerns)에 고차 컴포넌트 사용하기 리액트에서 컴포넌트는 코드 재사용의 기본 단위이다. 따라서 컴포넌트가 완전히 동일하지 않다면 재사용이 불가능하다. 예를 들어 동..
패스트캠퍼스 챌린지 13일차 - 리액트 합성 (Composition)
합성 (Composition) - 코드를 재사용할때 리액트에서는 상속대신 합성을 사용하는 것이 더 좋다. (합성과 상속은 객체지향에서 기능의 재사용을 하기 위해 사용하는 대표적인 기법이다. 리액트는 합성모델을 사용) - 여러 레벨에 걸쳐 props 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있다. See the Pen Untitled by Dan Abramov (@gaearon) on CodePen. 컴포넌트에서 다른 컴포넌트를 담기 1) 컴포넌트에서 자식 엘리먼트를 예상할 수 없을때, children prop을 사용하여 자식 엘리먼트를 그대로 전달한다. html 태그를 열고 닫는 것 처럼 컴포넌트의 close 부분을 분리하여 children props을 전달한다..
패스트캠퍼스 챌린지 12일차 - 리액트 Hooks Deep하게 알아보기
맛보기 강의에서 잠시 hooks를 간단히 알아봤었는데(hook의 일부, useState, useEffect, 컴포넌트 생명주기와의 연관성), 이번 강의에서는 좀더 자세하게 리액트 공식문서에 따로 카테고리가 분리되어있는 hooks를 다뤘다. Hook 만들어진 배경 - 컴포넌트 간에 상태공유를 위해 기초 뼈대를 개선 (기존에는 render props 나 고차컴포넌트(HOC)를 이용하여 해결) - 생애주기에 따른 이벤트 로직 분배의 애매함으로 코드가 복잡해지는 것을 간결화 - 클래스 생성과 사용에 대한 이해에 어려움 (그러나 Class Component를 제거하진 않을 것) hook? - 함수 컴포넌트에서 React state와 생명주기의 특성을 연동(연관되 부분끼리 로직을 함께 구성) 할 수 있도록 하는 함..
패스트캠퍼스 챌린지 11일차 - 리액트 List 와 Form 다루기
List 자바스크립트와 동일하게 리액트에서도 배열이나 리스트를 이용하여 반복적으로 내용이 다른 컴포넌트를 생성할 때 Array.protoType.map() 을 사용한다. Array.protoType.map() 알고가기 ▼ 더보기 [사용 형식] var new_array=arr.map(function callback(currentValue[, index[, array]]{ // new_array 의 새 요소 반환 }[,thisArg]) 배열 내의 모든 요소 각각에 대하여 제공된 함수(callback)를 호출하고, 그 결과를 모아서 새로운 배열을 반환한다. .map()을 사용하지 않는 경우 1. you're not using the array it returns; and/or (리턴되는 배열을 사용하지 않을 ..
패스트캠퍼스 챌린지 10일차 - 리액트 이벤트 처리 이해하기
이벤트 리액트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하지만 다르다. 1. React의 이벤트는 소문자가 아닌 camelCase 명명법을 적용한다. 2. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. html : ActiveState React : ActiveState 3. React에서는 이벤트 핸들러의 return값으로 false를 전달해도 이벤트의 기본 동작을 방지할수 없어, 반드시 preventDefault를 명시적으로 호출해야한다. 함수에 전달된 파라미터 e는 합성이벤트이며, 브라우저마다 조금씩 다른 이벤트 효과를 w3c명세에 따라 정의하여 동일한 이벤트에서 동일한 사용자 경험을 할 수 있도록 해준다. 일반적인 이벤트 핸들러 패턴 :..
패스트캠퍼스 챌린지 9일차 - 리액트 컴포넌트 생명주기
리액트의 컴포넌트 생명주기는 굉장히 유명한 도표로 한눈에 알수있다. 이 도표는 클래스 컴포넌트에 맞게 표기되어있고 강의 또한 리액트 공식문서에 나와있는대로 클래스 컴포넌트를 기준으로 설명한다. 요즘 강의를 들으면서 vscode 세팅이 귀찮을거 같아서(CRA를 이용한 세팅) repl.it을 이용하고 있는데, 클래스 컴포넌트의 this에 대한 특이점을 설명해 주었는데, 그것을 좀더 쉽게 arrow-function을 이용하면 binding을 따로 하지 않아도 해당 클래스 내의 함수인 것을 인지한다는 내용의 코드를 적용했더니 @babel/plugin-proposal-class-properties 를 install 해야된다는 에러가 떠서 install 했는데 제대로 작동하지 않아 강의로 의미만 설명듣고 넘겨버렸다..
패스트캠퍼스 챌린지 8일차 - 리액트 Props, State
Props 이번 강의에서는 Props의 정의라기보다는 사용방법, 컴포넌트를 추출해서 활용하는 이유(재사용성) 등을 강조했다. - Props는 속성, Property의 약자이다. 이는 jsx를 사용하여 커스텀 컴포넌트가 다른 컴포넌터에서 사용되는 구조를 보면 왜 Property라고 명명했는지 쉽게 알수 있다. 위와 같은 표현법을 사용하고 있는데 그냥 한눈에 봐도 html 태그와 유사하다. 컴포넌트는 React 엘리먼트를 return 함으로 props는 자식요소들에 영향을 미친다. props 이름은 컴포넌트 관점에서 명명하는 것을 권장한다. 이는 props를 name, age, hobby로 명명하는 것이 아닌 user로 유의미하게 짓는 것을 말한다. 컴포넌트를 추출할 때 어떤한 의미를 가지고 있는 것이 개별..