리액트(React)가 왜 어려울까? 복잡성 분석
리액트(React)는 여러 계층의 처리 과정을 거치므로, 코드 실행 시점을 파악하기 어려움
버튼 클릭(Event), 상태 변경(State Change), props 변경(Props Change) 등 다양한 트리거(Trigger)로 인해 코드 실행 시점을 예측하기 어려움
JSX 내에서 UI 요소와 로직이 혼합되어 있어, 어떤 요소가 어떤 조건에서 나타나는지 파악하기 어려움
리액트(React)의 다중 레이어(Multi-layer) 구조
본문에 따르면 리액트(React)는 개발자가 작성한 코드, 리액트 내부 처리, 브라우저 렌더링(Browser Rendering) 등 여러 레이어(Layer)로 구성되어 있다.
상태 업데이트(State Update): `useState`를 호출하여 상태를 변경하면 리액트(React)는 재 렌더링(Re-rendering) 여부를 결정
가상 DOM(Virtual DOM) 업데이트: 변경 사항을 가상 DOM(Virtual DOM)에 반영
실제 DOM(Real DOM) 업데이트: 브라우저가 가상 DOM(Virtual DOM)의 변경 사항을 기반으로 실제 DOM(Real DOM)을 업데이트
이러한 분리된 레이어(Layer) 구조는 코드 실행 흐름을 파악하기 어렵게 만들고, 리액트(React) 학습의 진입 장벽으로 작용한다.
코드 실행 트리거(Trigger)의 모호성
글에서는 리액트(React)에서 코드 실행을 유발하는 다양한 트리거(Trigger)가 존재하며, 코드 자체만으로는 실행 시점을 파악하기 어렵다고 지적한다.
이벤트(Event): 버튼 클릭(Button Click)과 같은 사용자 상호 작용
상태 변경(State Change): `useState`로 관리되는 상태의 변화
props 변경(Props Change): 부모 컴포넌트로부터 전달받은 props의 변경
`useEffect` 훅(Hook)을 사용하면 특정 상태나 props가 변경될 때 코드를 실행할 수 있지만, 코드 자체만으로는 실행 시점을 직관적으로 알기 어렵다. 이러한 암시적인 의존성(Implicit Dependency)은 리액트(React)의 학습 곡선을 더욱 가파르게 만든다.
JSX 내 UI 요소와 로직의 혼합
본문은 리액트(React)의 JSX가 UI 요소와 로직을 혼합하여 코드의 복잡성을 증가시킨다고 분석한다.
조건부 렌더링(Conditional Rendering): `&&` 연산자를 사용하여 특정 조건에 따라 UI 요소를 표시
변수 평가(Variable Evaluation): 변수 값을 UI에 직접 표시
스타일링(Styling): CSS-in-JS 또는 CSS 모듈을 사용하여 스타일 적용
이러한 혼합은 코드의 가독성을 저해하고, UI 요소가 어떤 조건에서 나타나는지 파악하기 어렵게 만든다. 관심사 분리(Separation of Concerns) 원칙을 적용하여 UI 요소와 로직을 분리하는 것이 코드의 유지보수성을 높이는 데 도움이 될 수 있다.
