내가 React에서 싫어하는 5가지 점(및 이를 극복하는 방법)-JS 튜토리얼-php.cn

Five Things I Hate About React (And How to Overcome Them)

React는 현대 웹 개발의 초석이 되었습니다. 선언적 스타일과 재사용 가능한 구성 요소 기반 구조를 통해 개발자가 인터페이스 구축에 대해 생각하는 방식에 혁명을 일으켰습니다. 하지만 완벽한 도구는 없습니다. React를 고맙게 생각하는 만큼, 저를 포함한 개발자들이 React를 사용할 때 종종 겪는 좌절감이 있습니다.

이 블로그에서는 제가 React에서 싫어하는 5가지 점에 대해 자세히 알아보고, 그것이 왜 문제인지 알아보고, 이를 해결하기 위한 실행 가능한 솔루션을 제공하겠습니다. 숙련된 개발자이든 이제 막 시작하는 개발자이든 여기에는 모두를 위한 무언가가 있습니다.

1. 초보자를 위한 가파른 학습 곡선

React는 "단순한 JavaScript"라는 자부심을 갖고 있지만 초보자의 현실은 더 복잡합니다. 이유는 다음과 같습니다.

JSX 구문: 언뜻 보기에 JSX는 위협적으로 보일 수 있습니다. HTML과 유사한 구문을 JavaScript와 혼합하는 것은 많은 신규 개발자에게 부자연스럽게 느껴집니다.
상태 및 속성: 상위 구성 요소와 하위 구성 요소 간의 데이터 흐름을 관리하려면 불변성 및 단방향 데이터 흐름과 같은 개념을 이해해야 합니다.
후크: useState와 useEffect는 판도를 바꾸는 요소이지만 여전히 React 기본 사항을 다루기 힘든 초보자에게는 부담이 될 수 있습니다.

이것이 중요한 이유

React는 초보자에게 친숙하다고 홍보되는 경우가 많지만 이러한 복잡성으로 인해 신규 사용자가 낙담할 수 있습니다. 초반에 어려움을 겪는다면 아예 포기할 수도 있습니다.

솔루션

간단하게 시작

먼저 기본 개념에 집중하세요. 기능적 구성 요소, 소품 및 간단한 상태 관리로 시작하세요. 기본 사항을 숙지할 때까지 후크, 컨텍스트 또는 Redux와 같은 라이브러리에 뛰어들지 마세요.
학습 자료
- 공식 React 문서: React의 새로운 문서는 대화형 예제를 통해 초보자에게 친숙합니다.
- 과정: Codecademy 및 Udemy와 같은 플랫폼에는 단계별 React 튜토리얼이 있습니다. 귀하의 학습 스타일에 맞는 것을 선택하세요.
소규모 프로젝트 구축 연습

할 일 앱, 간단한 블로그 또는 날씨 앱을 만들어 React 개념에 익숙해지세요. 대규모 프로젝트를 구축하기 전에 작게 시작하세요.
알레 UI 생성기

Allais UI Generator를 사용하여 사전 디자인된 UI 구성요소를 스캐폴드하세요. 특히 초보자에게는 스타일이나 구조에 대한 걱정 없이 기능성에 집중할 수 있는 좋은 방법입니다.

2. 어디서나 상용구

React의 가장 큰 장점 중 하나인 유연성은 약점이 될 수도 있습니다. React 프로젝트 설정에는 라우팅, 상태 관리 및 빌드 도구 구성과 같은 반복적인 작업이 포함되는 경우가 많습니다. create-react-app 및 Vite와 같은 최신 도구를 사용해도 상용구가 과도하게 느껴질 수 있습니다.

실제 시나리오

새로운 React 앱을 시작한다고 상상해 보세요. 다음을 수행해야 합니다.

종속성 설치(react-router-dom, redux 등)
구성요소, 스타일 및 자산에 대한 폴더 구조를 생성합니다.
라우팅, API 호출, 상태 관리를 위해 앱을 구성하세요.

