강의

멘토링

로드맵

NEW
개발 · 프로그래밍

/

프론트엔드

간단하게 알아보는 React 디자인 패턴

React의 핵심 디자인 패턴을 개념과 예제로 빠르게 익혀봐요!

5명 이 수강하고 있어요.

  • 민호

이런 걸 배울 수 있어요

  • 재사용성 높고 유지보수 쉬운 컴포넌트 구조 설계 능력

  • 컴포넌트 설계 시 적절한 패턴을 빠르게 선택·적용하기

React 를 어떻게 더 잘 쓸 수 있을까? 더 좋은 방법은 없을까?


많은 사람들이 React 를 어떻게 더 잘 쓸 수 있을지, 더 좋은 방법은 없을지 고민했습니다.
그리고 React 를 사용하면서 부딪치는 반복적인 문제에 대한 해결책을 냈죠.

이 강의에서는 그 7가지의 해결책. Container & Presentation, Compound, Custom Hooks, Data Provider, HOC, Render Props, State Reducer 에 대해 다룹니다.

단순히 이런 디자인 패턴이 있다~ 라고 소개하는 것이 아닌, 그 디자인 패턴들은 어떤 장단점을 가지고 있으며, 어떤 특징을 가지고 있는지, 컴포넌트를 어떻게 바라보며 어떻게 활용하는지 알아가봅니다.


디자인 패턴이라고 너무 어렵게 생각하지 않으셔도 됩니다.
간단한 예제와 심플한 설명을 통해 빠르게 알아가요!


강의에서 다루는 내용

🔍 각 패턴의 핵심 개념과 패턴의 활용 예시

🔍 패턴별 장단점과 적용 시 고려해야 할 트레이드오프

🔍 언제 어떤 패턴을 선택할지에 대한 기준 제시


이 강의의 특징

📌 7가지 패턴을 짧고 명확한 예제로 빠르게 학습해봐요

📌 단순 암기가 아닌, 컴포넌트를 바라보는 관점을 알아봐요

📌 재사용성·테스트성·성능 관점에서의 비교와 판단 기준을 세워봐요

이런 분들께 추천해요

🤔 React 기본은 아는데 컴포넌트 설계가 산발적이라 유지보수가 힘든 분

😎 디자인 시스템/라이브러리 제작을 목표로 하는 분

수강 후에는

  • 유지보수성과 재사용성이 높은 컴포넌트를 설계·구현할 수 있어요

  • 상황에 맞는 패턴 선택으로 코드의 일관성과 확장성을 개선할 수 있어요

  • 컴포넌트를 바라보는 새로운 관점을 가질 수 있어요.

수강 전 참고 사항

선수 지식 및 유의사항

  • React 기본 지식이 있어야 합니다

  • React 를 사용해 작은 프로젝트라도 만들어본 경험이 있어야 합니다

  • TypeScript+ React 를 사용하기 때문에, TypeScript 를 알고 있어야 합니다

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • React로 코드를 짤 줄은 알지만, 더 구조적이고 확장 가능한 코드를 쓰고 싶은 분

  • React 기본기는 있지만 구조적 설계와 패턴 활용이 부족한 분

선수 지식,
필요할까요?

  • React

  • TypeScript

안녕하세요
입니다.

저의 지식이 누군가에게 도움이 됬으면 하는 개발자입니다

커리큘럼

전체

15개 ∙ (54분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

얼리버드 할인 중

₩11,550

30%

₩16,500

비슷한 강의

같은 분야의 다른 강의를 만나보세요!