우리는 앞에서 리액트를 쓰기 위해 간단한 자바스크립트 부터 복잡한 함수형 프로그래밍 등 여러가지를 보았습니다 이제 이것들을 바탕으로 이 장부터 React 에 대한 이야기를 하도록 하겠습니다 그전에 리액트가 무엇인지 먼저 알아보겠습니다
리액트란
리액트는 전 페이스북 현 메타에서 개발한 오픈소스 자바스크립트 라이브러리로 사용자 인터페이스를 만들기 위한 도구입니다 리액트는 컴포넌트 기반의 아키택처를 통해 재사용성과 유지보수성을 향상시킵니다 리액트는 가상 돔 이라는 효율적인 업데이트 매커니즘을 사용하여 성능을 최적화 하며 컴포넌트들은 state , props 로 상태 및 데이터를 관리하며 상태의 변경에 따라 화면을 업데이트 하게 됩니다 리액튼느 JSX 라는 문법을 사용해서 UI 를 선언적으로 작성할 수 있게 됩니다
가상돔
DOM 은 우리가 알고 있는 HTML 에서 태그들을 나타냅니다 기존 jsp 또는 thymeleaf 등으로 개발을 하게 되면 직접 DOM 을 조작해서 html 화면을 변경하고 데이터를 렌더링 하는 작업을 많이 해왔을 것입니다 하지만 이러한 작업은 성능 및 메모리에 그렇게 좋지 못한 사용환경을 남기게 됩니다 그 결과 리액트에서는 실제 DOM 과 똑같은 가상 DOM 을 만들게 되었고 이 가상 DOM 을 업데이트 해서 새롭게 렌더링 하는 방식을 채택하게 되었습니다 실제 가상돔은 변경이 일어났을때 변경된 부분만 찾아내어서 리렌더링 하는 과정을 밟게 됩니다
state
리액트 컴포넌트 관리되는 데이터의 현재 상태를 나타냅니다 컴포넌트 상태가 변경되는 가상돔이 변경점을 찾아내어서 리렌더링 하는 과정을 밟게 됩니다
props
리액트, 컴포넌트 간의 데이터를 전달하는데 사용되는 메커니즘입니다 부모 컴포넌트에서 자식컴포넌트로 데이터를 전달하거나 컴포넌트 외부에서 값을 제어할때 props 를 사용하게 됩니다
JSX
리액트에서 사용되는 문법 확장으로 JavaScript 와 XML 합친 코드 입니다
이렇게 용어들을 머저 살펴보았고 이 들 용어는 앞으로 진행을 해 나가면서 하나씩 나올 예정입니다
CDN 으로 React 개발하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello React</title>
</head>
<body>
<div id = "root">
</div>
</body>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src = "./myButton2.js"></script>
</html>
myButton2.js
1
2
3
4
5
6
7
8
9
10
11
12
13
function MyButton(){
return React.createElement(
'button' ,
{onClick : () => {alert('클릭했습니다.')}},
'클릭alert 메세지 출력'
)
}
const domContainer = document.querySelector("#root")
ReactDOM.render(React.createElement(MyButton) , domContainer);
우리는 npm 이나 여타 다른 추가 설치 없이 cdn 으로 간단한 react 어플리케이션을 만들 수 있다 이때 myButton2.js 의 MyButton 의 함수가 리액트가 말하는 컴포넌트이다 컴포넌트 값 안에 들어가는 것은 차차 배울것이니 여기서는 버튼을 만들고 onClick 함수를 만들고 , 버튼 텍스트를 만든 컴포넌트라고 생각을 해주면 좋겠습니다
ReactDOM.render(React.createElement(MyButton) , domContainer); 를 하게 되면 우리가 만든 버튼을 리액트 둠에 렌더링 하는 과정입니다 그럼 화면을 보게 되면
이렇게 되는것을 확인할 수 있습니다