react51

• 

  [React]Warning: A component is changing an uncontrolled input to be controlled. 경고 『 A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 』 해석 '컴포넌트는 제어할수없는 input을 제어하기 위해 변경하고 있습니다. 해당 경고는 undefined에서 정의된 값으로 변경할려고 해서 발생하였으며, 이러한 경우는 발생해서는 안됩니다. 컴포넌트의 일생동안 input .. React/기타 2021. 7. 22.

• 

  [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.

• 

  CodePen에서 React 개발환경 구축하기 아주 간단한 React 코드를 작성하는 경우 CodePen에서 작업이 가능합니다. CodePen 간단한 사용방법은 여기서 확인 부탁드립니다. 예제 코드 추가 아래 코드를 복사해서 HTML과 JS에 추가합니다. HTML JS const element = ( Hello, react!!!!! ); ReactDOM.render(element, document.getElementById("root")); CodePen에서 React 설정이 되지 않아 에러가 발생합니다. 아래 순서대로 CodePen에서 React 설정을 합니다. CodePen에서 React 설정 1. Settings 선택 2. JavaScript Preprocessor에서 Babel 선택 Babel 컴파일러는 JavaScript 최신 문법이 모든 .. 기타 2021. 7. 4.

• 

  [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.