React
-
React IE 대응React/Error 2021. 6. 18. 13:49
- react-scripts 버전 3.2.0으로 다운그레이드 npm i react-scripts@3.2.0 - package.json browserslist에 추가 "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all", "ie >= 10", ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version", "ie >= 10", ] }, - react-app-polyfill 모듈 설치 npm i react-app-polyfill - IE10에서 아래와 같은 오류 발생 시, core-js 모듈 설치 npm i core-js 실제..
-
JavaScript Unit Test & JestReact/Test 2021. 6. 7. 23:37
TDD(Test-driven Development) 출처: 위키디피아 테스트 주도 개발(Test-driven development, TDD)은 매우 짧은 개발 사이클을 반복하는 소프트웨어 개발 프로세스 중 하나이다. 우선 개발자는 바라는 향상 또는 새로운 함수를 정의하는 (초기적 결함을 점검하는) 자동화된 테스트 케이스를 작성한다. 그런 후에, 그 케이스를 통과하기 위한 최소한의 양의 코드를 생성한다. 그리고 마지막으로 그 새 코드를 표준에 맞도록 리팩토링한다. 이 기법을 개발했거나 '재발견' 한 것으로 인정되는 Kent Beck은 2003년에 TDD가 단순한 설계를 장려하고 자신감을 불어넣어 준다고 말하였다. Jest npm i -D jest Jest 자동 감지 npx jest --watchAll pa..
-
React - Context APIReact/Context 2021. 6. 7. 23:10
https://ko.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.reactjs.org 하위 컴포넌트 전체에 데이터 공유 방법 데이터 Set 가장 상위 컴포넌트 => Provider 데이터 Set 방법 Context 생성 Context.provider 사용 value 사용 // contexts/PersonContext.js import React from 'react'; const PersonContext = React.createContext(); export default PersonContext; // index.js import PersonContext from './..
-
react - Additional Hooks(1) : useReducerReact/Hooks 2021. 6. 7. 22:12
useReducer useState의 확장판 다수의 하위값을 포함하는 복잡한 정적 로직을 만드는 경우 다음 state가 이전 state에 의존적인 경우 Redux를 안다면 쉽게 사용 가능 import { useReducer } from 'react'; // reducer => state를 변경하는 로직이 담겨 있는 함수 // state: 이전 state 값 // action: 객체이고 필수 프로퍼티로 type을 가진다. const reducer = (state, action) => { if (action.type === 'PLUS') { return { count: state.count + 1, }; } return state; }; export default function UseRecuderExamp..
-
React - Basic HooksReact/Hooks 2021. 6. 7. 00:47
useState state를 대체 useState를 사용할 때 상태의 기본값을 파라미터로 넣어서 호출 함수를 호출하면 배열이 반환 첫번째 요소는 현재 상태, 두번째 요소는 Setter 함수 import React, { useState } from 'react'; export default function Example() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}>Click me ); } useEffect LifeCycle 대체 componentDidMount / componentDidUpdate / componentWillUnmount useEffect 첫번째 매개변수 렌더..
-
React - HOC(Higher Order Component)React/심화 2021. 6. 6. 23:08
https://ko.reactjs.org/docs/higher-order-components.html 고차 컴포넌트 – React A JavaScript library for building user interfaces ko.reactjs.org React에서 컴포넌트 로직 재사용을 위한 고급 기술 React API의 일부가 아님 React의 구성적 특성에서 나오는 패턴 HOC는 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수 HOC = function (컴포넌트) { return 새로운 컴포넌트; } 보통 with가 붙은 함수가 HOC인 경우가 많다. 예) withRouter
-
Ant DesignReact/Style 2021. 6. 6. 20:55
https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design Ant Design 모듈 설치 npm i antd index.js에 Ant Design 전역 스타일 추가 사용할 Ant Design Component import 예) import { Calendar } from 'antd'; Ant Design Icon 사용 npm install --save @ant-design/icons import { RollbackOutlined } from '@ant-design/icons'; 외부 Component 적용 시 Props 옵션을 확인할 것
-
React - ShadowReact/Style 2021. 6. 6. 20:41
React Shadow 모듈 설치 npm i react-shadow root.div 안의 태그들만 별도의 스타일 속성 지정 단점 공통적인 스타일인 경우에도 반복적으로 추가해야 함 외부와 내부가 차단되어 있어 document에 지정되어 있는 값을 상대적으로 표현할 때 제약사항 발생 // App.js import root from 'react-shadow'; // App.css 내용 삽입 const styles = ` .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-sp..