컴포넌트의 이야기

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자, 특히 React와 유사한 방식의 상태 관리 시스템을 사용하되, 재렌더링과 복잡한 레이어를 피하고자 하는 개발자

난이도: 중급~고급 (고급 기법과 최적화 기법 포함)

핵심 요약

• @fusorjs/dom 라이브러리를 활용해 재렌더링 없이 상태 관리가 가능한 컴포넌트 구현 가능
• React의 useState, useCallback 대신 자바스크립트의 객체 구조 분해와 이벤트 핸들러의 두 번째 파라미터 활용
• update 파라미터 추가로 컴포넌트 상태 동기화를 간결하게 처리
• 일반 변수만으로도 이벤트 핸들러 컴포넌트의 상태 관리 가능 (예: UppercaseInput 컴포넌트)

섹션별 세부 요약

1. 서론 및 목표

• 프론트엔드 프레임워크 학습의 시작점은 "클릭 카운터" 컴포넌트
• React의 재렌더링과 복잡한 상태 계산을 피하고, 자바스크립트 원生 기능만으로 구현 가능
• @fusorjs/dom 라이브러리 활용: update 함수를 통해 DOM 업데이트 처리

2. 초기 버전의 컴포넌트 구현

• ClickCounter 컴포넌트:

- props.count로 초기 상태 설정

- click_e 이벤트 핸들러와 _ 구분자로 W3C 표준 호환

- 상태 관리 전략 외부 연결 (리프트업 패턴)

3. 코드 간결화 및 최적화

• 함수 파라미터의 객체 구조 분해로 count 기본값 설정
• 이벤트 핸들러의 두 번째 파라미터로 이벤트 발생 객체 참조 활용
• useCallback 사용 시 컴포넌트 재생성 방지 효과

4. `update` 파라미터 추가 및 최종 버전

• update 파라미터 추가로 컴포넌트 상태 동기화 간결화
• React보다 더 간결한 코드로 상태 관리 가능 (예: UppercaseInput 컴포넌트)
• mount 콜백 사용으로 리액트의 useState와 유사한 기능 구현

5. 예제 및 실무 적용

• UppercaseInput 컴포넌트:

- value 상태로 입력 값 대문자 변환

- input_e_update 이벤트 핸들러로 값 업데이트

• 반응형 상태는 필요 시만 사용 (다중 컴포넌트 공유 데이터 시 유리)

결론

• 재렌더링 없이 간결한 상태 관리를 위해 @fusorjs/dom과 자바스크립트 기능 활용
• React의 복잡한 라이브러리 의존 없이도 효율적인 컴포넌트 개발 가능
• 일반 변수와 이벤트 핸들러만으로도 간단한 상태 관리 가능 (예: UppercaseInput)
• 성능 최적화를 위해 반응형 상태는 필요 시만 사용 (자원 소모 감소)