Skip to content

함수형 컴포넌트

Jump to bottom
EunwooPark edited this page Mar 4, 2020 · 7 revisions

React에서 컴포넌트를 만드는 가장 기본적인 방법이다.

function Hello(){
    return <h1>hello world!</h1>;
}

ReactDOM.render(<Hello />, document.getElementById('root'));

하지만 hooks가 도입 되기 전에는 state와 라이프 사이클을 사용하기 위해 클래스 컴포넌트를 이용했다.

class Hello extends React.Components {
    componentDidMount(){

    }

    render(){
        return <h1>hello world!</h1>;
    }
}

hooks가 나오기 이전 둘의 가장 큰 차이점은 라이프 사이클과 state를 사용할 수 있는 지 여부와 함수형 컴포넌트가 성능상 조금 더 빠르다는 것이었다. hooks가 나온 뒤 둘의 차이점은 코드 생산성이나 미세한 성능 차이 말고도 가장 큰 차이점이 존재한다.

클래스 컴포넌트와 함수형 컴포넌트의 차이점

둘의 가장 큰 차이점은 props에서 나타난다. 클래스 컴포넌트의 props는 this에 속해 있고 함수형 컴포넌트의 props는 인자로 받아온다.
this는 변경 가능(mutable)이고 인자는 변경 불가능(immutable)이다.

예를 들어 props를 가져와서 렌더링 하는데 3초가 걸리는 컴포넌트가 있다고 가정해보자. 클래스 컴포넌트는 렌더링되는 사이에 props가 변경된다면 최종적으로 변경된 props를 렌더링 할 것이다. 함수형 컴포넌트는 반대로 렌더링되는 사이에 props가 변경되어도 기존의 props를 렌더링 할 것이다.

이 차이는 componentDidMount에서도 나타난다. 클래스 컴포넌트의 componentDidMount는 props나 state가 변경될 때 항상 최신의 props와 state를 유지하지만 함수형 컴포넌트의 useEffect(fn, [])는 초기의 props와 state를 보존하게 된다.

Clone this wiki locally