소규모 프로젝트의 경우 이 설정은 과잉처럼 느껴집니다. 대규모 프로젝트의 경우 지루합니다.

솔루션

스타터 키트 사용

라우팅, 상태 관리 및 테스트를 위해 사전 구성된 설정이 포함된 스타터 키트를 활용하세요. 예는 다음과 같습니다.
- CRA(Create React App): 초보자를 위한 고전적인 선택입니다.
- Next.js: 라우팅 및 서버측 렌더링이 내장되어 프로덕션에 즉시 사용 가능한 앱에 이상적입니다.
- Vite: 최신 개발에 적합한 가볍고 빠릅니다.
코드 모듈화

인증이나 API 서비스와 같은 일반적인 기능을 위한 재사용 가능한 모듈을 만듭니다. 이렇게 하면 중복이 줄어들고 개발 속도가 빨라집니다.
Allais UI Generator로 자동화

Allais UI Generator는 React, Svelte 및 Vue.js와 호환되는 사전 구성된 템플릿을 제공하여 상용구를 최소화합니다. 이 도구는 개발 속도를 높여 설정보다 구축에 집중할 수 있게 해줍니다.

3. 성능 최적화는 까다로울 수 있음

React의 가상 DOM은 놀랍지만 성능을 위해 앱을 최적화하는 것은 여전히 어려운 과제입니다. 개발자가 직면하는 일반적인 문제는 다음과 같습니다.

불필요한 재렌더링: props나 state의 부적절한 사용으로 인해 구성요소가 불필요하게 재렌더링됩니다.
대형 번들: 종속성을 너무 많이 포함하거나 코드 분할에 실패하면 번들 크기가 커질 수 있습니다.
비효율적인 상태 관리: 상태를 잘못 관리하면(예: 최상위 구성 요소에 너무 많은 상태를 유지) 성능이 저하될 수 있습니다.

이것이 중요한 이유

느린 앱은 특히 느린 기기나 네트워크를 사용하는 사용자의 경우 사용자 경험을 저하시킵니다. 경쟁이 치열한 시장에서는 성능이 매우 중요합니다.

솔루션

React 프로파일러

React Profiler 도구를 사용하여 불필요한 재렌더링을 유발하는 구성요소를 식별하세요.
메모

기능적 구성 요소에는 React.memo를 사용하고 불필요한 계산을 방지하려면 useMemo 또는 useCallback 후크를 사용하세요.

const MemoizedComponent = React.memo(MyComponent);

코드 분할 React.lazy 및 Suspense와 같은 동적 가져오기 및 도구를 사용하여 코드를 분할하고 필요할 때만 구성요소를 로드하세요.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

로그인 후 복사

효율적인 상태 관리 도입
Zustand, Jotai 또는 React Query와 같은 라이브러리는 Redux보다 가벼운 경우가 많으며 상태 처리 효율성을 향상시킬 수 있습니다.
도구 활용
Allais UI Generator와 같은 도구를 사용하면 최적화되고 사전 구축된 UI 구성 요소를 생성하여 작업량을 줄일 수 있습니다.

4. 선택의 폭이 너무 넓다

React의 생태계는 엄청납니다. 모든 문제에 대해 이를 해결한다고 주장하는 라이브러리가 많이 있습니다. 이러한 다양성은 힘을 실어주지만 동시에 마비될 수도 있습니다.

실제 시나리오
상태 관리 라이브러리를 선택해야 한다고 상상해 보세요. Redux, MobX, Zustand 또는 Context API를 사용해야 합니까? 각각 장단점이 있으며, 잘못된 것을 선택하면 불필요한 골칫거리가 될 수 있습니다.

이것이 중요한 이유
도구를 평가하는 데 많은 시간을 소비하면 실제 앱 구축 작업에 방해가 됩니다. 더 나쁜 것은 잘못된 선택으로 인해 비용이 많이 드는 리팩토링이 필요할 수 있다는 것입니다.

솔루션

검증된 도구를 사용하세요 바퀴를 재발명하지 마세요. 다음과 같이 활발한 커뮤니티가 있는 잘 문서화된 라이브러리를 사용하십시오.

