React 개발환경 세팅을 하게되면 기본적으로 class형 컴포넌트로 이루어져 있다. (App.js)
하지만, class형 컴포넌트보다 좀 더 간단하게 선언할 수 있다.
바로, 함수형 컴포넌트(Functional Component)를 사용하면 된다.
하지만, 조건이 있다.
1. 해당 컴포넌트에서는 state를 사용하지 않는다.
2. 해당 컴포넌트에서는 라이프사이클 API를 사용하지 않는다.
두 가지만 기억하면 된다. 함수형 컴포넌트를 사용하기 위해서는 위 2가지.
state와 컴포넌트 라이프사이클 메소드를 사용할 수 없다.
props를 전달받아서 뷰만 렌더링하는 역할만 하는 컴포넌트를 구현하고자 할 때 사용한다.
[함수형 컴포넌트 생성 방법]
import React from 'react';
function Hello(props) {
return (
<div>Hello {props.name}</div>
)
}
export default Hello;
이렇게 간단하게 사용할 수 있다. 또는 더욱 간단하게,
import React from 'react';
const Hello = ({name}) => {
return (
<div>Hello {name}</div>
)
}
export default Hello;
이렇게 더 간단하게 사용할 수도 있다.
{name}의 경우 props에 들어있는 name 속성값이며 이를 받아서 사용한 것이다.
이것은 비구조화 할당 문법을 사용한 것이다.
클래스 컴포넌트와 다르게 props를 사용할 때, this를 사용하지 않는다.
'개발 > React' 카테고리의 다른 글
| [React] 리덕스(Redux)의 개념과 사용법에 대해 알아보자!! (0) | 2018.10.05 |
|---|---|
| [React] 리액트에서 children 사용하기 (0) | 2018.10.05 |
| [React] JSX란 무엇이며, 어떻게 사용하는가?? (1) | 2018.10.04 |
| [React] 리액트 참고 블로그 & 도움이 될 만한 블로그 정리 (0) | 2018.10.02 |
| [React 공식 홈페이지 번역 01] 리액트란 무엇인가?? (0) | 2018.09.30 |
