React 
React란? 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 UI를 만들기 위해 사용되며, facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있습니다.
*싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.
React의 특징
1. Data Flow :단방향 데이터 흐름 - 복잡한 앱에서도 보다 예측 가능할 수 있도록 함
2.Component(독립적인 단위의 소프트웨어 모듈)기반 : React는 한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성합니다.
기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높기때문에 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수,관리가 용이하다는 장점을 가집니다.
3.Virtual Dom(Document Object Model) :DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리합니다.React는 이 DOM Tree 구조와 같은 구조체를 가상의 DOM으로 가지고 있습니다.따라서, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있습니다.
4.Props and State:Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 읽기 전용 데이터를 말합니다.쉽게 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다.
State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다.
5.JSX
React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. 이후 섹션에서 다시 컴포넌트로 돌아오겠지만, JS에 마크업을 넣는 게 익숙해지지 않는다면 이 이야기가 확신을 줄 것입니다.
React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
React를 스프링부트와 연동하려면
먼저 node.js, vscode 를 설치합니다.
- node 14 버전 이상
Intelli J에서 리액트를 적용하고자 하는 프로젝트를 열어줍니다.
(저는 spring 3.2.9/ Gradle / Java 17로 생성하였고, Spring Web & Lombock & MariaDB 를 Dependency로 주었습니다. )
설치 명령어 (저는 프로젝트의 main -src 에 설치하였습니다)
npx create-react-app 앱이름설치를 삭제하는 명령어 (오류가 나거나 잘못 설치했거나..리액트는 프로젝트 처음에 설치해야합니다.)
npm uninstall -g create-react-app
reactfront라는 이름의 앱을 생성하는 중입니다.. .
몇 초에서 몇 분까지 소요되고 happy hacking! 이라고 뜨면 정상적으로 설치된 것입니다.
이후,
1.Preference- Build,Execution, Deployment - Build Tools -Gradle 에서
Build and run using & Run tests Using 모두 IntelliJ IDEA로 바꾸어줍니다.
2. main 아래에 package.json 파일을 열고, scripts 위에 ``` "proxy" : "http://localhost:8080", ``` 프록시 설정을 추가해줍니다.->localhost:3000 를 사용하는 클라이언트에서 다른 origin을 사용하는 서버와 API 통신을 한다면 package.json 에 proxy 설정이 필요하기 때문입니다.
- build.gradle 파일을 열어 맨 아래에 하기의 내용을 추가해줍니다.(Gradle설정)
def webappDir = "$projectDir/frontend"
sourceSets {
main {
resources {
srcDirs = ["$webappDir/build", "$projectDir/src/main/resources"]
}
}
}
processResources {
dependsOn "copyWebApp"
}
task copyWebApp(type: Copy) {
dependsOn "buildReact"
from "$webappDir/build"
into "$projectDir/src/main/resources/static"
}
task buildReact(type: Exec) {
dependsOn "installReact"
workingDir "$webappDir"
inputs.dir "$webappDir"
group = BasePlugin.BUILD_GROUP
if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
commandLine "npm.cmd", "run-script", "build"
} else {
commandLine "npm", "run-script", "build"
}
}
task installReact(type: Exec) {
workingDir "$webappDir"
inputs.dir "$webappDir"
group = BasePlugin.BUILD_GROUP
if (System.getProperty('os.name').toLowerCase(Locale.ROOT).contains('windows')) {
commandLine "npm.cmd", "audit", "fix"
commandLine 'npm.cmd', 'install'
} else {
commandLine "npm", "audit", "fix"
commandLine 'npm', 'install'
}
}
이후 다시 gradle build를 하고
프로젝트 빌드를 한 후에
npm start3000 포트만 아니라 8080 포트에서도 같은 리액트 화면 동작이 적용 되는 것을 확인하면 성공