라우팅: React Router 또는 Next.js 라우팅
상태 관리: React Query 또는 Redux 툴킷
UI 구성 요소: 프레임워크 간 호환성을 위한 Allais UI 생성기
필요에 따라 도서관 평가
스스로에게 물어보세요:
이 라이브러리로 내 문제가 해결되나요?
적극적으로 유지관리되고 있나요?
내 프로젝트의 규모와 복잡성에 부합하나요?
스택 문서화

프로젝트에 대한 "기술 스택" 문서를 만듭니다. 이는 향후 결정과 새로운 개발자 온보딩을 위한 참고 자료가 될 것입니다.

5. 빈번한 업데이트 및 주요 변경 사항

React의 빠른 개발 속도는 양날의 검처럼 느껴질 수 있습니다. 동시 모드 및 서버 구성 요소와 같은 새로운 기능은 흥미롭지만 업데이트를 따라가는 것은 지칠 수 있습니다.

실제 시나리오
방금 최신 버전의 React로 업그레이드했는데 인기 있는 라이브러리의 변경으로 인해 앱 테스트가 중단되는 것을 발견했습니다.

이것이 중요한 이유
빈번한 업데이트에는 지속적인 학습과 유지 관리가 필요합니다. 마감 기한이 촉박하거나 레거시 코드베이스가 있는 팀에게는 특히 어려울 수 있습니다.
솔루션

점진적 업데이트 유지
새 버전이 출시되는 순간 React나 그 종속성을 업그레이드하지 마세요. 커뮤니티 피드백과 업데이트된 문서를 기다리세요.
LTS 버전 사용
중요한 변경을 최소화하려면 종속성의 장기 지원(LTS) 버전에 중점을 두세요.
모니터 출시 노트
React 블로그와 GitHub 릴리스 노트를 따라 프로젝트를 업데이트하기 전에 변경 사항을 이해하세요.
Allais UI Generator로 확장 가능한 UI 구축
Allais UI Generator와 같은 도구는 React, Svelte 및 Vue.js의 최신 모범 사례에 부합하는 미래 지향적 템플릿을 제공합니다.

물론이죠! 다음은 각 문제에 대한 심층 분석, 예시 및 추가 솔루션이 포함된 확장된 버전의 블로그 게시물입니다. 이 버전은 2,500단어를 초과하며 더 많은 실행 가능한 조언을 포함합니다.

인하
코드 복사

내가 React에서 싫어하는 5가지 점(및 이를 극복하는 방법)

1. 초보자를 위한 가파른 학습 곡선

React는 "단순한 JavaScript"라는 자부심을 갖고 있지만 초보자의 현실은 더 복잡합니다. 이유는 다음과 같습니다.

JSX 구문: 언뜻 보기에 JSX는 위협적으로 보일 수 있습니다. HTML과 유사한 구문을 JavaScript와 혼합하는 것은 많은 신규 개발자에게 부자연스럽게 느껴집니다.
상태 및 속성: 상위 구성 요소와 하위 구성 요소 간의 데이터 흐름을 관리하려면 불변성 및 단방향 데이터 흐름과 같은 개념을 이해해야 합니다.
후크: useState와 useEffect는 판도를 바꾸는 요소이지만 여전히 React 기본 사항을 다루기 힘든 초보자에게는 부담이 될 수 있습니다.

이것이 중요한 이유

솔루션

간단하게 시작

먼저 기본 개념에 집중하세요. 기능적 구성 요소, 소품 및 간단한 상태 관리로 시작하세요. 기본 사항을 숙지할 때까지 후크, 컨텍스트 또는 Redux와 같은 라이브러리에 뛰어들지 마세요.
학습 자료
- 공식 React 문서: React의 새로운 문서는 대화형 예제를 통해 초보자에게 친숙합니다.
- 과정: Codecademy 및 Udemy와 같은 플랫폼에는 단계별 React 튜토리얼이 있습니다. 귀하의 학습 스타일에 맞는 것을 선택하세요.
소규모 프로젝트 구축 연습

