React Component > HTML / CSS / JS > DOM Elements

React는 Flutter와 유사하게 선언형 UI를 구축하게 되어있다. (보통은 React를 익힌 상태로 Flutter를 할텐데 난 왜 이러고 있는가?)

React를 사용하기 위해선 npm이 필요하고, npm을 쓰기 위해선 node.js가 필요하다.

현재 node.js의 최신버전은 17이지만, 17에는 일부 동작이 원활하지 않은 기능들이 있어, LTS (장기 지원 버전) 인 16버전을 설치하는 것을 추천.

Create React App - React를 가장 쉽게 시작하는 방법 (그런데 npx는 또 뭐람?...)

JSX

React에서 HTML을 JS에서 표현할 때 사용하는 문법 마치 JS 내에 HTML 코드를 그냥 리터럴로 쓴 것 같은 느낌?

사실, 쓰는건 간단하지만 그 뒤에서는 React의 여러 base코드가 작동하여 엄청나게 복잡한 과정을 겪은 뒤, HTML 형태로 변환이 됨. (개발자 도구의 sources 의 static 내부 js의 코드 상태를 보고 읽는 것을 포기 했습니다.)

Component

React의 Component는 JavaScript의 함수일 뿐이긴 하다.

function CustomComponent() {
	return <h2>This is Custom Componenet</h2>
}

export default CustomComponent;

위의 코드대로 JSX를 활용하여 Custom 한 Component를 생성 후,

import CustomComponent from './path/CustomComponent'

function App() {
	return(
		<div>
			<h1>Test Custom Component</h1>
			<CustomComponent></CustomComponent>
		</div>
	)
}

import문을 통해 Componenet를 주입하여 JSX의 태그처럼 활용 할 수 있다. 이 때 캐치하면 좋은 것은 태그명이 대문자로 시작하는 경우 Component로 만들어진 객체다. 라는 점을 확인 할 수 있으면 좋을 듯.

또한, Component를 활용 시 주의사항으로 병렬된, 즉 동일한 범위 내의 태그를 연달아 사용하는것이 불가능하다.

function CustomComponent() {
	return <div>혹시 이거</div><div>될 것 같아?</div>
}

export default CustomComponent;

위의 코드의 경우 2개의 div 태그가 병렬되어있는데, 해당 코드를 정 사용하고 싶다면, 그 위를 상위 div로 감싸 하나의 태그로 묶어 보내주는 방법이 있다.

function CustomComponent() {
	return (
		<div>
			<div>이러면</div>
			<div>문제 해결</div>
		</div>
	)
}

export default CustomComponent;