커링이란?
커링은 반환값이 함수인 디자인 패턴을 말한다.
왜 커링을 사용해야 하는가?
중복된 코드를 줄여준다.
원하는 기능을 적재적소에 조합해서 사용할 수 있다.
실행 시점을 뒤로 미룰 수 있다
const server = ip => {
return (connectionInfo) => {
}
}
// 사용
const connection1 = server('http://localhost:3001')
const connection2 = server('http://localhost:3002')
// do someting...
connection1({id: 'id1', password: 'password1'})
connection2({id: 'id2', password: 'password2'})
HOC란?
High Order Component
로 상속 패턴을 지양하고 컴포넌트를 한층 업그레이드 시키는 방법이다.
왜 상속 패턴을 지양 한다는 걸까?
상속 패턴 은 부모의 속성을 동시에 가질 경우 문제가 발생 할 수 있다.
예를 들어 Button
있고 이를 상속받는 LodingButton
과 TooltipButton
이 있다고 가정하자.
추가로, SubmitButton
이 필요해서 Button
을 상속 받아 사용하기로 했다.
이 때, 기획이 바뀌고, SubmitButton
에도 로딩 기능이 필요하다고 하여 Button
을 상속받고 있는 LoadingButton
을 상속받아 SubmitButton
버튼을 만들기로 했다.
한 번에 기획 할 것이지... 또 기획이 바꼈다. 기획자 자질이 의심된다. SubmitButton
버튼에도 툴팁 기능이 필요하다고 한다. 따라서, 상속 관계는 아래와 같이 변경되었다.
Button
← LodingButton
← TooltipButton
← SubmitButton
특별한 문제는 없어 보인다.
하지만, SubmitButton
덕분에 TooltipButton
는 불필요하게 LodingButton
을 상속받게 되었다. 기능이 추가 될 때 마다 상속받는 구조는 변경될 것이고, 한 눈에 보기 어려워진다.
그렇다면, 기본 구조는 그대로 두고, 원하는 기능만 상속받아 사용할 수 없을까?
HOC 를 통해 위 문제를 해결 할 수 있다.
HOC는 함수형 컴포넌트를 반환 할 수도 있고, 클래스형 컴포넌트를 반환할 수도 있다.
// 함수형 컴포넌트 반환
function withSomething(Component) {
// Do something...
return function Upgraded(props) {
return <Component {...props} />
}
}
// 클래스형 컴포넌트 반환
function withSomething(Component) {
// Do something...
return class Upgraded extends React.Component {
render() {
return <Component {...this.props} />
}
}
}
HOC 를 사용할 때 주의해야 할 점이 있다.
- 기존에 연결된 프로퍼티를 모두 전달해 주어야 한다.
- 이름은
with
로 시작한다. - displayName을 설정해 주어야 한다.
이 정도까지가 HOC에 대한 기본 개념이다.
'React' 카테고리의 다른 글
[React] Styled Component로 Global Theme 다루기 (0) | 2020.04.01 |
---|---|
[React] Rest operation VS Spread operation (0) | 2019.09.11 |