할 일 앱, 간단한 블로그 또는 날씨 앱을 만들어 React 개념에 익숙해지세요. 대규모 프로젝트를 구축하기 전에 작게 시작하세요.
알레 UI 생성기

Allais UI Generator를 사용하여 사전 디자인된 UI 구성요소를 스캐폴드하세요. 특히 초보자에게는 스타일링이나 구조에 대한 걱정 없이 기능성에 집중할 수 있는 좋은 방법입니다.

2. 어디서나 상용구

실제 시나리오

새로운 React 앱을 시작한다고 상상해 보세요. 다음을 수행해야 합니다.

종속성 설치(react-router-dom, redux 등)
구성요소, 스타일 및 자산에 대한 폴더 구조를 생성합니다.
라우팅, API 호출, 상태 관리를 위해 앱을 구성하세요.

소규모 프로젝트의 경우 이 설정은 과잉처럼 느껴집니다. 대규모 프로젝트의 경우 지루합니다.

솔루션

스타터 키트 사용

라우팅, 상태 관리 및 테스트를 위해 사전 구성된 설정이 포함된 스타터 키트를 활용하세요. 예는 다음과 같습니다.
- CRA(Create React App): 초보자를 위한 고전적인 선택입니다.
- Next.js: 라우팅 및 서버측 렌더링이 내장되어 프로덕션에 즉시 사용 가능한 앱에 이상적입니다.
- Vite: 최신 개발에 적합한 가볍고 빠릅니다.
코드 모듈화

인증이나 API 서비스와 같은 일반적인 기능을 위한 재사용 가능한 모듈을 만듭니다. 이렇게 하면 중복이 줄어들고 개발 속도가 빨라집니다.
Allais UI Generator로 자동화

Allais UI Generator는 React, Svelte 및 Vue.js와 호환되는 사전 구성된 템플릿을 제공하여 상용구를 최소화합니다. 이 도구는 개발 속도를 높여 설정보다 구축에 집중할 수 있게 해줍니다.

3. 성능 최적화는 까다로울 수 있음

React의 가상 DOM은 놀랍지만 성능을 위해 앱을 최적화하는 것은 여전히 어려운 과제입니다. 개발자가 직면하는 일반적인 문제는 다음과 같습니다.

불필요한 재렌더링: props나 state의 부적절한 사용으로 인해 구성요소가 불필요하게 재렌더링됩니다.
대형 번들: 종속성을 너무 많이 포함하거나 코드 분할에 실패하면 번들 크기가 커질 수 있습니다.
비효율적인 상태 관리: 상태를 잘못 관리하면(예: 최상위 구성 요소에 너무 많은 상태를 유지) 성능이 저하될 수 있습니다.

이것이 중요한 이유

느린 앱은 특히 느린 기기나 네트워크를 사용하는 사용자의 경우 사용자 경험을 저하시킵니다. 경쟁이 치열한 시장에서는 성능이 매우 중요합니다.

솔루션

React 프로파일러

React Profiler 도구를 사용하여 불필요한 재렌더링을 유발하는 구성요소를 식별하세요.
메모

기능적 구성 요소에는 React.memo를 사용하고 불필요한 계산을 방지하려면 useMemo 또는 useCallback 후크를 사용하세요.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

로그인 후 복사

자바스크립트
const MemoizedComponent = React.memo(MyComponent);
코드 분할
React.lazy 및 Suspense와 같은 동적 가져오기 및 도구를 사용하여 코드를 분할하고 필요한 경우에만 구성요소를 로드하세요.

자바스크립트
코드 복사
const LazyComponent = React.lazy(() => import('./LazyComponent'));
효율적인 상태 관리 채택
Zustand, Jotai 또는 React Query와 같은 라이브러리는 Redux보다 가벼운 경우가 많으며 상태 처리 효율성을 향상시킬 수 있습니다.

