자바스크립트 + 리액트 디자인 패턴

92

자바스크립트 + 리액트 디자인 패턴

const style = {

root: {

borderRadius: 3,

border: 0,

color: "white",

margin: "0 20px"

},

primary: {

background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)"

},

secondary: {

background: "linear-gradient(45deg, #2196f3 30%, #21cbf3 90%)"

}

};

export default function CustomButton(props) {

return (

<Button {...props} style={{ ...style.root, ...style[props.color] }}>

{props.children}

</Button>

);

}

7.4

노출 모듈 패턴

이제 모듈 패턴에 익숙해졌으니 조금 개선된 버전을 알아봅시다. 크리스티안 하일만

Christian

Heilmann

의 노출 모듈 패턴입니다. 하일만이 공개 변수나 메서드에 접근하기 위해 가져온 메인

객체의 이름을 반복해서 사용해야 한다는 점에 답답함을 느끼면서 생겨났습니다. 또한 그는

객체 리터럴 표기법을 사용해 요소를 공개하는 것도 맘에 들지 않아 했습니다.

그 결과 모든 함수와 변수를 ...