이번에는 react 의 useState를 input 과 함께 활용하여 데이터 입력을 해보도록 하겠다. 우선 작업 페이지 TextData.js 를 아래와 같이 생성 후 메뉴에 추가한다. import React from 'react'; function TextData() { return ( TextData data1: data2: Send ); } export default TextData; 이제 TextData.js 에서 data1, data2 두개의 데이터를 받을 state를 useState로 선언한다. import React, { useState } from 'react'; function TextData() { const [data1, setData1] = useState(''); const [dat..

리액트에서 페이지 이동을 하기 위해서는 router를 활용해야한다. rounter를 사용하기 위해서는 npm 으로 react-router-dom 를 먼저 설치해준다 npm i react-router-dom 그 후 이동할 화면을 먼저 생성한다. 처음 만드는 페이지로, FirstScreen.js를 생성한다. import React from 'react'; function FirstScreen() { return ( first ); } export default FirstScreen; 이제 App.js를 열어 아래와 같이 수정한다. import React from 'react'; import FirstScreen from './Screens/FirstScreen' import { BrowserRouter as..

리액트에서 파일 업로드를 하는 방법은 기존 ajax를 사용하는 방법과 크게 다르지 않다. 스테이트에 파일 데이터를 넣는 방법이 다른 부분이 있어서 해당 부분부터 처리를 해야한다. 먼저 아래와 같이 두개의 스테이트를 생성한다. const [imgBase64, setImgBase64] = useState([]); // 파일 base64 const [imgFile, setImgFile] = useState(null);//파일 imgFile은 이미지 파일 그 자체를 받을 스테이트이고, imgBase64는 미리보기를 구현하기 위해서 이미지 데이터를 받을 스테이트이다. 아래와 같이 input을 만들어준다. 위 input에 파일을 등록하면 handleChangeFile 함수가 실행한다. const handleChan..

리액트를 하면 서로 다른 js 파일끼리 스테이트나 데이터를 주고 받아야 하는 경우가 있다. 이럴 경우에 어떻게 작성하면 될지 알아보고, 리액트에서 모달창을 만들어 보자. 먼저 불러올 화면, 이동할 화면을 만든다. 이전 장에 이어서 test3.js 파일을 만들었고 아래와 같다. import React, { useState, useEffect,useCallback } from 'react'; function Test3({setModal,testdata}) { console.log(testdata) return ( {testdata.map((item,index,a)=>{ console.log(a) return ({index}{item.NICKNAME}) })} close ); } export default T..

리액트를 사용하면 백엔드로 노드를 가장 많이 사용한다. 하지만 spring 을 이용하여 소통하는 방법을 알아보자. 먼저 axios 라이브러리를 설치해야한다. npm i axios --save axios 는 jquery의 ajax와 비슷한 역할을 해준다. 설치를 하였으면 지난 코드에 아래와 같이 작성한다. import React, { useState, useEffect } from 'react'; import axios from 'axios'; // 액시오스 function Test1() { const [id, setId] = useState(0); function stateTest() { setId(id+1) } useEffect( () => { alert("ok") }, [] ); function te..

리액트에는 Hook 이라는 개념이 있다. 그 중 대표적이며 필수적인 것이 useState, useEffect이다 먼저 useState 에 대한 이해가 전제가 되어야 리액트 진행이 가능하다. 리액트는 state, 즉 상태라는 개념이 있는데 이 state가 변경이 되면 페이지의 리로딩 없이 그 변경되는 부분만 렌더링 한다. 이번 전체 코드는 아래와 같다. import React, { useState, useEffect } from 'react'; function Test1() { const [id, setId] = useState(0); function stateTest() { setId(id+1) } useEffect( () => { alert("ok") }, [] ); } return ( test{id}..