본문 바로가기

FRAME WORK/REACT

 (5)
React ) 리액트로 사업자번호 유효검사 import logo from './logo.svg';import { useState } from 'react';import './App.css';function Main(){ const validNumber = [1,3,7,1,3,7,1,3,5]; const [businessNumArray, setBusinessNumArray] = useState([]); const [tempArray, setTempArray] = useState([]); //const [sum, setSum] = useState(null); return ( { event.preventDefault(); ..
React ) state props는 하위컴퍼넌트로 값을 전달하는 방법, state는 한 컴퍼넌트안에서 값을 전달하는방법 app내에 변수값은 최초 콜 시에만 인지하고 변경된 값은 인지하지못한다.그래서 변화되는 값을 추적하기위해 useState를 사용한다.useState는 배열을 리턴하는데 0번째 데이터는 값, 1번째 데이터는 값을 변경하는 함수를 가진다.보통 함수는 변수명, set어쩌고 로 받는다.     위의 코드에서 기존의 topics를 복제하여 복제된 변수에 새로운 객체를 추가하고 그 객체를 setTopics로 변경해주었는데 그렇게해야 변경이된다. topics는읽기속성이기 때문에 읽기속성에 puch를 때려봤자이기도하고 useState의 경우 원래 값과 변경함수를 사용하여 변경한 값이 같으면 다시 로드를 안하기 때문이다.im..
React ) 컴퍼넌트 아래처럼 사용자 정의 태그를 만들수 있다.이때 return값은 문자열, 태그가 아니고 jsx 객체이다.   컴퍼넌트에 값을 전달할수도있는데, 마치 속성값처럼 작성하여 값을 전달할 수 있다.하지만 진짜 태그도 아니고 진짜 속성값도 아니다. jsx 객체이다.그렇기때문에 title이라고 안해도되고 aaaaa="WEB" 이렇게 전달해도 무방하다.그냥 변수전달로 생각하면되겠다. 전달한 값은 props파라미터로 전달 받고, 전달하고 싶은 영역에 { } 처리하여 작성하면 된다.{}에 있는 값은 문자열이 아닌 표현식으로 인식된다.일반적으로 파라미터명은 props를 많이쓰며, props는 값을 전달하는데 하향전달만 가능하다.  Contents 영역도 수정해보자.먼저 나열될 리스트의 정보를 객체로 만들어주고 Content..
React ) 수정하기 기초 리액트의 첫 화면의 시작은 src 폴더안의 index.js 이다. 변수 root에 App을 렌더링하고 있다.렌더링하고있는 './ App.js'로( .js가 생략되어있는것) 이동하여 수정하자return값으로 태그를 내보내고있는데, " "감싸져있지않다. 이말은? 문자열이 아니라는것. 결국 태그가 아니다.jsx 객체이다. 수정후 npm start수정된 화면이 나오는데 id="root" div 안에 수정한 App.js가 보인다.root는 어디있는가하면 public안에 index.html 안에 있다.    App.js에 사용자정의 태그를 사용하여 좀 더 풍성하게 만들어보자 규칙이 있는데, return값은 태그 하나로 묶을것, 함수명은 대문자를 사용할것. import React from 'react';import ..
React ) 리액트 설치 1. node.js 설치하기https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. 폴더 만들기3. 리액트 설치하기npx create-react-app .** npx - 일회성 설치 명령어** . 은 현재 폴더(디렉토리)에 설치하겠다는 것 혹시 설치 오류가 난다면?# create-react-app 제거 후 재설치   $ npm uninstall -g create-react-app   $ npm install -g create-react-app      # create-react-app 재실행   $ npx c..

티스토리툴바