변수처럼 값이 변해도 렌더링은 안되지만렌더링 된 이후에도 값을 저장하고 있음 그래서 렌더링이되면 변수는 값이 초기화 되지만useRef는 화면상에서 값이 유지됨! 예를들어 아래와 같은 코드가 있다고 가정import "./App.css";import { useState, useRef } from "react";function App() { const [renderer, setRenderer] = useState(0); const countRef = useRef(0); let countVar = 0; const doRendering = () => { setRenderer(renderer + 1); }; const increseRef = () => { countRef.current = co..
import React from 'react';function MyComponent() { const hello = 'Hello world '; return ( );}
useEffect useEffect는 쉽게말해 최초에 페이지가 렌더링되었을때 즉, 마운트되었을때 useState 애들이 상태변경되서 렌더링 되었을때 언마운트 되었을때 에 실행하는 함수라고보면된다 1. 마운트(최초렌더링), 이후 렌더링될때마다 실행 useEffect(()=>{ }) 2. 마운트(최초렌더링), 특정 상태(state)가 변경됐을때만 실행 b가 변경되어서 렌더링 했든간에 a가 변경되어 렌더링 되었을때만 uesEffect실행! 두번때 인자에 있는 배열의 이름은 Dependency Array 감시할 항목을 담는 역할 let [a,setA] = useState(0) let [b,setB] = useState(1) useEffect(()=>{ },[a]) 3. 마운트(최초렌더링)될때 실행 useEffe..
useState보통 값을 담을때 변수를 쓰기도하지만리액트에서는 useState를 사용한다 변수는 주로 값이 바뀌지않는 데이터예를들면 로고나 항상 값이같은 상수 같은 애들을 사용 useState는서버에서 실시간으로 데이터를 받아와서 출력해야할때 사용 그래서 그냥 변수만 사용했을때 변수값이 달라져도 리엑트는 재렌더링 XuseState 는 값이 바뀌는걸 감지하고, 값이 바뀌면 재렌더링을 함 변수는 일반적으로 값을 변경할때 그냥 변수에다 새로운 값 넣으면 바뀌지만useState는 좀 방식이 다르다 항상 useState로 변수 선언시 저렇게첫번째인자로 변수명을 쓰고두번째 인자로 변수명을 set해주는 함수명을 써준다그리고 useState안에는 abc에 담을 초기값을 써준다let [abc,setAbc] = useSt..
VSCode에서 React Emmet 적용하는법(Mac) 1.Command + , 2.작업영역 -> 확장 -> Emmet -> setting.json에서 편집 클릭 3. 항목에 아래 내용 추가 후 저장(cmd + s) "emmet.includeLanguages": { "javascript": "javascriptreact" } 4. 결과 div만쳐도 아래 자동완성키워드로 뜨고 엔터만치면 자동완성 됨!
Windows환경에서 nginx로 React 배포 및 프록시 사용 개발환경 백엔드 : 윈도우, 전자정부프레임워크 3.1 스프링 , 톰캣 8.5 프론트 : 윈도우, 리액트, nginx 프론트로 리액트를 띄우고 거기에 필요한 데이터들은 백엔드에 요청해서 가져오는 방식 프록시를 사용하면 백엔드나 프론트에서 CORS방지를 위한 작업을 할 필요가 없다 예를들면 컨트롤러마다 @CrossOrigin(origins = "http://localhost:3000") 어노테이션을 붙인다거나 Filter를 설정한다거나 Configuration을 생성해준다거나 할필요없고 프론트에서 데이터 요청시 header에 CORS 관련 내용을 안넣어도 된다. 젤 중요한건 Controller에서 URI를 작성할때 데이터 관련 호출은 '/ap..
