🌿 React의 특징 ⇒ 파일 분리

React 작동 방식

HTML은 <div id="root"></div>만 만들어 놓고, 자바스크립트로 HTML 만들어서 해당 태그 아래에 자바스크립트를 집어넣는 방식입니다.

React의 장점

자바스크립트 파일을 100개, 1000개 쪼갤 수 있어서(일기목록, 일기페이지내이션, 일기등록모달, ...) 부품 조립하듯이 홈페이지 조립 가능하고, 똑같은 컴포넌트(부품)를 여러번 재사용도 가능한 장점이 있습니다.

아래 예시처럼 조립해보세요!

// button.js
const 철수의버튼 = <button>등록하기</button>

// input.js
const 영희의인풋 = () => {
	const 기본값 = "비밀번호를 입력하세요"

  return <input type="text" placeholder={기본값} />
}

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>리액트 실습</title>

		<!-- 리액트 다운로드 -->
		<script crossorigin src="<https://unpkg.com/react@18/umd/react.production.min.js>"></script>
		<script crossorigin src="<https://unpkg.com/react-dom@18/umd/react-dom.production.min.js>"></script>

		<!-- 바벨 다운로드 -->
		<script type="text/javascript" src="<https://unpkg.com/babel-standalone@6/babel.js>"></script>

		<script type="text/babel" src="./button.js"></script>
		<script type="text/babel" src="./input.js"></script>
		<script type="text/babel">
			const root = ReactDOM.createRoot(document.getElementById('root'));

			/* 1. 변수는 중괄호에다가 쓰면 알아서 바벨이 진짜 HTML로 바꿔줌 */
			/* 2. 함수는 태그에다가 쓰면 알아서 바벨이 진짜 HTML로 바꿔줌 */
			root.render(
				<div>
					{철수의버튼}
					<br />
					<영희의인풋 />
				</div>
			);
		</script>
	</head>
	<body>
		<div id="root"></div>
	</body>
</html>

💡 기존의 innerHTML 방식으로도 아래 코드와 같이 문자열 태그로 조립할 수 있지 않나요?

document.getElementById("root").innerHTML = `
	<div>
		${철수의버튼}
		<br />
		${영희의인풋()}
	</div>
`

💥 주어진 코드처럼 작성하여도 의도대로 실행되지만, ${철수의버튼}, <br />, ${영희의인풋()} 3개중에 1개라도 변경되면 위 코드를 다시 실행해서 전체를 새로 innerHTML에 그리게 됩니다.

💥 반면 리액트는 구성된 로직에 따르면, 바뀐 것만 인지해서 그 부분만 다시 그려줍니다. 예를 들어, <영희의인풋 /> 내용이 변경된다면, {철수의버튼}과 <br />은 그대로 있고, <영희의 인풋 />만 다시 그려줍니다.

📝 실습 코드