함수형 컴포넌트 만들기


react에서 컴포넌트를 정의할때 class 문법을 사용하는데 


라이프사이클API를 사용하거나 state를 사용하는 경우에는 class 문법을 사용해 컴포넌트를 만들어야 한다.


일반적으로 지금까지 만들어왔던


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//파일 및 컴포넌트의 첫 문자를 대문자로 하는건 React의 naming convention 입니다.
import React from 'react'; //import JavaScript ES6 에 새로 도입된 키워드로서, require('..') 의 역할을 합니다.
/*
* 컴포넌트에서 immutable (변하지 않는)  데이터가 필요 할 땐,
* render() 메소드의 내부에 안에 { this.props.propsName } 형식으로 넣고,
* 컴포넌트를 사용 할 때, < > 괄호 안에 propsName="value" 를 넣어 값을 설정합니다.
*
* */
class Header extends React.Component {
    render(){
        return (
            <h1>{ this.props.title }</h1>
        );
    }
}
export default Header; //export는 JavaScript ES6 에 새로 도입된 키워드로서, module.export = Header 와 같습니다.
cs



이런식이다.


주석이 많아 좀 보기 힘들지만.. 주석을 지우면


1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react'; 
 
class Header extends React.Component {
 
    render(){
        return (
            <h1>{ this.props.title }</h1>
        );
    }
 
}
 
export default Header; 
cs


이런식이 되겠다.



그런데 라이프사이클API도 사용하지 않고 state도 사용하지 않고


단순히 props만 전달해 뷰를 렌더링해주는 역할만 한다면 


함수형 컴포넌트 형식으로 컴포넌트를 정의 할 수 있다.




1
2
3
4
5
6
7
8
9
10
import React from 'react'; 
 
    function Header(){
        return (
            <h1>{props.title }</h1>
        );
    }
 
 
export default Header; 
cs



이런식으로 말이다.


뭔가 아까보다 단순해지지 않았는가?



여기서 ES6의 애로우펑션(화살표 함수)를 사용하여 만들 수도 있다.



1
2
3
4
5
6
7
8
9
10
import React from 'react'; 
 
    const Header = (props) => {
        return (
            <h1>{ props.title }</h1>
        );
    }
 
 
export default Header; 
cs




이 코드를 비구조화 할당 문법을 사용한다면




1
2
3
4
5
6
7
8
9
10
import React from 'react'; 
 
    const Header = ({title}) => {
        return (
            <h1>{ title }</h1>
        );
    }
 
 
export default Header; 
cs


이렇게 만드는게 가능 하다.



class문법을 사용하는 것 보다 훨씬 간단해 졌다.


그러나 함수형 컴포넌트에 따로 성능최적화가 이뤄진 것이 아니기 떄문에 


성능에선 클래스형 컴포넌트와 다르지 않다.


리액트 팀에서 함수형 컴포넌트의 성능을 최적화하겠다고 했지만 


일부 상황에서 제대로 동작하지 않는 오류가 있다고 하는데


레딧에서 본 정보이니 자세한 내용은 아니다.


저작자표시 비영리

'Yame Programmer > react.js' 카테고리의 다른 글

[React.js] cannot resolve 'react-transition-group' 오류 해결 방법  (0) 2017.05.25
[react.js] react-router v4 browserHistory.push 오류 해결 방법  (0) 2017.04.19
[react.js] react Component Life Cycle API  (0) 2017.02.27
[react.js] 변경된 값만 렌더링 되도록 하기 shouldComponentUpdate()  (0) 2017.02.27
[react.js] react.js 에서 Jquery 사용 하는 방법(unused import $ from jquery )  (1) 2017.02.22

+ Recent posts

티스토리툴바