한번에끝내는React의모든것초격차패키지Online.
패스트캠퍼스 챌린지 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명세에 따라 정의하여 동일한 이벤트에서 동일한 사용자 경험을 할 수 있도록 해준다. 일반적인 이벤트 핸들러 패턴 :..
패스트캠퍼스 챌린지 8일차 - 리액트 Props, State
Props 이번 강의에서는 Props의 정의라기보다는 사용방법, 컴포넌트를 추출해서 활용하는 이유(재사용성) 등을 강조했다. - Props는 속성, Property의 약자이다. 이는 jsx를 사용하여 커스텀 컴포넌트가 다른 컴포넌터에서 사용되는 구조를 보면 왜 Property라고 명명했는지 쉽게 알수 있다. 위와 같은 표현법을 사용하고 있는데 그냥 한눈에 봐도 html 태그와 유사하다. 컴포넌트는 React 엘리먼트를 return 함으로 props는 자식요소들에 영향을 미친다. props 이름은 컴포넌트 관점에서 명명하는 것을 권장한다. 이는 props를 name, age, hobby로 명명하는 것이 아닌 user로 유의미하게 짓는 것을 말한다. 컴포넌트를 추출할 때 어떤한 의미를 가지고 있는 것이 개별..
패스트캠퍼스 챌린지 7일차 - 리액트 JSX 알아보기
JSX 없이 사용하는 React React는 자바스크립트 라이브러리로 JSX 를 사용하지 않아도 모든 것을 자바스크립트로 구현할수 있다. 그러나 리액트를 사용하면서 자바스크립트보다 JSX를 선호하는 이유는, 기존에 자바스크립트로 구현할수 있음에도 JQuery를 많이 사용했던 이유 중 하나, 자바스크립트로 작성된 코드가 JSX로 작성한 코드보다 길고 복잡하기 때문이다. /* JSX */ class Hello extends React.Component { render() { return Hello {this.props.toWhat}; } } ReactDOM.render( , document.getElementById('root') ); /* JAVASCRIPT */ class Hello extends Rea..
패스트캠퍼스 챌린지 5일차 - 리액트 Key와 리렌더링
key와 리렌더링 효율적으로 변화를 감지하고 리렌더링 하기 위해 리액트에서는 key라는 엘리먼트 리스트를 만들때 포함해야되는 특수한 속성을 지원한다. key는 기존 트리와 이후 트리의 자식들이 일치하는지 확인해주는 역할을 하기 때문에, 전역에서 유일할 필요없이 형제요소에서만 유일성을 유지하면 된다. See the Pen Untitled by BEGINNERWW (@beginnerww) on CodePen. key는 고유하게 식별할 수 있어야 하기 때문에 대부분의 경우 데이터의 ID 값을 사용한다. 유일하게 사용할 수 있는 값이 없을 경우 인덱스를 key로 사용할 수 있으나, 인덱스를 key로 사용하게 되면 재배열이 일어날 경우 컴포넌트에 예기치않은 문제가 발생할 수 있기때문에 주의해야한다. (여기서 인덱..
패스트캠퍼스 챌린지 4일차 - 리액트 element 다루기
Element에 style 입히기 - 이미 html 태그로 정의되어있는 element는 class 를 인식하지만, 커스텀 element는 class를 인식하지 못하기 때문에 className으로 사용한다. - style 적용은 className을 사용하여 css를 작성하는 것과 인라인으로 주입하는 방법이 있다. - 인라인으로 주입할 때는 객체형식으로 작성해야하며, 속성명은 카멜케이스로 작성해야한다. - 커스텀 컴포넌트 형식으로 작성하여 적용할때는 태그 내에 모든 것들이 props로 전달되기 때문에, 전체를 사용할때는 파라미터 객체로 받고, 부분 사용시에는 비구조할당으로 받는다. { className } 등 Ref로 DOM 다루기 강의에서 useRef에 대한 설명이 너무 간단해서 공식문서를 참고했다. DO..