1. Function Component & Class Component
// 함수형 컴포넌트
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환한다.
// 클래스형 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}ES6 Class를 사용해 컴포넌트를 정의하면 된다.
- 함수형에서 클래스형 컴포넌트로 바꾸기
-
React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다.
-
render()라고 불리는 빈 메서드를 추가합니다.
-
함수의 내용을 render() 메서드 안으로 옮깁니다.
-
render() 내용 안에 있는 props를 this.props로 변경합니다.
※ 주의
사용자 정의 컴포넌트는 반드시 대문자로 시작해야 한다.
Element가 소문자로 시작하는 경우에는 <div> 나 <span> 같은 내장 컴포넌트라는 것을 뜻하며 'div' 나 'span' 같은 문자열 형태로 React.createElement에 전달된다. <Foo />와 같이 대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일되며 JavaScript 파일 내에 사용자가 정의했거나 import 한 컴포넌트를 가리킨다고 한다.
2. Props
props는 읽기 전용이다.
함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.
App.js
// APP.js
import React, { Component } from 'react'
import Subject from './components/Subject'; //컴포넌트 import
import Content from './components/Content'; //컴포넌트 import
class App extends Component {
render() {
return (
<div className="App">
<Subject title="WEB" sub="Wold Wide Web!" /> // props 전달
리액트 공부하기!
<Content title="HTML" desc="HTML is ..." /> // props 전달
</div>
);
}
}
export default App;
하위 컴포넌트에 전달할 데이터를 props로 전달한다. 여기선 <Subject>, <Content> 각 컴포넌트에 porps를 전달해줬다.
Subject.js
// Subject.js
import React, { Component } from 'react'
export default class Subject extends Component {
render() {
console.log('Subject render!');
return (
<header>
<h1>{this.props.title}</h1> // 전달받은 props를 사용해 렌더링한다.
{this.props.sub}
</header>
)
}
}
Content.js
// Content.js
import React, { Component } from 'react'
export default class Content extends Component {
render() {
return (
<article>
<h2>{this.props.title}</h2> // 전달받은 props를 사용해 렌더링한다.
{this.props.desc}
</article>
)
}
}
전달받은 props를 사용할 때는 현재 Class를 가리키는 this를 사용한다.
this.props.(전달받은 props 명) 형식으로 중괄호와 함께 사용해주면 받은 데이터를 렌더링 할 수 있게 된다.
- 결과 화면
'JavaScript > React' 카테고리의 다른 글
| [React] Memoization Hooks - useMemo, useCallback (0) | 2021.02.25 |
|---|---|
| [React] Class Component vs Function Component (0) | 2020.12.03 |
| [React] 이벤트 처리하기 (0) | 2020.12.01 |
| [React] State 다루기 (0) | 2020.11.30 |
| [React] React Hooks - useState, useEffect (0) | 2020.11.13 |