React48 [React]비동기로 동작하는 setState() React에서 state를 변경하는 setState()에 대해 설명합니다. setState() 호출 직후 this.state에 바로 반영이 되지 않습니다. 아래 예제를 통해 값이 바로 반영이 되는지 콘솔 창에서 확인을 할 수 있습니다. 최초 버튼을 클릭 했을 때, 아래와 같은 결과를 예상했습니다. *****1 번째 클릭***** setState() 호출 전 : 0, 0 First : 1, 1 Second : 1, 2 Third : 1, 3 하지만, 예상과 달리 아래와 같은 결과가 나왔습니다. *****1 번째 클릭***** setState() 호출 전 : 0, 0 First : 0, 0 Second : 0, 0 Third : 0, 0 React는 this.setState() 호출 후 this.state에.. React/React 문법 2021. 7. 15. [React]csv 파일로 다운로드 React에서 csv파일로 추출 가능한 Package를 소개합니다. 다운로드 수가 많은 Package부터 작성합니다. react-csv data를 csv파일로 생성합니다. data는 array의 array, object의 array 또는 문자열이 될 수 있습니다. 공식 사이트 : https://www.npmjs.com/package/react-csv 설치 npm install react-csv --save; Import import { CSVLink, CSVDownload } from "react-csv"; 코드 ※ CodePen에서 react-csv Package가 정상적으로 설치되지 않아서 코드 블록으로 작성하였습니다. headers = [ { label: "First Name", key: "firs.. React/유용한 NPM 2021. 7. 13. [React]현재 브라우저 정보 확인하기 React에서 Browser 정보를 확인할 수 있는 Package를 소개합니다. React-browser-detection 사용 브라우저를 체크 하기 위한 용도는 아니며, 현재 실행되고 있는 브라우저에 따라서 값을 return 합니다. IE 버전별로 처리해야 하는 경우에는 사용 불가능합니다. 공식 사이트 : https://www.npmjs.com/package/react-browser-detection 설치 npm install --save react-browser-detection Import import BrowserDetection from 'react-browser-detection'; 코드 See the Pen React-browser-detection_EX by JaeSung2386 (@jae.. React/유용한 NPM 2021. 7. 13. [React]table Element를 엑셀 파일로 다운로드 React에서 table Element를 엑셀 파일로 다운로드하는 방법에 대해 설명합니다. react-html-table-to-excel 사용 공식 사이트 : https://www.npmjs.com/package/react-html-table-to-excel 특징 HTML ...을 .xls 형식의 Excel 파일로 다운로드 IE 11 지원 설치 npm install --save react-html-table-to-excel Import import ReactHTMLTableToExcel from 'react-html-table-to-excel'; 코드 See the Pen TableToExcel by JaeSung2386 (@jaesung2386) on CodePen. 다운로드한 엑셀 파일 react-h.. React/유용한 NPM 2021. 7. 12. [React]Key 이해하기 React에서 배열 요소를 렌더링하는 경우 map()을 사용합니다. 아래 예제는 header라는 array의 object 수만큼 ...를 렌더링하는 예제입니다. See the Pen by JaeSung2386 (@jaesung2386) on CodePen. 위 코드를 실행하면, 콘솔 창에서 아래 사진과 같은 경고문을 볼 수 있습니다. ※ CodePen에서는 에러 및 오류를 무시하는 경우가 있으므로 VSCode나 CodeSandBox와 같은 다른 툴에서 테스트하시면 됩니다. 「 list 내부 각 child는 고유한 "key" prop를 가져야 한다. 」 배열 요소를 map()을 사용하여 렌더링 하는 경우에는 key라는 prop가 필요합니다. key란 무엇인가? 재조정(Reconciliation)이 나타난 .. React/React 문법 2021. 7. 11. [React]이벤트 핸들러 바인딩(Event Handler Binding) 이벤트 핸들러 바인딩이란? 컴포넌트(Component)와 이벤트 함수를 연결(bind)하는 것입니다. 바인딩하지 않아도 이벤트 함수는 실행이 되지만, 누가(어떤 컴포넌트가) 호출을 했는지 알 수 없습니다. 바인딩하지 않았는데, 이벤트 함수에서 this.state 또는 this.props를 사용할 경우 undefined로 처리됩니다. 바인딩하지 않고 이벤트 함수에서 this를 사용하는 경우 class TestComponent extends React.Component { constructor(props) { super(props); this.state = { applyText: "빈 값" }; } NotBindingBtnClick() { console.log(this.state.applyText); } r.. React/React 문법 2021. 7. 7. [React]props 객체의 타입 검사 PropTypes 자바스크립트는 타입 검사에 유연하게 처리됩니다. Java에서 String str = "1"; 은 문자열이지만, 자바스크립트에서 var str = 1; 은 숫자가 될 수도 있고 문자가 될 수도 있습니다. React에서는 props 객체의 타입과 필수 여부 검사를 지원하는 PropTypes Module을 지원합니다. PropType Module 설치 npm install --save prop-types PropTypes Module Import import PropTypes from 'prop-types'; PropTypes Module 사용 코드 const node = document.getElementById("root"); const Search = (props) => { return ( ); } //.. React/React 문법 2021. 6. 29. [React]CORS 에러 해결 사전 지식 Client-Server 구조에 대한 이해가 필요합니다. request와 response에 대한 이해가 필요합니다. url에 구조에 대한 이해가 필요합니다. proxy에 대한 이해가 필요합니다. Client에서 Server로 API 통신을 했는데, 아래 사진처럼 에러가 발생하는 경우가 있습니다. (REST, SOAP, GraphQL 등 다양한 API 통신 방법이 많으므로 API 통신이라고 지칭하겠습니다.) Access to fetch at 'http://localhost:3001/test' from orgin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is pres.. React/기타 2021. 6. 25. [React]Route 조건부 렌더링 Route 조건부 렌더링 Route에서 조건에 따라 컴포넌트를 렌더링 하는 간단한 방법에 대해 설명합니다. Redirect로 처리하는 방법도 있으나 Redirect로 처리하는 방법은 추후 설명하도록 하겠습니다. 아래 코드는 http://localhost:3000/Dashboard로 접속 시 토큰이 존재할 경우 Dashboard 컴포넌트를 렌더링 하며, 토큰이 존재하지 않을 경우 Login 컴포넌트를 렌더링 합니다. ... function setToken(userToken) { localStorage.setItem('token', JSON.stringify(userToken)); } function getToken() { const tokenString = localStorage.getItem('token.. React/React 문법 2021. 6. 22. [React]Error : Typo in static class property declaration react/no-typos 컴파일 에러 『 Typo in static class property declaration react/no-typos 』 에러 원인 PropTypes의 맨앞의 P를 대문자로 입력해서 발생한 에러입니다. 에러 해결 PropTypes를 propTypes로 수정합니다. /* 수정 전 */ Login.PropTypes = { setToken : PropTypes.func.isRequired } /* 수정 후 */ Login.propTypes = { setToken : PropTypes.func.isRequired } React/기타 2021. 6. 22. [React]VSCode Git 연동 VSCode와 GitHub 연동 방법에 대해 설명합니다. 1. git version 확인 git --version 2. git init git init 3. git 레퍼지토리 생성 좌측 상단의 New 또는 우측 상단의 + 버튼을 클릭 후 New Repository를 클릭합니다. 레퍼지토리 이름과 보안정책 초기 세팅을 설정 후 Create repository 버튼을 클릭합니다. 저는 코드 공유 목적이 없으므로 Private로 선택하였습니다. 생성된 레퍼지토리 주소를 복사해줍니다. 4. git remote add origin git remote add origin '복사한 주소' 작업 중인 프로젝트와 git 레퍼지토리와 연동합니다. git remote add origin 뒤에 복사한 주소를 붙여 넣기 해줍니.. React/기타 2021. 6. 16. [React]Window10에서 React 개발 환경 세팅 Windows 10에 React를 설치하는 단계에 대해 설명합니다. 1. Visual Studio Code 설치 VS Code 다운로드 링크에서 다운로드 받습니다. 2. Node.js 설치 Node.js 다운로드 링크에 접속해서 node.js를 다운받습니다. ※ 유의사항 create-react-app로 react 프로젝트를 만들 경우에는 Node.js Version은 10 이상으로 설치를 하셔야합니다. 최신 버전은 안정성 측면에서 100% 검증이 되지 않았기 때문에 굳이 최신 버전을 다운로드 받으실 필요가 없습니다. node 설치후 cmd에서 아래 명령어로 node와 npm이 설치가 되었는지 확인합니다. node -v npm -v 저는 node의 Version 6.10.2라서 Node.js의 버전을 업그.. React/기타 2021. 5. 13. 이전 1 2 3 4 다음