ReactJS8 [ReactJS] 재사용할 수 있는 컴포넌트 제작 이 페이지는 재사용할 수 있는 컴포넌트 제작에 대해 설명하며 리액트 & 리액트 네이티브 통합 교과서를 기반으로 작성했습니다. 일체형 컴포넌트의 어려움 특정 기능에 대해 하나의 컴포넌트만 구현한다면 작업이 간소화된다. 최소한 유지해야 할 컴포넌트가 많지 않고 모든 것이 컴포넌트의 내부에 있기 때문에 데이터의 통신 경로가 많지 않을 것이다. 그러나 이 개념은 팀 개발의 협업을 어렵게 하고 컴포넌트가 커질 수록 추후 리팩토링하는 것이 더 어려워진다. (나의 경우는 퍼블리셔가 있는 회사에서 HTML을 주면 일체형 컴포넌트를 만들게 되는 점이 있었다...이제 이걸 잘 나누자) JSX 마크업 구현하고자 하는 일체형 컴포넌트를 작성하자. 너무 길어서 깃헙 주소로 대체 - https://github.com/PacktP.. 2019. 9. 17. [ReactJS] 이벤트 핸들링 - 리액트 방식 이 페이지는 책(리액트 & 리액트 네이티브 통합 교과서)과 리액트 공식 사이트(ko.reactjs.org)를 참고하여 정리한 페이지입니다. 이벤트 처리 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매유 유사합니다. 몇 가지 문법적인 차이는 다음과 같습니다. React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. 예를 들어, HTML은 다음과 같습니다. Activate Lasers React에서는 약간 다릅니다. Activate Lasers 또 다른 차이점으로, React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를.. 2019. 9. 17. [ReactJS] React private route 로그인 권한 React 에서 로그인 권한에 따른 페이지 경로 접근 권한을 주는 방법 https://reacttraining.com/react-router/web/example/auth-workflow 원본: https://tylermcginnis.com/react-router-protected-routes-authentication/ 2018. 10. 16. [ReactJS] styled-components react 에서 CSS 를 사용하는 방법에는 몇가지가 있다.inline - style 속성 사용 (참고: https://reactjs.org/docs/dom-elements.html#style)CSS classes are generally better for performance than inline styles. (CSS class 를 사용하는 것이 일반적으로 inline styles 를 사용하는 것보다 성능이 좋다.) ?var divStyle = { color: 'white', backgroudImage: 'url(' + imgUrl + ')', WebkitTranstion: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the.. 2018. 9. 3. [ReactJS] scroll to top 특정 컴포넌트의 스크롤을 위로 올리기 위한 방법이다. componentDidUpdate() { let scroll = this.refs.scrollElement || document.getElementById('scrollElement'); scroll.scrollTop = 0; } render() { return ( ... ... ... ) } 스크롤을 변경하고자 하는 부분에 id를 추가하고 componentDidUpdate 함수에 스크롤 변경 코드를 추가하면 된다. 2017. 7. 31. [JavsScript, ReactJS] date format yymmdd 보통 date format 함수는 strfmat() 함수를 사용하지만 date format 함수가 없다면 만들어야 한다. function makeYYMMDD(value) { let year = value.getFullYear(); let month = value.getMonth() + 1; let date = value.getDate(); month = month < 10 ? '0' + month : month; date = date < 10 ? '0' + date : date; return year+'-'+month+'-'+date; } // result: '2017-01-01'toISOString() 사용할 경우function makeYYMMDD(value) { return value.toISOStr.. 2017. 1. 23. [React] jspdf, jspdf-autotable Pdf 다운로드를 위한 라이브러리이다.npm 으로도 제공해 주니 node.js 를 사용한다면 npm으로 설치해 주도록 한다. jspdf 는 기본적인 pdf를 만들어주는 라이브러리이며, jspdf-autotable은 테이블을 pdf로 만들 때 사용된다.설치$ npm install jspdf$ npm install jspdf-autotable # table 저장시에만 설치 사용법jspdf 를 사용하는 방법은 간단하며 검색을 통해 쉽게 찾을 수 있다. jspdf-autotable 이 jspdf 기반으로 되기 때문에 jspdf-autotable을 기준으로 설명하겠다. let Pdf = require('jspdf'); let PdfAutoTable = require('jspdf-autotable'); ... va.. 2016. 11. 29. [ReactJS/ECMA6] Arrow 함수와 파라미터 전달 ECMA Script6 에서 this 를 바인드 하는 대신에 Arrow function 을 사용한다. 하지만 파라미터를 전달하기 위해서는 this 를 써줘야 한다. 기본 사용 functionName = () => { ... } 파라미터 전달 시 functionName = (arg) => { console.log(arg); } 함수 호출 부분에 .bin() 를 사용하여 this 와 파라미터를 전달한다. 2016. 11. 28. 이전 1 다음
