[번역] React Stateless Functional Components: 우리가 간과하고 있는 9가지

Minoo Joo
Minoo Joo
Oct 12, 2017 · 8 min read

아래 내용은 https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc를 해석한 내용입니다. 의역과 오역이 난무하니 자세한 내용은 해당 블로그를 참조하시면 이해가 더 쉬울 것 같습니다.
개취: 억지로 번역하면 뜻이 더 모호해지는 단어들은 그 자체로 두었습니다.


react 14버전에서 stateless functional components를 정의하는 더 간결한 방법을 소개했습니다. 이 component들은 순수 자바스크립트 function이다. ES6로 정의한 방법이 여기있습니다.

27줄에서 21줄로 코드가 줄어든 것보다 더 중요한 이유가 있다. 또한 오른쪽의 중첩된 ‘sayHi’ function은 명백히 성능문제로 피해야 한다. 이유는 아래 있다.

예시를 잠깐 훑어본것으로는 알아채기 힘들지만 cutting the noise는 큰 이득입니다. (cutting the noise가 무슨 뜻인지 모르겠네요. 아마 불필요한 코드라인을 줄였다는 것 같습니다. — 역자 주)

이유

1. 클래스가 필요하지 않다.
솔직히 es6의 class 도입을 둘러싼 비난은 과장되었다고 생각합니다. 그러나 plain function은 일반적으로 바람직하고, 위의 예시처럼 extends나 constructor처럼 좋지않은 결과와 연관된 class를 제거하는 것은 좋다고 생각합니다.

2. this가 없다.
위를 보듯, stateless component는 그저 function입니다. 따라서 위의 예시에서 짜증나고 혼란스러운 자바스크립의 this를 피했습니다. this를 뺄수록 전체 component는 이해하기 쉬워집니다. 아래를 비교해보십시오.

onClick={this.sayHi.bind(this)}>Say Hi</a>onClick={sayHi}>Say Hi</a>

stateless component에서는 bind가 필요없다는 것을 알수 있습니다. class를 제거함으로써 this를 사용하는 bind도 제거합니다. this가 자바스크립트 개발자를 얼마나 헷갈리게 하는지 생각해보면 이것을 피하는 것은 엄청난 성과입니다. 부가적으로 알아둘 점은 React에서 binding하는 다섯가지 방법이 있다는 것입니다.

3. Best Practice를 강제한다.
stateless functional component는 dumb/ presentational components를 만들때 유용합니다. dumb components는 behavior보다 UI에 초점을 맞주는데, dumb components가 state 사용을 피하는데 매우 중요합니다. 대신에 state는 상위의 container나 Flux/Redux 에서 조작되어야 합니다. Stateless functional components는 state나 lifecycle method를 다루지 않습니다. 이건 laziness로부터 보호하기 때문에 매우 훌륭합니다.

보면, 개발자가 시간에 쫓길때 dumb component에 state를 붙이는 것은 언제나 매력적이다. 이것은 빠르게 기능을 해킹하는 방법입니다( 원문 “It’s a quick way to hack in a feature.” — hack을 한글로 번역하기 어렵네요). Stateless functional component는 state를 갖지 않기 때문에, 개발자는 laziness(게으른 로딩을 말하는 것 같습니다 — 역자 주) 순간에 특정 state를 쉽게 hack 할 수 없습니다. 따라서 Stateless functional component는 프로그램적으로 component를 순수한 상태로 강제합니다. 개발자는 state관리를 component가 속한곳 — 상위의 container에 강제합니다.

4. High Signal-to-Noise Ratio
위에 이미지(예시)에서 보듯 stateless functional component는 타이핑을 줄일 수 있습니다. 이것은 noise가 적다는 뜻입니다(noise는 불필요한 코드라인을 말하는 것 같습니다 — 역자 주). 내가 “사람을 위한 코드작성”에서 말했듯이 훌륭한 코드는 signal-to-noise 비율을 극대화합니다. 27줄이 21줄이 되는것은 20% 정도의 코드량 감소입니다. 개발자는 좀 더 간결하게 다음 단계로 나아갈 수 있습니다. 한줄의 return statement로 개발자는 return과 괄호를 생략할 수 있다(render(){}가 없어진다는 뜻 — 역자 주). 만약 개발자가 props를 ES6 destructiong로 사용하면 결과는 좀 더 의미있는 코드라인(원문의 signal을 의역 — 역자 주)을 쓰게 된다.

import React from ‘react’;const HelloWorld = ({name}) => (
<div>{`Hi ${name}`}</div>
);
export default HelloWorld;

이것은 parameter를 받고 markup을 return하는 단순한 function입니다. 훌륭합니다. 솔직하게 말해 이것보다 더 깔끔하게 만들 수 있을까?

5. 코드 컴플리션/인텔리센스

예시에서 보듯, 만약 개발자가 props를 destructure한다면 사용하는 모든 데이터가 단순한 function argument로 특정됩니다. 이 것은 개발자가 class와 비교해서 코드 컴플리션/인텔리센스를 향상을 지원할 수 있다는 뜻입니다.

6. Bloated component와 Poor data structure는 쉽게 노출된다.
(Bloated component: 불필요한 코드가 많은 컴포넌트,
Poor data structure: 비효율 적이거나 데이터 보존에 취약한 자료구조 — 역자 주
)

우리는 많은 parameter를 갖는 function은 악취나는 코드라는 것을 압니다. 개발자가 Stateless component에서 ES6 destructuring을 쓸 때 argument list는 component의 의존성을 전달합니다. 따라서 관심이 필요한 컴포넌트는 노출되기 쉽다. 이 경우에 component를 쪼개거나 you’re passing around?? data structure에 대해 다시 생각할 수 있다. 때때로 props의 긴 리스트는 object를 하나 던지는 것으로 쉽게 해결될 수 있다. 반면 props가 논리적으로, 하나의 object로 충분히 귀결되지 않는다면 이 component는 여러개의 components로 쪼개질 시간일수도 있다.

7. 이해하기 쉽다.
위에서 보듯 Stateless functional component는 props를 취해서 HTML로 뿌리는 function이다. 만약 이 component가 많은 markup과 중첩된 function을 render method안에 갖고 있더라도, 이건 컨셉적으로 단순합니다. 이게 순수 함수입니다. 이건 다음의 큰 장점으로 연결됩다.

8. 테스트하기 쉽다.
순수한 function이기 때문에 assertions가 매우 직관적이다.straightfoward. props로 넘겨진 valeus를 보면 우리는 marpkup을 return하리라는 것을 기대할 수 있다. 나는 render가 props.name으로 ‘Cory’를 받았을 경우에 Hi Cory라는 div태그가 return 될 것을 가정할 수 있다.

“React의 stateless functional component를 쓰면 각각의 component는 독립적으로 쉽게 테스트할 수 있다. mocking, state조작, 특별한 라이브러리 혹은 테스트를 해치는 트릭같은 것들은 필요하지 않다.

9. 성능
최종적으로 stateless component는 바로 성능의 증가를 가져온다. state나 lifesycle method를 걱정할 필요가 없기 때문에 react팀은 미래에 불필요한 체크나 메모리할당 회피를 계획해놓았다.

단점
만약 lifecycle method나 refs, 성능최적화를 위한 shouldComponentUpdate/PureComponent가 필요하다면 class로 바꿔야 한다.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade