React(리액트)를 이용해 간단한 컴포넌트와 이벤트를 간단하게 구현해봅시다.
컴포넌트와 이벤트 구현
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = (
<h3 id="title" onMouseEnter={() => console.log("마우스가 들어왔습니다.")}>
h3 텍스트
</h3>
);
const Button = (
<button
style={{ backgroundColor: "gray" }}
onClick={() => console.log("클릭되었습니다.")}
>
클릭해보세요!
</button>
);
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root);
</script>
</html>
h3 텍스트에 마우스가 진입하면 '마우스가 들어왔습니다.'라는 텍스트가 콘솔에 출력되고, 버튼을 클릭하면 '클릭되었습니다.'라는 문구가 콘솔에 출력됩니다.
코드가 어떻게 작동하는지 한 줄씩 확인해봅시다.
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
이 코드는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 중 하나인 React를 로드하는 코드입니다.
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
이 코드는 React에서 작성한 객체 모델인 DOM을 실제 페이지에 표시하는 역할을 수행하는, ReactDOM을 로드하는 코드입니다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
이 코드는 최신 버전의 JavaScript 코드를 옛날 버전의 JavaScript 코드로 변환해주는 역할을 수행하는, Babel을 로드하는 코드입니다.
필요한 기능들을 모두 로드했으니 이제 React에서 컴포넌트를 생성하는 방법에 대해 알아봅시다.
const Title = (
<h3 id="title" onMouseEnter={() => console.log("마우스가 들어왔습니다.")}>
h3 텍스트
</h3>
);
JavaScript의 확장 문법인 JSX 문법을 사용하면 컴포넌트를 이렇게 HTML 문법에 가깝게 작성하여 생성하고, 해당 컴포넌트에 이벤트를 추가할 수 있습니다.
물론 이 문법을 옛날 JavaScript 코드처럼 인식시키기 위해서, 위에서 로드한 Babel이 필요합니다.
기존 Vanilla JavaScript 문법과 비교했을 때 훨씬 간단하게 컴포넌트를 생성하고 이벤트를 추가할 수 있습니다.
const root = document.getElementById("root");
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root);
이제 root 요소를 찾아주고, 컨테이너를 구성한 뒤 root에 container를 렌더해주면 첫 이미지로 첨부한 화면과 같이 컴포넌트와 이벤트가 제대로 렌더되는 것을 확인할 수 있습니다.
코드 개선
코드를 확인해보면 Container는 Title 컴포넌트와 Button 컴포넌트를 포함하고 있습니다.
리액트(React)에서는 이 컴포넌트들을 html 형식의 문법으로 작성해 줄 수 있습니다.
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = () => (
<h3 id="title" onMouseEnter={() => console.log("마우스가 들어왔습니다.")}>
h3 텍스트
</h3>
);
const Button = () => (
<button
style={{ backgroundColor: "gray" }}
onClick={() => console.log("클릭되었습니다.")}
>
클릭해보세요!
</button>
);
const Container = (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(Container, root);
</script>
</html>
단순히 h3 컴포넌트로 구현해준 Title을, h3 컴포넌트를 반환하는 함수로 바꿔줍니다.
그러면 우리는 <Title />과 같이 호출하여 작성한 위치에서 우리가 선언한 컴포넌트를 반환받을 수 있습니다.
이때 주의할 점은, 함수 이름의 첫 글자를 반드시 대문자로 작성해주어야 한다는 것입니다.
함수 이름의 첫 글자를 소문자로 작성한다면, 해당 코드 조각을 호출할 때 태그 이름을 html 태그로 인식하게 되기 때문입니다. (이를 구분하기 위해 대문자로 작성하도록 설정되어 있습니다.)
Button에 대해서도 동일한 처리를 해줍니다.
이렇게 코드를 작성하면, html 형식과 거의 비슷하게 작성하면서도 코드 조각들을 한눈에 알아보기 쉽게 배치할 수 있게 됩니다.
'웹 개발 > React' 카테고리의 다른 글
| React(리액트) create-react-app으로 프로젝트 생성하기 (0) | 2024.02.19 |
|---|---|
| React(리액트) props(속성) 활용과 예시 (+ propTypes) (1) | 2024.02.18 |
| React(리액트) 컴포넌트 분할/조각화를 통해 코드 가독성 높이기 (0) | 2024.02.17 |
| React(리액트) State를 이용해 단위 변환기 구현하기 (0) | 2024.02.16 |