오늘의 꿀팁
💡 기능 별로 함수를 분리해서 만들어서 사용하는게(함수 하나 당 기능 하나) 코드 이해와 유지보수에 좋다.
⚛️ React 특징
메타(구 Facebook)에서 관리하고 있는 오픈소스 프로젝트
- UI 컴포넌트를 만들고
- 만들어진 컴포넌트를 통해 사용자와 인터렉션을 하고
- 화면을 업데이트 하는데 최적화 되어있다.
Virtual DOM(가상 돔)
바닐라 JS로 컴포넌트를 만들고 사용자 인터렉션을 통해 화면에 업데이트가 일어나게 되면 필연적으로 repaint, reflow 현상이 일어난다. 즉 브라우저는 변화된 화면을 구현하기 위해 레이아웃 -> 페인트 -> 컴포지팅 단계를 반복해야 한다.
리액트는 이러한 과부하를 줄이기 위해 메모리에만 존재하는 가상 돔을 만들어 사용자의 반응으로 인한 변화를 미리 가상 돔에 반영하고 한번에 화면에 반영하는 전략을 사용하고 있다. 이를 통해 repaint, reflow 현상을 최소화한다. 바닐라 JS의 DocumentFragment를 이용하는 방식과 비슷하다.
참고 자료 https://velopert.com/3236
JSX(JS + XML)
const element = <h1>hello world</h1>와 같은 형태로 만들고자 하는 컴포넌트 안에 들어가는 HTML 요소들을 JS 안에서 실제 HTML의 모습과 동일하게 사용할 수 있도록 고안된 JSX를 지원한다. 이는 후에 JS에 등장한 template literal과 매우 유사하다.
<body>
<div id="root"></div>
<script type="text/babel">
function GreetingJsx({ name }) {
// JSX에서 코드의 개행이 필요할 경우 소괄호를 사용하여 묶는다
return (
<h1 className='greeting'>
Hello <i>{name}</i>. Welcome!
</h1>
)
}
function App() {
return React.createElement(GreetingJsx, { name: '지수' })
}
const root = document.getElementById('root');
// ReactDOM.createRoot 함수는 React 18부터 도입된 함수로
// React 애플리케이션에서 루트 노드를 만들고, 그 루트 노드를 기반으로 리액트 앱을 렌더링하는데 사용된다
const rootReact = ReactDOM.createRoot(root);
rootReact.render(<App />);
</script>
</body>React 사용 이유
페이지 구성요소의 컴포넌트화
React 라이브러리의 목적은 컴포넌트를 사용자 정의 요소로 표현하는 것
<App />: 사용자 정의 요소
<body>
<div id="root"></div>
<script type="text/babel">
// 함수형 컴포넌트
function Header() {
return (
<header>
<h1>hello world shop</h1>
<nav>
<ul>
<li>링크1</li>
<li>링크2</li>
<li>링크3</li>
<li>링크4</li>
<li>링크5</li>
</ul>
</nav>
</header>
)
}
function Main() {
return (
<main>
<h2>hello world!</h2>
<p>product list</p>
<ul>
<li>best seller 옷1</li>
<li>best seller 옷2</li>
<li>best seller 옷3</li>
<li>best seller 옷4</li>
<li>best seller 옷5</li>
<li>best seller 옷6</li>
<li>best seller 옷7</li>
<li>best seller 옷8</li>
<li>best seller 옷9</li>
<li>best seller 옷10</li>
</ul>
</main>
)
}
function Footer() {
return (
<footer>
<h2>hello footer!</h2>
<address>제주시 인다 1길</address>
</footer>
)
}
const body = (
<div>
{/* JSX 주석 표시방법 */}
{/* {Header()} */}
{/* {Main()} */}
{/* {Footer()} */}
<Header />
<Main />
<Footer />
</div>
);
const domContainer = document.querySelector('#root');
const root = ReactDOM.createRoot(domContainer);
root.render(body);
</script>
</body>대규모 프로젝트에서 복잡도를 줄여 더 효율적인 관리와 유지보수가 가능하게 해준다.
일정 규모 이상으로 반복되는 UI 작업을 해야할 때 속도를 향상시킬 수 있다.
함수로 선언된 컴포넌트는 태그처럼 꺽쇠(<>)로 묶이고, 변수로 선언된 것들은 중괄호({})로 묶인다. 중괄호 안에는 JavaScript 표현식이 그대로 들어갈 수 있다.
* 함수 실행 => 리턴 값 반환, 표현식이라고 할 수 있기 때문에 {} 안에 담을 수 있다.
