react와 같이 렌더링을 전체적으로 담당하는 프론트엔드 라이브러리는 개발 환경이 중요하다.
- VS Code 설치
메모장과 같은 텍스트 편집 프로그램을 사용해도 코딩할 수 있지만, 자동 정렬, 자동 완성 등의 부가적인 기능을 제공하는 소프트웨어를 사용하면 더 수월하게 코딩할 수 있다. 이러한 기능을 제공하는 소프트웨어 프로그램을 IDE라고 한다. VS Code는 마이크로소프트에서 개발한 IDE로, 웹 개발 전용 소프트웨어이다. VS 2019 / 2022 등과는 다른 용도의 차이점이 있다. 이후 VS Code에 내장되어있는 터미널을 사용하여 명령어를 실행할 수 있다.
- react 설치
기존 정적 html파일에 CDN으로 react 설치 경로를 가져와<head>태그 내에 추가한다.
<!DOCTYPE html>
<html>
<head>
<title>react html 설치 예제</title>
<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>
</head>
<body>
</body>
</html>- DOM 컨테이너 추가
Virtual DOM이 들어가 있어야 하는 DOM 컨테이너를 작성해줘야한다. Virtual DOM이 시작되는 뿌리라고 볼 수 있으며 React DOM Node라고 불리기도 한다. 다음과 같이<body>태그 내에 작성해준다.
<body>
<div id="root"></div>
</body>
// 컨테이너로 지정하기 위해 다른 태그와 식별이 필요하므로 id="root" 라는 값을 추가한다.- 컴포넌트를 작성한다.
script 태그 안에 react 컴포넌트를 다음과 같이 작성한다. 아래는 버튼을 클릭했을 때 버튼의 텍스트가 바뀌는 예제이다.
<script>
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
const element = React.createElement(
'h1',
{ onClick: () => setIsClicked(true) },
isClicked ? 'CLicked!' : 'Clicked here...'
);
return element;
}
</script> React.useState()는 상태를 관리해주는 함수이다.
React.createElement() 는 react 컴포넌트를 만들어주는 함수이다.
-
컴포넌트 render
위와 같이 작성된 컴포넌트는 render 동작 없이 아무것도 수행되지 않는다. 작성된 컴포넌트를 render시켜주기 위해선 다음과 같은 작업이 필요하다.const root = document.getElementById('root'); const rootElement = ReactDOM.createRoot(root); const MyComponent = React.createElement(MyButton); rootElement.render(MyComponent);
- document.getElementById('root');
html파일에서 작성된<div id='root'>를 가져오는 방법이다. 이 element 내에 모든 react 컴포넌트들이 render된다.
-
ReactDOM.createRoot(root);
본격적으로 react의 기능을 사용하는 구간이다. root 엘리먼트를 기반으로 react의 루트(뿌리)를 생성한다. -
React.createElement(MyButton);
MyButton function을 react의 컴포넌트로 바꿔주는 역할을 한다. -
rootElement.render(MyComponent);
구현된 component를 rootElement에 렌더링해준다.
위에서 사용된 React와 ReactDOM은 무엇이며 어떤 역할을 할까?
- React - 컴포넌트의 생성, 상태 관리, hook 등의 핵심 기능을 제공
- ReactDOM - react의 컴포넌트를 실제 브라우저 DOM에 렌더링하고 관리하는 제공
지금까지 html 내부에서 CDN으로 react를 추가한뒤, 간단한 react 컴포넌트를 만들고, 실제 컴포넌트로 렌더링해서 간단한 react 웹 애플리케이션으로 만들어보았다. react를 사용해서 웹사이트를 만들 때마다 매번 이러한 환경 설정을 해줘야 한다면 번거로울 것이다.
이 모든 과정을 자동으로 해주고, react 애플리케이션을 효율적으로 디버깅까지 해줄 수 있는 패키지가 있다. 바로 CRA (Create React APP) 이다. 다음 포스트에서 이를 다뤄보겠다.
안녕하세요! 26살 프론트엔드 개발자입니다! (2024/03 ~)