리액트 함수형 컴포넌트
React Functional Components
리액트는 클래스형과 함수형 이 2가지 형식으로 컴포넌트를 만들 수 있습니다. 어떤 형식으로 작성하든 결국 모두 같은 내용을 표시합니다. 하지만 함수형 컴포넌트는 클래스형 컴포넌트보다 비교적 간결하게 기술할 수 있습니다. 그리고 요즘은 클래스형보다 함수형을 더 많이 사용하는 추세입니다. 다음 두 예제는 형태만 다를 뿐 모두 같은 내용을 렌더링합니다.
클래스형(ClassComponent.jsx)
import React, { Component } from 'react';
class ClassComponent extends Component{
render(){
return(
<div>
Hello, world!
</div>
);
}
}
export default ClassComponent;
함수형(FunctionalComponent.jsx)
import React from 'react';
const FunctionalComponent = () => {
return(
<div>
Hello, world!
</div>
);
}
export default FunctionalComponent;
다른 형태로 작성한 두 컴포넌트를 App.js에 불러와서 같은 내용을 출력하는지 확인합니다.
App.js
import React from 'react';
import FunctionalComponent from './basic/FunctionalComponent';
import ClassComponent from './basic/ClassComponent';
function App() {
return (
<div>
<FunctionalComponent />
<ClassComponent />
</div>
);
}
export default App;
결과
형태는 다르지만 결국 같은 내용을 출력한다는 것을 알 수 있습니다. 이렇듯 함수형은 클래스형보다 아주 간단하게 정의할 수 있습니다. 함수형은 클래스형과는 다르게 render()를 따로 작성하지 않고 바로 return을 합니다. 왜냐하면 함수형은 화면에 표시하기 위한 DOM 정보를 반환값으로 작성하기 때문입니다. 작성법은 일반적으로 함수 이름을 컴포넌트 이름으로 하며, 클래스형과 마찬가지로 첫 글자를 대문자로 정의하여 작성합니다.
ECMAScript2015 이후 구문이 확장되어 함수 선언을 다양하게 다룰 수 있게 되었습니다. 아래 예시를 참고하세요.
FunctionalComponent.jsx
import React from 'react';
function Children1(){
return <p>1: Hello, world!</p>
}
const Children2 = () => {
return <p>2: Hello, world!</p>
}
const Children3 = () => <p>3: Hello, world!</p>
const FunctionalComponent = () => {
return(
<div>
Hello, world!
<Children1 />
<Children2 />
<Children3 />
</div>
);
}
export default FunctionalComponent;
App.js
import React from 'react';
import FunctionalComponent from './basic/FunctionalComponent';
function App() {
return (
<div>
<FunctionalComponent />
</div>
);
}
export default App;
결과
'[ Programming ] Basic > React' 카테고리의 다른 글
[리액트(React) 학습자를 위한 기초지식] Props&State - #1 props (0) | 2020.02.06 |
---|---|
리액트(React) JSX (0) | 2020.02.05 |
[리액트(React) 학습자를 위한 기초지식] 템플릿 리터럴, 구조분해 할당 (2) | 2020.02.03 |
[리액트(React) 학습자를 위한 기초지식] var, let, const 차이점 - #2 hoisting, 적용범위 (0) | 2020.02.02 |
[리액트(React) 학습자를 위한 기초지식] var, let, const 차이점 - #1 재선언, 재할당 (0) | 2020.02.01 |
댓글