[리액트] Functional vs Class Components

데브리입니다. 

 

리액트를 공부하면서 초반에 헷갈렸던 부분이 바로 이 부분인데요, 제가 들은 리액트 강의에서는 대부분 Class Components를 써왔기에, 다른 분들이 쓰신 코드를 보면서 Functional Components가 더 많이 쓰이는 것 같은데 이걸로 코드를 다시 바꿔야 하나? 라는 고민에 빠지기도 했었습니다. 이 부분과 관련해서 이해하기 쉽게 설명해 준 사이트가 있어서 공유합니다.

 

 

 

---

 

우선 Functional Components 는 make your code easider to reason about, easier to test, and achieve better performance 라고 합니다. 

 

 

How to write a functional component

function Hi(props){
    return <div>Hi {props.name}</div>

 

 

읽기 쉽고 이해하기도 쉽다. 

state 나 lifecycle methods가 없다.

hidden state 나 side effects가 없기 때문에 테스트하기 쉽다. 

모든 input(props)는 단 하나의 output 만을 갖는다.

디버깅하기 쉽다.

 

 

 

How to write a class component

class Hi extends Component{
    render(){
        return <div>Hi {props.name}</div>
     }
}

 

Functional Components로 해결할 수 없는 문제가 있을 때가 있기 때문에 그럴 경우에만 Class Component를 사용한다(?) 

 

 

결론, 

리액트에서 당신이 쓰는 대부분의 컴포넌트는 단순히 다른 컴포넌트들을 나열하는 것에 불과하므로 stateless 이기 때문에 굳이 Class Components를 쓰지 않고 Functional Components를 쓰는 것이 좋다(?).

 

 

 

---

 

이 글에 달린 댓글 중 참고해야 할 의견들이 있어서 가져왔습니다.

 

 

'functional components는 프로젝트가 커지면 커질수록 스파게티처럼 엉망이 된다. 그렇기 때문에 나는 class components 위주로 쓴다. 참고로 ES6의 arrow function을 쓸 경우 constructor의 bind는 불필요하다.'

 

 

 

 

'이 토픽에 대한 몇가지 의견:
functional components는 간단한 것들을 만들 때 좋다. 당신이 단순히 무언가를 render하고자 할때, user actions 측면에서 확실히 좋다. 하지만 만약 300-400 라인 이상의 코드를 쓰는 경우에 당신의 components는 정말 엉망으로 보이게 될 것이다.... 코드를 깨끗하게 정말 잘 썼을 때에도 말이다. 모든 것들을 단 하나의 funtion에 다 넣기 전에 다시한번 더 생각해봐라. 컴포넌트에 state나 어떤 로직이 필요할 때에는 class components를 써라.'

 

 

---

 

 

저는 아직 리액트 비기너라 간단한 컴포넌트들만 만들고 있음에도 무조건 Class Components를 쓰고 있었어요. 최근에 시니어 디벨로퍼로 일하시는 어떤 분이 제 코드를 보시고는 functional components로 다 바꾸는게 좋겠다고 조언 해주셔서, 바꾸기 전에 두 방법을 비교한 글을 읽어보다 가져왔습니다!

 

참고로, 리액트 Hooks도 공부하라고 조언해 주셨는데 제가 이전에 들은 강의에서는 Hooks을 쓰면 편리하다고 생각하지만 나중에 가서 오히려 코드가 복잡해진다는 이야기를 들어서 직접 제 프로젝트에 쓰지는 않고 있어요. 아직 비기너라 뭐가 뭔지 잘 모르겠지만, 최근에 많이 쓰이고 선호하는 곳이 많다고 해서 저도 꼭 써야한다고는 생각하지 않고 이런 부분들을 스스로 결정해가는 힘을 키워나가는 게 개발자로써 성장해가는 길이라고 생각하고 혼자 더 찾아보는 중입니다. 

 

 

혹시 다른 의견이나 이해하는데 더 도움이 될 만한 링크가 있으면 댓글로 부탁드려요. 제가 공부하는데도 많은 도움이 될 것 같습니다.

 

읽어주셔서 감사합니다 :) 

 

 

 

 

 

* 이 글은 Mosh Hamedani의 programmingwithmosh.com에서 가져온 글입니다. (원본으로 읽으실 분들은 이 곳에서 읽으실 수 있어요!) https://programmingwithmosh.com/react/react-functional-components/

React Functional or Class Components: Everything you need to know - Programming with Mosh