티스토리 뷰
함수형 컴포넌트
함수형 컴포넌트는 객체가 아닌 함수입니다. 따라서 함수형 컴포넌트 영역에서는 this가 없습니다. 함수형 컴포넌트는 속성을 인자로 전달받아 그것을 기반으로 동작을 실행한 후 DOM 엘리먼트를 반환하는 함수입니다. 컴포넌트 구조를 단순하게 유지하고자 할 때에는 클래스 기반의 컴포넌트보다 함수형 컴포넌트를 사용하는 편이 좋습니다.
아래는 함수형 컴포넌트를 사용한 예제 코드인데, 이 글의 앞선 글에서 사용했던 예제를 거의 재활용하다시피 하는 예제이므로 앞선 글을 참고하시면 비교적 편하실 것입니다.
이전 글 =>
https://penguingoon.tistory.com/214
React 컴포넌트 만들기 | React.Component
React.Component 최신 자바스크립트에서는 객체를 만들기 위한 설계도의 개념인 class가 추가되었습니다. 그리고 리액트를 사용해 컴포넌트를 새로 만들 때는 React.Component라는 클래스를 기반으로 생��
penguingoon.tistory.com
예제 프로젝트의 구조는 다음과 같습니다.
위 두 파일로 구성해주시면 됩니다. 다음은 코드입니다.
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script crossorigin
src="https://unpkg.com/react@16/umd/react.development.js">
</script>
<script crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>
<title>React Simple Example</title>
</head>
<body>
<!-- 타겟 컨테이너 -->
<div id="react-container"></div>
<!-- <script src="sample.js"></script> -->
<!-- <script src="sample-class-component.js"></script> -->
<script src="sample-func-component.js"></script>
</body>
</html>
|
sample-func-component.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
const playerList = (props) =>
React.createElement("ul", {className: "players"},
props.items.map((player, i) =>
React.createElement("li", { key: i }, player)
)
)
const items = ["박용택", "오지환", "유강남"]
ReactDOM.render(
React.createElement(playerList, {items}, null),
document.getElementById('react-container')
)
|
위의 playerList라는 이름의 화살표 함수는 props를 인자로 받아서 props 안에 있는 데이터를 가지고 리스트를 만들어 반환합니다.
10번 줄부터 시작되는 render 메소드에서는 반환되는 DOM 엘리먼트를 타겟 컨테이너에 렌더링하고 있습니다.
마지막으로 위 예제의 결과를 보이면서 마무리하도록 하겠습니다.
'IT > React' 카테고리의 다른 글
| create-react-app 컴포넌트 만들기 with JSX (0) | 2020.09.11 |
|---|---|
| create-react-app 코드 수정하기 (0) | 2020.09.09 |
| create-react-app 시작하기 (0) | 2020.09.09 |
| React 컴포넌트 만들기 | React.Component (0) | 2020.09.07 |
| React 소개 동작원리 그리고 초간단 예제 (0) | 2020.09.07 |