코드잇 스프린트 : 프론트엔드 2기를 수강하며 작성했습니다.
- 8주차 위클리 미션 내용입니다.
- 썸네일은 제가 토이프로젝트로 만든 썸네일 생성기로 제작되었습니다.
우선 디자인 패턴이 뭔지 알아보자.
디자인 패턴이란 무엇인가
소프트웨어 디자인 패턴(software design pattern)은 소프트웨어 공학의 소프트웨어 디자인에서 특정 문맥에서 공통적으로 발생하는 문제에 대해 재사용 가능한 해결책이다. 소스나 기계 코드로 바로 전환될수 있는 완성된 디자인은 아니며, 다른 상황에 맞게 사용될 수 있는 문제들을 해결하는데에 쓰이는 서술이나 템플릿이다.
출처 : 위키피디아 https://ko.wikipedia.org/wiki/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4_%EB%94%94%EC%9E%90%EC%9D%B8_%ED%8C%A8%ED%84%B4
즉, 디자인 패턴은 공통적으로 발생하는 문제를 재사용 가능하게 해결하기 위한 템플릿 이다.
Presentational & Container
만들어진 배경
리액트는 컴포넌트에서 state, DOM, 로직을 모두 다룰 수 있는 특징이 있다. 다만 이렇게 모든 것을 다루다 보면 자연스럽게 코드의 의존성이 높아지게 되는데, 이 의존도가 높아지면 결국 컴포넌트의 재사용 가능성은 멀어지게 된다. 하나 쓸라고 다른걸 다 끌고와야 되니까!
그래서 옛날 react hook이 만들어지기 이전, 로직과 view를 분리하기 위해 Dan Abramov가 제안한 디자인 패턴이다.
구성요소
presentational 컴포넌트
container로부터 전달받은 데이터를 렌더링 하는 역할을 수행한다.
container 컴포넌트
화면에 렌더링 하기 위해 필요한 로직을 수행하고, 그 데이터를 presentational 컴포넌트로 전달한다.
즉, presentational 컴포넌트는 렌더링을, container 컴포넌트는 렌더링해서 보여줄 데이터를 처리하는 역할을 하도록 구분지어 개발한다.
패턴을 사용하는 이유
관심사를 분리할 수 있게된다.
presentational 컴포넌트는 UI를 담당하게 작성하고, container 컴포넌트는 state와 기타 데이터를 다루도록 작성한다.
재사용성을 높인다.
presentational 컴포넌트는 데이터를 렌더링하는 역할만을 수행하므로, container의 조합에 따라 다른 데이터를 다양하게 보여줄 수 있다.
마찬가지로 container 컴포넌트도 특정 데이터를 presentational 컴포넌트를 조합하면서 다양한 디자인으로 데이터를 화면에 보여줄 수 있다.
Dan Abramov 피셜 : 이제 추천 안함
2019년 업데이트: 저는 이 기사를 오래 전에 썼고 그 이후로 제 견해가 발전했습니다. 특히, 더 이상 구성 요소를 이렇게 분할하지 않는 것이 좋습니다 . 코드베이스에 자연스러운 패턴이 있다면 이 패턴이 유용할 수 있습니다. 그러나 나는 그것이 어떤 필요도 없이 거의 독단적인 열정으로 시행되는 것을 너무도 많이 보아왔습니다. 이 기능이 유용하다고 생각한 주된 이유는 복잡한 상태 저장 논리를 구성 요소의 다른 측면과 분리할 수 있기 때문입니다. Hooks를 사용 하면 임의의 구분 없이 동일한 작업을 수행할 수 있습니다. 이 텍스트는 역사적인 이유로 그대로 남아 있지만 너무 심각하게 받아들이지는 마세요.
출처 : https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
현재 와서는 이런 문제를 해결하기 위해 hooks도 탄생하게 되었기 때문에, 굳이 이 패턴을 사용하지 않아도 된다는 패턴 제시자의 의견이다.
