keembloo

컴포넌트 = 함수 컴포넌트/함수안에서 선언된변수들은 지역변수 들은 다른 컴포넌트/함수들과 공유 불가능하다. 서로 다른 컴포넌트간의 데이터 공유하는 방법 1. 상위/하위 컴포넌트 관계에 있어서 props/매개변수로 사용 2. 브라우저 세션/쿠키 사용 3. 전역변수 useContext 사용 (Redux 라이브러리는 전역변수를 사용할때 쓸수도 있다.) useContext / createContext사용방법 1. import 컴포넌트 밖에서 import 한다. /* 리액트 훅 라이브러리 */ import { useState , useEffect , useRef , createContext } from 'react'; 2. createContext 객체 생성 컴포넌트 밖에 상수로 선언해준다. SocketConte..

에러내용 Process 'command 'npm.cmd'' finished with non-zero exit value 1 스프링과 리액트를 통합으로 쓰고 있는데 실행시 리액트 빌드가 되지 않고 에러가 떴다. 찾아보니 다들 gradle 과 npm의 버전이 다르거나 설정때문이라고 했으나 직전까지는 잘 되고 리액트에서 코드를 치다가 떴기 때문에 리액트 코드를 다시 찾아보았다. JS 코드중 '=' 이 빠져서 난 에러였던것.... clasName="phoneWidth" 라고 작성해주니 실행이 잘되었다. 오타를 잘 찾아보자...

리액트 실행중 에러가 났다. 구문 오류: 종료되지 않은 JSX 내용입니다. (31:7) (31:7) 라는 뜻으로 태그가 닫히지 않아서 일어나는 에러일 수 있으니 닫는 태그를 잘 확인해본다

리액트 컴포넌트이다 라우터 ( 리액트 가상경로 ) 매핑 재랜더링 되지 않는다 단순페이지 전환을 할때 쓴다 html dom [ http get ] 재랜더링 된다 페이지 전환시 권한이나,시큐리티 등 어떠한 기능이 필요할땐 스프링을 사용해야하기 때문에 a태그를 사용한다. ( 시큐리티의 인가를 받아야하기 때문에 ) 스프링 프레임 워크 안에 리액트가 들어가있는 구조이다. 컴포넌트는 리액트의 기능이다. http 요청시(get , put , post , delete) 이는 http 보안 ,필터 등 스프링이 먼저 동작하게 된다. 그다음 스프링 프레임워크 디스패처 서블릿으로 통신하게된다.

리액트 훅이란 ? 리액트 훅은 함수형 컴포넌트에서 React state와 생명주기기능을 연동할 수 있게해주는 함수이다. 원래 리액트 컴포넌트 함수 안에서 지역변수를 선언했을 시 함수 안의 변수의 값을 변동시켜도 변동되지 않는다. 랜더링은 1번만 일어나기 때문이다. 이러한 점들때문에 변수 관리를 해주어 재랜더링 하는 기능이 바로 훅이다. useState 함수 사용 방법 1. 컴포넌트 위에 임폴트 먼저 해준다. import { useState } from 'react'; useState는 리액트 내장함수중에 useState 훅 중의 하나의 함수이다. 2. useState 의 결과값은 배열 0 인덱스에는 값이 배열 1 인덱스에는 함수가 있다. useState[0] : 값 지역변수X , 랜더링할때 재선언X , ..

통합 환경 구성하기에 앞서 버전 확인을 먼저 한다 수업중 통합 개발 환경은 노드 버전 : 20.8.1 스프링부트 버전 : 2.7.17 이다 비교를 꼭 해본다 버전마다 설정이 다르기때문이다. 인텔리제이에서 빌드.그래들 파일을 연다 밑에 코드를 복붙해준다. // ---------------------------------------- 리액트(빌드) 통합 ---------------------------------------- // // * 터미널에서 리액트 실행하지 않고 gradle이 리액트를 빌드해서 빌드된 파일을 스프링쪽으로 이동 // 1. 리액트 코드 파일이 있는 리액트 프로젝트 폴더 경로 정의 def frontendDir = "$projectDir/src/main/reactapp"// $project..