import React, {useState, } from 'react';import axios from 'axios';// npm i axiosexport const Axios_Ex1 = () => { const [data, setData] = useState(null); const loadBtn = () => { //axios.get("https://스프링부트:8080/상세보기/1")랑 같은 식 axios.get("https://jsonplaceholder.typicode.com/todos/") // 정상적으로 가져왔다면, then 을 사용하여 data 값 변경하기 .then(res => { setData(res.data)..

JSON : JavaScript Object Notation     - js 객체 표기법     - 주로 서버(java 백엔드)와 클라이언트(프론트엔드)간의 데이터 교환{ "표기명" : "표기 내용", "표기명" : ["표기 내용", "표기 내용2", "표기 내용3"], "표기 주소" { "도시" : "도시내용", "우편번호" : "우편번호작성" } ....}  개발자들이 가져온 값을 화면에 보여주기 위해 임시 데이터 json을 사용해서 표현     https://jsonplaceholder.typicode.com/ 를 많이 사용 jsonplaceholder : 임시 데이터로 사진이나 포스터 내용과 같은 파일을 만들고 개발자들에게 무료로 제공 대표적 예..

import React, {useRef,useEffect} from 'react';function SignUpForm(){ // 초기값 = null, React가 새로고침 되어도 변경된 값을 유지할 수 있도록 useRef const emailRef = useRef(null); //useEffect의 []를 비워 최초 1회만 실행하는 기능 설정 useEffect(() =>{ //SignUpForm이 실행되면 바로 수행할 기능 if(emailRef.current){ emailRef.current.focus(); //처음 입력창이 null인 값에 자동으로 이동 } },[]); return( ..

import React, {useRef, useEffect} from 'react';const RefInputFocus = () => { const inputRef = useRef(null); // -> R20 파일을 시작하자마자 바로 input창을 활성화 시키는 설정 useEffect(() => { if(inputRef.current){ inputRef.current.focus(); } }, []); const btnClick = () => { if(inputRef.current){ inputRef.current.focus(); } }; return ( ..

import React, { useState } from "react";import { Link } from 'react-router-dom';import './TipTacToeStepOne.css';const shuffleArray = (array) =>{ //랜덤으로 나온 값 정렬 return array.sort(() => Math.random() - 0.5);}const TicTapToe = () => { // 생성된 수를 shuffleArray를 통해 셔플 const [numbers, setNumber] = useState(shuffleArray([...Array(9).keys()].map(n => n + 1))); //사용자가 클릭해야하는 다음 숫자 //사..

useEffect는 컴포넌트(function, const 시작)가 렌더링을 할 때마다 특정 작업을 실행할 수 있도록하는 Hook * react에서 컴포넌트를 렌더링 하다 = react에서 js파일을 실행하다 useEffect 사용 방법     import {UseEffect} form 'react';     useEffect(function, deps)                   ↓       ↓     useEffect(() => {},   []); //function의 이름이나 특정 기능이 없을 때 익명함수로 표현     - function : ~~.js를 들어왔을 때 수행하고자 하는 작업     - deps :              - 배열형태. 검사하고자 하는 특정 값, 빈 배열 작성  ..