15.1 리액트 프로젝트를 시작할 때 고려해야 할 사항
15.1.1 유지보수 중인 서비스라면 리액트 버전을 최소 16.8 에서 최대 17.02로 올려두자
리액트 16.8에서는 훅이 소개됐고, 훅 덕분에 함수 컴포넌트의 개념이 정립됐기 때문에
리액트 생태계의 판도를 바꿨다고 해도 과언이 아닐 만큼 중요한 업데이트라고 볼 수 있다.
> 따라서 향후 원활한 지원을 위해 버전을 16.8.6 이상으로 맞추는 것이 좋고,
17버전은 새로운 기능 출시 및 호환성이 개지는 변경 사항을 최소한으로 맞춘 업데이트이기 때문에
가능하다면 17 버전으로 가는 것도 좋다.
기존에 클래스 형태로 작성한 컴포넌트를 함수 컴포넌트로 리팩터링 할 필요가 있을까 ?
>> 굳이 그럴 필요는 없다.
함수형으로 사고의 전환이 필요하고 함수형과 클래스형을 모두 능숙하게 다룰 줄 알아야 한다.
가까운 미래에 클래스형 컴포넌트가 사라지지 않을 것이므로 서둘러 전환하지 않아도 된다.
15.1.2 인터넷 익스플로러 11 지원을 목표한다면 각별히 더 주의를 기한다
인터넷 익스플로러 11 지원이 공식적으로 종료됐다.
인터넷 익스플로러 11을 지원하지 않는 대표적인 라이브러리
- 리액트: 18버전부터 인터넷 익스플로러 11을 지원하지 X
- Next.js : 13 버전부터 지원 X
- query-string : 6.x 버전부터 지원 X
>> 인터넷 익스플로러 11을 지원하는 애플리케이션은 각별히 라이브러리 설치에 주의하자.
15.1.3 서버 사이드 렌더링 애플리케이션을 우선적으로 고려한다
13장에서 성능 측정과 관련된 내용을 봤듯이, 싱글 페이지 애플리케이션은 대부분의 경우
라이트하우스와 WebPageTest, 구글 개발자 도구에서 좋은 결과를 얻기 어렵다.
싱글 페이지 애플리케이션을 추천하는 경우
- 관리자와 같이 제한적인 사용자에게 빠르게 웹페이지를 제공해야 하는 경우
- 이벤트 페이지와 같이 콘텐츠와 인터렉션이 제한적인 소규모 웹페이지를 만드는 경우
- 서버를 준비해야 할 상황이 여의치 않은 경우
>> 많은 사용자를 감당해야 하고, 서버를 준비할 수 있는 충분한 여유가 된다면
시작부터 서버 사이드 렌더링을 고려하는 것이 좋다.
15.1.4 상태 관리 라이브러리는 꼭 필요할 때만 사용한다
리액트 애플리케이션 개발을 시작하기 전에, 그리고 상태 관리 라이브러리를 설치하기 전에
반드시 상태 관리 라이브러리가 필요한지 꼭 생각해보자.
>> 관리해야 할 상태가 많은지 여부 확인
무작정 상태 관리 라이브러리 하나를 잡고 공부하는 것보다 조금씩 점진적으로
상태와 상태 관리의 필요성을 깨닫는 것이 좋다.
15.1.5 리액트 의존성 라이브러리 설치를 조심한다
- peerDependencies가 설지하고자 하는 프로젝트의 리액트 버전과 맞는지 확인하자
- 버전이 맞지 않다면 정상적인 방법으로 설치 불가능 > 억지로 설치한다면 향후에 문제를 일으킬 가능성이 크다
- 훅을 사용한다면 반드시 16.8 버전 이상인지 확인
- 리액트 18을 사용하고 싶다면 사용할 라이브러리가 18을 지원하는지 반드시 확인하자
15.2 언젠가 사라질 수도 있는 리액트
15.2.1 리액트는 그래서 정말 완벽한 라이브러리인가?
리액트는 가장 널리 쓰이는 프론트엔드 라이브러리는 맞지만
그렇다고 가장 완벽한 라이브러리라고 단정 짓기는 어렵다.
리액트를 반대하는 사람들의 의견
- 클래스 컴포넌트에서 함수 컴포넌트로 넘어오면서 느껴지는 혼란
- 너무 방대한 자유가 주는 혼란
- 스타일을 입히는 방법의 다양성, 상태 관리의 다양한 옵션 등
- Angular 나 Vue 처럼 하나를 배워두면 서로 다른 곳에서도 빠르게 쓸 수 있는 구조가 아니라, 리액트 외에 다른 것들은 새롭게 배워야 함
15.4 웹 개발자로서 가져야 할 유연한 자세
모든 웹 개발은 HTML, CSS, 자바스크립트라는 토대 위에 세워졌음을 깨달아야 한다.
라이브러리와 프레임워크는 그저 도구일 뿐이다.
리액트를 넘어 다양한 자바스크립트의 세계를 맛본다면 리액트에 의존적이지 않은 더욱 유연한 개발자가 될 수 있다.
'모던 리액트 Deep Dive 스터디' 카테고리의 다른 글
12장 발표자료 (1) | 2024.12.22 |
---|---|
12장 - 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표 (1) | 2024.12.19 |
11장 - Next.js 13과 리액트 18 (1) | 2024.12.13 |
10장 - 리액트 17과 18의 변경 사항 살펴보기 (1) | 2024.12.12 |
9장 발표자료 (2) | 2024.12.08 |