[스타이퍼팩토리] 2일차(2)_리액트 돔(DOM), 컴포넌트, JSX, CSS 스타일링
1. 리액트 프로젝트 생성
-npx
//설치
npx create-react-app my-app
//실행
npm run start
- npm
npm install -g creact-react-app
create-react-app my-app
- vite
최근에는 npx, npm보다 vite를 사용해서 프로젝트를 생성하는게 주목받고 있다.
//설치
npm create vite@latest
//실행
npm run dev
다음으로, React와 TypeScript+SWC를 선택해주면 된다.
2. 돔(DOM)과 가상돔(Virtual DOM)
돔(DOM)
DOM(Document Object Model)은 문서 객체 모델을 의미한다. 이때 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다.
DOM은 다음과 같이 트리 구조이다.
웹 브라우저는 이러한 DOM의 구성 요소 중 일부를 변경하면, 그 일부와 연결된 모든 DOM을 업데이트 한다. 이러한 비효율적인 DOM의 동작 원리에 대비해 만든 것이 가상 돔이다.
가상돔(Virtual DOM)
가상 돔은 실제 돔에 접근하여 조작하는 대신, 이것을 추상화시킨 자바스크립트 객체이다.
최종적으로 실제 DOM과 비교하여 변경된 부분만 업데이트하기 때문에 DOM 구성 요소의 변경에 대한 작업 비용이 낮고 효율적이다.
- 동작 방식
- 변화 발생
- 실제 돔의 복사본인 가상돔을 2개 생성한다.
- 가상돔 한 개는 실제 돔의 원래 UI를, 다른 가상돔은 변화된 부분을 반영한 UI를 저장한다.
- 변화 전의 가상돔과 변화된 가상돔을 비교한다.
- 바뀐 부분만 실제 돔에 적용한다.
3. 컴포넌트
CreateElement
동적으로 특정 태그의 HTML 요소를 생성하려면 자바스크립트의 createElement() 메소드를 사용할 수 있다.
- 기본형
const element = createElement(type, props, ...children);
- 활용
//예시1
import { createElement } from 'react';
function Greeting() {
return createElement(
'h1',
{ className: 'greeting' },
'Hello, World'
);
}
//결과
<h1 class="greeting">Hello, World</h1>
//예시2
import { createElement } from 'react';
function Greeting() {
return createElement(
"div",
null,
createElement("h1", { className: "greeting" }, "Hello, World")
);
}
//결과
<div>
<h1 class="greeting">Hello, World</h1>
</div>
JSX(Javascript XML)
JSX는 Javascript XML의 약자로 자바스크립트를 확장한 문법이다. JSX를 사용하면 자바스크립트와 HTML 마크업을 하나의 파일에서 작성할 수 있다.
- 기본 문법
const element = <h1>Hello, world!</h1>;
- 활용
function Greeting() {
return (
<div>
<h1 className="greeting">Hello, World!</h1>
<p>Welcome to React</p>
</div>
);
}
//결과
<div>
<h1 class="greeting">Hello, World!</h1>
<p>Welcome to React</p>
</div>
JSX 규칙
1. 반드시 하나의 루트 태그로 구성되어야 한다.
//<></>는 의미 없이 태그를 묶기 위해서 사용
const App = () => {
return (
<>
<div>App</div>
<div>App</div>
</>
)
}
2. 반드시 태그를 닫아야 한다.
// <br>이 아닌 <br/> 사용
const App = () => {
return (
<br/>
)
}
3. 표현식은 {}를 사용한다.
const App = () => {
const name = "Lynn";
return <div>{name}</div>;
};
4. class 속성은 className으로 정의한다.
//class가 아닌 className
const App = () => {
return <div className="Hi">Hello, World!</div>;
};
5. 함수형 컴포넌트 이름은 항상 대문자로 사용한다.
//app이 아닌 App 사용
const App = () => {
return <div className="Hi">Hello, World!</div>;
};
4. CSS 스타일링
인라인 스타일(Inline Style)
인라인 스타일은 HTML 태그의 style 속성을 사용해서 CSS 스타일을 지정하는 방식이다.
참고로 font-size가 아닌 카멜케이스 형식인 fontSize로 작성한다.
export default function App() {
return (
<>
<h1
style={{
color: 'red',
fontSize: '5rem',
textDecoration: 'underline',
}}
>
App Component
</h1>
</>
);
}
cf)
- 카멜케이스 ex) userEvent
- 파스칼케이스 ex) UserEvent
- 스네이크케이스 ex) user-event
- 현재 디렉토리 -> ./
- 상위 디렉토리 -> ../
- 상위 디렉토리의 상위 디렉토리 -> ../../
외부 스타일(External Stylesheet)
외부 스타일은 별도의 CSS 파일에 CSS 코드를 작성하고, 리액트 컴포넌트 파일과 연결해서 사용한다.
cf) global.css -> index.css ->
global.css 파일에 모든 css 코드를 작성하고, index.css 파일에서 @import "./global.css"; 코드를 이용해서 import 한다. 후에 사용을 원하는 다른 파일에서는 index.css 파일을 import해서 사용하면 더 편리하다.
- App.css
.title{
color:red;
text-decoration: line-through;
}
- App.tsx
import "./App.css";
const App = () => {
return (
<div>
<h1 className="title">Hello World!</h1>
</div>
);
};
export default App;
CSS Modules
모듈 방식을 사용해서 특정 컴포넌트에만 종속되는 CSS 코드를 작성한다. 파일명이 *.module.css라는 특징이 있다.
*.module.css와 *.tsx에서 *는 동일하게 사용한다.
- App.moudle.css
.title{
color:red;
text-decoration: line-through;
}
- App.tsx
import styles from "./App.module.css";
const App = () => {
return (
<div>
<h1 className={styles.title}>Hello World!</h1>
</div>
);
};
export default App;
출처 : [수코딩(https://www.sucoding.kr)]