이번에는 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..

이전 글에서는 리액트에서 페이지 공통 영역인 header를 생성하는 방법을 알아보았다. 이번에는 로그인 페이지 등에서 공통 영역(header, footer 등)을 숨기는 방법에 대해 알아보겠다. 우선 지난시간에 작성한 코드 중 Link 영역을 따로 분리하여 아래와 같이 Header.js 파일로 만들어준다. import React from 'react'; import { Link } from 'react-router-dom'; function Header() { return ( FirstScreen ); } export default Header; App.js에서는 해당 header를 임포트하여 추가한다. import React from 'react'; import FirstScreen from './Sc..

리액트에서 페이지 이동을 하기 위해서는 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..