• 리액트 훅(Hook)의 등장 리액트의 훅은 버전 16.8부터 새로 추가된 기능으로, 클래스형 컴포넌트의 단점을 보완하기 위한 것이다. 먼저 리액트의 컴포넌트는 클래스형과 함수형으로 나뉜다. 클래스형 컴포넌트의 단점으로는 컴포넌트 사이에서 상태 로직 재사용 어려움 render props나 고차 컴포넌트와 같은 패턴을 사용해서 코드 추적이 어려움 복잡한 컴포넌트들은 이해하기 어려움 생명주기 메서드에 관련 없는 로직이 섞여 들어가고, 컴포넌트들을 작게 분리하는 것이 불가능 함 class를 사용하기 위해서는 javascript의 this에 대해 알아야하는데, javascript의 this는 다른 언어에서와는 다르게 작동해서 혼란스러움 위와 같은 단점들을 보완하고자 훅이 등장! Hook의 등장으로 함수형 컴포..

디자인 패턴이란 프로그램 개발 과정에서 사용되는 설계 패턴을 정의한 것이다. React, Vue, Angular 등으로 프론트엔드 개발 시 컴포넌트 단위로 개발을 진행하는데, 컴포넌트를 어떻게 구성할 것인지에 대한 고민을 디자인 패턴이 해결해 줄 수 있다. 디자인 패턴 중 아토믹 디자인에 대해 알아보자! • 아토믹 디자인이란? 아토믹 디자인을 검색해보면 위의 사진이 가장 많이 나온다. 화학시간에 듣던 용어들이 나와서 처음엔 당황했다. 찾아보니 아토믹 디자인은 화학적 관점에서 영감을 얻어 탄생한 디자인 시스템이라고 한다. 가장 작은 단위인 원자부터 시작해서 페이지까지 컴포넌트를 5가지 단계로 나누는 방법이다. - ATOMS 디자인의 최소단위로 더 이상 분해할 수 없음 label, input, button,..