[SpringBoot&React] 리액트 구조와 변수 적용

🤍React.js 구조

• build : 빌드 시 생성되는 디렉토리
• node_modules : 리액트 실행에 필요한 모듈 디렉토리
• public : 정적 파일 디렉토리
• src : 프로젝트 source 디렉토리

 

🤍React.js 변수 적용

기존 자바스크립트에서 <div> 태그 안에 변수를 적용할 때에는 아래와 같은 코드가 필요했다.

<div></div>
<script>

	let name = 'hancoding';
    
	document.getElementById('id').innerHTML = name;
</script>

 

하지만 리액트에서 변수를 적용할 때에는 이렇게 <div>{변수명}</div> 간단한 방법으로 변수를 적용할 수 있다.

let name = 'hancoding';

<div>{name}</div>

 

실제 크롬에서 확인해 봐도 <div>태그 안에 hancoding이 들어간 것을 확인할 수 있다.