첫 번째 글
컴포넌트 제대로 만들기
@React 사용자를 위한 리액트 부트캠프
왜?
개인 프로젝트로 진행했던 "인증 모듈" 코드를 리팩토링하는 중이었다. 물론 동시에 블로그에 올린 글을 적으며 말이다. 그러다가 파일 분할 을 위한 폴더 구조를 설명하게 되었다. 관습적인 구조 내에 components 폴더의 의미 를 적다가 순간 헷갈리는 것이다.
애초에 무지했던 React라서, 스을쩍 알아볼까 보았던 기술 아티클은 나를 어마무시하게 돌아보게 만들었다.
궁금증 해결
컴포넌트
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.
"저는 근본적으로 컴포넌트란 데이터를 입력받아 DOM Node를 출력하는 함수라고 생각해요."
즉, Function + Input + Return Rendering
사실 더 넓게 정의한다면 할 수 있다. Rendering 되지 않는, utils 내에 기능 구현 및 반복 로직을 위한 컴포넌트도 만들기도 하니깐. (내가 그리 만들곤 했다)
하지만, 공식 문서 정의인 만큼 컴포넌트 정의에 대해 더 음미해야 할 것 같다.
추가로, 최근에 React에 Hooks라는 기능이 추가되면서 class 컴포넌트 없이 함수형 컴포넌트로만 앱을 구성할 수 있는데, 이 또한 컴포넌트의 본질적인 정의가 함수에 가깝기 때문이 아닐까 싶다. 물론 class도 위 정의에 만족할 수 있지만 그 뭐랄까 더 단순한 구조에 대한 React 개발자들의 갈망이지 않을까.
물론 공식 문서에서 핵심 개념인 Components와 Props를 설명할 때, 여전히 클래스 및 함수 컴포넌트 두 가지 방향으로 설명한다.
배운 지식
Uncontrolled VS Controlled
- 사용자가 상태를 제어하는 컴포넌트 = Controlled Component
- 사용자가 상태를 제어하지 않는 컴포넌트 = Uncontrolled Component
- key Props를 이용해 초기화 할 수 있다.
- PureComponent 를 이용해 render 를 최적화 할 수 있다.
- PureComponent는 Props와 State를 얕은 비교해서 이전과 같으면 render를 실행시키지 않는다
- PureComponent를 잘못 사용하면 일반적인 Component보다도 성능이 나빠질 수 있다.
언제 쓰이나?
React 특성상 state가 바뀔 때마다 컴포넌트 내 render 함수가 실행되는데, 굳이 이러면 성능 저하가 되는 경우가 존재하여 이는 Uncontrolled Component 로 현명하게 처리.
또한 여러 컴포넌트가 하나의 컴포넌트 속에 Rendering 될 때, 그 하나의 컴포넌트 state 변화 시 여러 컴포넌트가 모두 다시 Rendering 되는데, 이때 편리한 PureComponent 를 통해 여러 컴포넌트 각각의 state 및 props의 변화를 보고 변화가 있는 것만 Rendering을 한다.
Portal(Global) Component (슬쩍)
Portal 컴포넌트는 논리적으로 하위 컴포넌트여야 하는데, 시각적으로는 상위 컴포넌트를 덮어야 할 상황일 때 사용
Component Composition (슬쩍)
React에서는 상속이 굳이 필요할 만한 유즈케이스가 없다고 여기고, 상속을 지원하고 있지 않습니다. 대신 Composition, 합성을 지원한다. 이 합성이라는 개념은 간단하다다. 컴포넌트에 다른 컴포넌트를 가져다 붙이는 것이다.
즉, Composition을 통해 컴포넌트 재사용이 가능하다.
단, Composition을 지원하는 컴포넌트의 경우 PureComponent를 사용하면 성능이 나쁠 수 있다.
Functional Component
Hooks 기능이 추가되었다. 잘 사용한다면 클래스 컴포넌트를 모두 함수형으로 간단하게 구현 및 사용 가능할 것이다.
정리
- Hook이 들어오면서 대부분의 컴포넌트는 클래스를 쓰지않고 구현이 가능하다.
- React.memo는 함수형 컴포넌트의 PureComponent다.
- useState를 통해 함수형 컴포넌트의 상태를 구현할 수 있다.
- useCallback, useMemo를 통해 함수형 컴포넌트 렌더링 최적화를 할 수 있다.
- useRef는 렌더링에 영향을 미치지 않는 값을 보관할 용도로 사용한다.
- useEffect는 클래스의 Lifecycle 훅과 흡사하다.
- 이미 나와있는 hook들을 이용해서 hook을 직접 만들 수도 있으며, 로직을 추상화, 재사용하는데 유리하다.
느낀 점
꼼꼼히 보기보다 이해를 위주로 읽어내려갔다. 프론트 개발자 정말 쉽지 않다. 물론 개발자 쉽지 않다. 빠르다. 배운 것을 토대로 리팩토링만 하다가 인생이 날아갈 것 같다. 안돼.
끝
