컴포넌트의 디자인 패턴: Stateless Component 무상태 컴포넌트

무 상태 컴포넌트는 재사용성이 굉장히 높은 컴포넌트를 작성할 수 있게 도와줍니다. 컴포넌트를 완전한 함수로 정의한다는 점이 특징입니다. 개인적으로는 더욱 명확한 의미를 전달할 수 있다는 점에서 state가 없을 경우엔 무상태 컴포넌트로 작성합니다. 기본 컴포넌트에서 보여드렸던 예제를 이용해 보면 다음과 같습니다.

medium.com/little-big-programming/react%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-92c923011818

type#1 : 기본 컴포넌트

const Button = ( props ) => (
<button type="button" className={props.className} />
)

 

type#2 :  ES6 구조분해 할당된 컴포넌트

const Button = ( { className } ) => (
<button type="button" className={ className } />
)

 

type#3 :  ES6 Spread Syntax & Rest parameters

const Button = ( { className, ...remainProps } ) => (
<button type="button" className={className} {...remainProps} />
)

Spread Syntax, Rest Parameters에 대한 자세한 내용은 JavaScript 페이지에서 "Object Spread Syntax - JavaScript Tutorial" 확인

★특수화 (Specialization)★

특수화는 컴포넌트의 역할을 specialize 해서 보다 명확한 컴포넌트로 만들어줍니다. 상태에 따라 특정 컴포넌트가 구분이 될 때 특수화를 이용하면 보다 시맨틱적인 코드를 작성할 수 있습니다.

 

const RedButton = () => <Button className="red">
const BlueButton = () => <Button className="blue">

// {this.props.theme === RED ? <RedButton> : <BlueButton>}

 

Presentational & Container 컴포넌트

컴포넌트들은 MVC 구조에서 말하는 C(컨트롤러)의 역할을 해야 할 경우가 있습니다. 단순히 props, state로 화면을 그리는 데 필요한 값을 넘겨받는 것이 아니라 Ajax 요청이나 localStorage 등을 통해 데이터를 fetching 해야 할 경우에 말이죠. 컴포넌트가 화면에 대한 정의를 넘어서 데이터 fetching까지 담당하게 되면 specialize 하게 되어 재사용성이 떨어집니다. 또한 로직과 Lifecycle이 복잡해져 무엇을 하는 컴포넌트인지 이해하기 어려워집니다.

Presentational & Container 컴포넌트 패턴은 이러한 문제점을 해결하고 컴포넌트 테스트를 더욱 쉽게 합니다. 핵심 아이디어는 한 컴포넌트 내에 존재하는 render와 관련된 로직과 데이터와 관련된 로직을 각각 Presentational 컴포넌트, Container 컴포넌트로 분리하는 것이지요. 따라서 각 컴포넌트는 아래와 같은 특징이 있습니다.

 

Presentational & Container 컴포넌트 패턴은 이러한 문제점을 해결하고 컴포넌트 테스트를 더욱 쉽게 합니다. 핵심 아이디어는 한 컴포넌트 내에 존재하는 render와 관련된 로직과 데이터와 관련된 로직을 각각 Presentational 컴포넌트, Container 컴포넌트로 분리하는 것이지요. 따라서 각 컴포넌트는 아래와 같은 특징이 있습니다.

 

Presentational 컴포넌트는

• JSX를 이용한 마크업이 존재합니다.
• render에 필요한 데이터는 이미 존재한다고 가정합니다.
• UI를 위한 state가 존재할 수 있습니다.

Container 컴포넌트는

• JSX를 이용한 마크업이 거의 없습니다.
• Ajax 요청, HOC 등을 이용해 render에 필요한 데이터를 Fetching 합니다.
• 데이터 Fetching 등을 위한 state가 존재할 수 있습니다.

위에서 알 수 있듯 state의 존재 여부가 Presentational & Container 컴포넌트를 구분 짓는 것이 아닙니다.