도구 활용
Allais UI Generator와 같은 도구를 사용하면 최적화되고 사전 구축된 UI 구성 요소를 생성하여 작업량을 줄일 수 있습니다.

선택 사항이 너무 많음 React의 생태계는 엄청납니다. 모든 문제에 대해 이를 해결한다고 주장하는 라이브러리가 많이 있습니다. 이러한 다양성은 힘을 실어주지만 동시에 마비될 수도 있습니다.

실제 시나리오
상태 관리 라이브러리를 선택해야 한다고 상상해 보세요. Redux, MobX, Zustand 또는 Context API를 사용해야 합니까? 각각 장단점이 있으며, 잘못된 것을 선택하면 불필요한 골칫거리가 될 수 있습니다.

이것이 중요한 이유
도구를 평가하는 데 많은 시간을 소비하면 실제 앱 구축 작업에 방해가 됩니다. 더 나쁜 것은 잘못된 선택으로 인해 비용이 많이 드는 리팩토링이 필요할 수 있다는 것입니다.

솔루션
검증된 도구를 사용하세요
바퀴를 재발명하지 마세요. 다음과 같이 활발한 커뮤니티가 있는 잘 문서화된 라이브러리를 사용하십시오.

라우팅: React Router 또는 Next.js 라우팅
상태 관리: React Query 또는 Redux 툴킷
UI 구성요소: 프레임워크 간 호환성을 위한 Allais UI 생성기.
요구사항에 따라 라이브러리 평가
스스로에게 물어보세요:

이 라이브러리로 내 문제가 해결되나요?
적극적으로 유지관리되고 있나요?
내 프로젝트의 규모와 복잡성에 부합합니까?
스택 문서화
프로젝트에 대한 "기술 스택" 문서를 만듭니다. 이는 향후 결정과 새로운 개발자 온보딩을 위한 참고 자료가 될 것입니다.

잦은 업데이트 및 주요 변경 사항 React의 빠르게 진행되는 개발은 양날의 검처럼 느껴질 수 있습니다. 동시 모드 및 서버 구성 요소와 같은 새로운 기능은 흥미롭지만 업데이트를 따라가는 것은 지칠 수 있습니다.

실제 시나리오
방금 최신 버전의 React로 업그레이드했는데 인기 있는 라이브러리의 변경으로 인해 앱 테스트가 중단되는 것을 발견했습니다.

이것이 중요한 이유
빈번한 업데이트에는 지속적인 학습과 유지 관리가 필요합니다. 마감 기한이 촉박하거나 레거시 코드베이스가 있는 팀에게는 특히 어려울 수 있습니다.

솔루션
점진적인 업데이트 유지
새 버전이 출시되는 순간 React나 그 종속성을 업그레이드하지 마세요. 커뮤니티 피드백과 업데이트된 문서를 기다리세요.

LTS 버전 사용
주요 변경 사항을 최소화하려면 종속성의 장기 지원(LTS) 버전에 집중하세요.

모니터 출시 노트
프로젝트를 업데이트하기 전에 React 블로그 및 GitHub 릴리스 노트를 따라 변경 사항을 이해하세요.

Allais UI Generator로 확장 가능한 UI 구축
Allais UI Generator와 같은 도구는 React, Svelte 및 Vue.js의 최신 모범 사례에 부합하는 미래 지향적 템플릿을 제공합니다.

더 나은 구축 방법: Allais UI 생성기
이러한 React 좌절감이 당신에게 공감된다면 이제 작업 흐름을 단순화해야 할 때입니다. Allais UI Generator는 React, Svelte 및 Vue.js용으로 설계된 크로스 프레임워크 UI 생성기입니다. 제공되는 내용은 다음과 같습니다.

사전 제작된 구성 요소: 미리 만들어진 맞춤형 구성 요소를 사용하여 시간을 절약하세요.
프레임워크 간 지원: React, Svelte, Vue 등 어떤 작업을 하든 Allais가 도와드립니다.
성능 최적화 코드: 모범 사례를 준수하는 깔끔하고 효율적인 코드를 생성합니다.