https://www.yes24.com/product/goods/140407282

출시일

빠르게 변하는 프론트 기술인 만큼 개발 책은 출시일과 포함하는 버전이 중요하다고 느껴진다.

이 책은 2024년 12월 23일에 출간된 따끈따끈한 리액트 신상 책이다.
영어판은 2024년 03월 19일에 출시되었다고 한다.

그리고, 2024년 12월 초에 출시된 리액트 19...ㅎ

하지만, 책 내용을 읽어보니 리액트 19의 내용까지 참고된 한국어 번역판이니
이 부분에 대해서는 걱정하지 않아도 될 듯하다.

누구에게 추천할까?

사실 이 책은 기술 하나하나를 학습하기 위한 책이라기보단
최신 리액트가 나아가는 방향과 전체적인 흐름을 알아보기에 좋은 책이다.
특히 리액트가 서버 사이드 렌더링에 열심히인 만큼
Next.js를 배우기 시작했거나 큰 그림을 다시 그려보고 싶은 사람에게 좋은 책인 것 같다.

자세한 내용을 알고 싶은 사람들은 2024년 1월에 출시된 모던 리액트 Deep Dive을 참고하면 좋을 것 같다.

도움이 됐던 내용

'use client' 아래의 클라이언트 컴포넌트에 클라이언트 로직이 왜 문제가 되어 에러를 발생시킬까?

클라이언트 컴포넌트는 서버와 클라이언트 모두에서 실행된다.

실행과 렌더링과는 다른다. 실행은 함수 호출을 의미한다.

서버 컴포넌트 : 서버에서만 실행되는 것이 맞다. 그리고 렌더링도 된다.
클라이언트 컴포넌트 : 서버에서 실행 -> 리액트 엘리먼트 객체 -> HTML 문자열로 직렬화 -> 클라이언트로 전송
그래서, 클라이언트 컴포넌트는 서버와 클라이언트 모두에서 실행된다.

• 9장 리액트 서버 컴포넌트 341p, 345p

클라이언트는 서버에서 실행된다.

하지만, 렌더링이 되지는 않는다.
대신, 서버는 클라이언트 컴포넌트를 위한 플레이스홀더를 렌더링한다.
플레이스홀더: 클라이언트 번들러가 생성한 특정 모듈에 대한 참조

트리의 지점에 도달하면 특정 모듈을 사용해야 한다고 알려 주는 것이다.

• 9장 리액트 서버 컴포넌트 341p

➡️ 이렇게 클라이언트 컴포넌트가 처음 클라이언트에서 렌더링될 때 같은 장소에 같은 참조 값을 렌더링 할 수 있게 해야 하기 때문에.
서버에서의 렌더링과는 다른 렌더링이 일어나면 참조 오류가 날 수 있어서,
서버와 다른 렌더링이 클라이언트에서 일어나면 오류를 나타내는 듯하다.

Next.js는 클라이언트로 전달되는 자바스크립트의 양을 줄이려 한다.

기본적으로 정적 생성을 사용하려 한다.

• 8장 프레임워크 319p

최대한 서버 컴포넌트로 만드려 한다.

• 8장 프레임워크 320p

---

Next.js 개발을 하며 '서버에서 클라이언트 컴포넌트를 실행 때 끝까지 읽지 않는 것 같다'라는 생각을 했었다.
아래의 코드처럼 리액트에서는 1과 2의 코드가 같지만,
Next.js에서는 1은 예상처럼 모든 것을 읽었다.
하지만 2)의 코드를 작성하면 useEffect가 클라이언트에서 실행되지 않았다.

그 이유를 알 것 같다.

Next.js가 최대한 서버 컴포넌트로 만들려 클라이언트 컴포넌트 읽는다. 하지만, 최적화하기 위해 null을 만나면 더 이상 읽을 필요가 없다고 생각하다. 그전까지의 코드만 저장해서 클라이언트에게 넘긴다. 거기까지의 코드만 클라이언트에서 실행되어 버그가 나는 것이다.

1)

const [isClient, setIsClient] = useState(false);

useEffect(()=>{
  setIsClient(true)
},[])

if(!isClient) return null;

2)

const [isClient, setIsClient] = useState(false);

if(!isClient) return null;


useEffect(()=>{
  setIsClient(true)
},[])

*정말 클라이언트에서만 실행하고 싶다면 Next.js dynamic을 사용하면 된다.

'use client'
 
import dynamic from 'next/dynamic'
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  ssr: false,
})

서버 컴포넌트는 모든 프롭을 직렬화할 수 있어야 한다.

서버 컴포넌트는 직렬화해서 클라이언트에게 보내진다.
하지만, 알다시피 함수는 직렬화할 수 없다.
그렇기 때문에 서버 컴포넌트는 함수 등 직렬화할 수 없는 것들이 포함될 수 없는 것이다.
그래서 프롭 패턴 같은 것도 할 수 없다.

반응형이 아닌 리액트

사실 나는 리액트가 아닌 뷰나 스벨트 같은 다른 프론트 라이브러리? 프레임워크?를 사용해 본 적이 없다.
그래서, 상태 변화에 따른 뷰 전체의 리렌더링을 통한 상태 값 업데이트가 자연스러웠다.

하지만, 다른 프레임워크들 중에는 시그널을 통한 반응성 모델을 적용하는 곳들이 있었다. 시그널을 통한 업데이트는 더 세밀했고 더 작은 영역을 업데이트할 수 있다.

리액트의 방법은 거친 반응성이다. 새 상태와 함수(컴포넌트)가 다시 실행되어야 뷰가 업데이트 되기 때문이다.

이렇게 보면 리액트의 방법이 비효율적이라고 할 수 있다.
하지만, 이 방법으로 리액트는 예측 가능성을 높이고, 상태 업데이트 일괄 처리도 가능한 것이다.
memo 같은 함수를 사용하면 뷰를 메모화하여 리렌더링을 막을 수 있다.

그리고 아직 시험 중이지만 평가가 좋은 리액트 컴파일러가 제대로 출시되면, 메모화에 대한 고민도 많이 사라질 것으로 보인다. 좋은 트레이드 오프였다고 나도 생각한다.

• 10장 리액트 대체제 376p

---

번역 책이었지만 잘 읽히는 책이었다.
큰 그림을 다시 그리며 읽을 수 있어 더 좋은 책이었다.

조만간 다시 모던 리액트 Deep Dive도 읽어 봐야겠다.