React 19 and Next.js 15

 

 

 

Q. Nextjs 14 버전대에서 15 버전대로 업그레이드 되면서 변경된 사항들과 주의해야할 사항들을 알려주세요. 쉽고 자세하게 알려주셔야 합니다. 아마 React 도 18 버전대에서 19 버전대로 업그레이드 된 걸로 아는데요 그것 관련해서도 주의해야할 사항과 변경된 사항들이 무엇인지 쉽고 자세하게 알려주세요. 그리고 Nextjs 에 대해서 그냥 React 와 차이점과 무엇을 중점적으로 봐야하고 다가가야 하는지도 알려주세요. 제가 기존 react 와  react native 개발자인데 nextjs 는 서버사이드쪽 로직이 추가되는 것으로 알고 있는데 어떤 부분이 다른지 어떤 부분 어떤 것을 중점적으로 봐야 잘 적응하고 빠르게 nextjs 로 개발을 할 수 있을지가 알고 싶습니다.

 

 

Next.js 14에서 15로, 그리고 React 18에서 19로의 업그레이드에 관한 정보를 자세히 알려드리겠습니다. 기존 React/React Native 개발자로서 Next.js로 전환할 때 알아야 할 차이점도 함께 설명해 드리겠습니다.

Next.js 14에서 15로 업그레이드 시 주요 변경사항

1. Next.js 15의 주요 변경점

Turbopack 정식 출시

• Next.js 15에서는 Turbopack이 정식 출시되어 개발 서버의 성능이 대폭 개선되었습니다.
• next dev --turbo 명령으로 활성화할 수 있으며, 기존 Webpack보다 최대 5배 빠른 개발 속도를 제공합니다.

React 19 공식 지원

• Next.js 15는 React 19를 공식 지원하며, React 19의 새로운 기능들을 바로 사용할 수 있습니다.

컴파일러 업그레이드

• SWC와 Rust 기반 컴파일러가 더욱 개선되었습니다.
• 빌드 시간이 단축되고, 번들 크기가 줄어들었습니다.

App Router 성능 개선

• App Router의 성능이 개선되어 라우팅이 더욱 빨라졌습니다.
• 페이지 전환 시 로딩 상태 개선 및 병렬 라우팅 최적화가 이루어졌습니다.

서버 액션 안정화

• Server Actions 기능이 안정화되어 더 안정적인 서버 사이드 로직 실행이 가능해졌습니다.

2. 주의해야 할 사항

설정 파일 변경

• next.config.js 파일에서 일부 설정 옵션의 이름과 구조가 변경되었으므로 마이그레이션 시 주의가 필요합니다.

클라이언트 컴포넌트 명시

• 클라이언트 컴포넌트를 명확히 'use client' 지시문으로 표시해야 합니다.

React 19 호환성 문제

• React 19와 호환되지 않는 일부 라이브러리들이 있을 수 있으므로, 사용 중인 라이브러리들의 호환성을 확인해야 합니다.

React 18에서 19로 업그레이드 시 주요 변경사항

1. React 19의 주요 특징

자동 메모이제이션

• React 19에서는 컴포넌트 재렌더링 최적화를 위한 자동 메모이제이션 기능이 추가되었습니다.
• memo, useMemo, useCallback을 일일이 적용할 필요가 줄어들었습니다.

새로운 훅 추가

• use 훅: Promise를 직접 컴포넌트 내에서 처리할 수 있게 됩니다.
• useOptimistic: 낙관적 UI 업데이트를 쉽게 구현할 수 있습니다.

동시성 기능 강화

• 동시성(Concurrent) 렌더링 기능이 더욱 강화되어 대규모 앱에서의 성능이 개선되었습니다.

에러 핸들링 개선

• 에러 경계(Error Boundaries)가 개선되어 앱 전체가 중단되지 않도록 더 견고한 에러 처리가 가능해졌습니다.

서버 컴포넌트 안정화

• React 서버 컴포넌트가 안정화되어 Next.js와 같은 프레임워크에서 더 효율적으로 활용할 수 있습니다.

2. 주의해야 할 사항

이벤트 핸들링 변경

• 일부 합성 이벤트(Synthetic Event) 동작이 변경되어 기존 코드에서 이벤트 처리 방식을 확인해야 할 수 있습니다.

useEffect 사용 감소 권장

• React 팀은 많은 useEffect 사용을 줄이고 새로운 API와 패턴을 활용할 것을 권장합니다.

호환성 확인

• 일부 서드파티 라이브러리가 React 19와 호환되지 않을 수 있으므로 사용 전 확인이 필요합니다.

React와 Next.js의 차이점 및 Next.js 학습 포인트

1. React와 Next.js의 주요 차이점

서버 사이드 렌더링(SSR)

• Next.js는 기본적으로 서버 사이드 렌더링을 지원하여 초기 로딩 속도와 SEO에 유리합니다.
• React만 사용할 경우 클라이언트 사이드 렌더링이 기본이므로 초기 로딩이 느리고 SEO에 불리할 수 있습니다.

파일 기반 라우팅

• Next.js는 파일 시스템 기반 라우팅을 사용하여 별도의 라우터 설정 없이 페이지를 생성할 수 있습니다.
• React에서는 React Router 같은 라이브러리를 통해 수동으로 라우팅을 구성해야 합니다.

빌드 시 최적화

• Next.js는 빌드 시 자동으로 코드 분할, 이미지 최적화, 번들 최적화 등을 수행합니다.
• React에서는 이런 최적화를 위해 추가적인 설정이 필요합니다.

API 라우트

• Next.js는 백엔드 API를 동일한 프로젝트 내에서 구현할 수 있는 API 라우트를 제공합니다.
• React 앱에서는 별도의 백엔드 서버가 필요합니다.

하이브리드 렌더링

• Next.js는 페이지별로 SSR, Static Generation, ISR(Incremental Static Regeneration) 등 다양한 렌더링 방식을 선택할 수 있습니다.

2. React Native 개발자가 Next.js를 배울 때 중점적으로 봐야 할 부분

서버 컴포넌트와 클라이언트 컴포넌트의 차이

• Next.js의 App Router에서는 서버 컴포넌트와 클라이언트 컴포넌트를 구분하여 사용합니다.
• 서버 컴포넌트는 클라이언트로 JS를 전송하지 않고, 데이터베이스나 파일 시스템에 직접 접근할 수 있습니다.
• 클라이언트 컴포넌트는 'use client' 지시문을 사용하여, 브라우저 API와 상호작용하거나 상태를 관리할 수 있습니다.

데이터 페칭 방법

• React Native에서는 주로 useEffect 내에서 데이터를 페칭했지만, Next.js에서는 서버 컴포넌트에서 직접 비동기 함수를 호출하거나 Server Actions를 사용합니다.
• React Query나 SWR 같은 라이브러리도, 클라이언트 컴포넌트에서 활용할 수 있습니다.

라우팅 개념

• App Router의 폴더 구조 기반 라우팅을 이해해야 합니다.
• 동적 라우팅, 병렬 라우팅, 인터셉트 라우팅 등 Next.js만의 라우팅 개념을 학습해야 합니다.

서버 사이드 로직 작성 방법

• API 라우트와 Server Actions를 통한 서버 사이드 로직 구현 방법을 익혀야 합니다.
• 데이터베이스 연결, 인증 처리, 외부 API 호출 등의 서버 작업을 Next.js 내에서 처리하는 방법을 학습해야 합니다.

스타일링 차이점

• React Native의 StyleSheet와 달리, Next.js에서는 CSS Modules, Styled Components, Tailwind CSS, CSS-in-JS 등 다양한 스타일링 방식을 사용할 수 있습니다.
• 업로드된 코드에서는 stylex를 사용하고 있는데, 이는 Facebook이 개발한 CSS-in-JS 라이브러리입니다.

3. 빠르게 Next.js에 적응하기 위한 팁

공식 문서와 예제 활용

• Next.js 공식 문서는 매우 상세하고 예제가 풍부합니다. App Router 섹션을 중점적으로 학습하세요.

작은 프로젝트부터 시작

• 간단한 프로젝트부터 시작하여 Next.js의 기본 개념과 워크플로우를 익히는 것이 좋습니다.

아키텍처 이해

• Next.js의 서버 컴포넌트, 클라이언트 컴포넌트, 서버 액션 등의 개념과 각각의 사용 사례를 이해하세요.

데이터 흐름 파악

• 클라이언트-서버 간 데이터 흐름, 상태 관리 방식을 정확히 이해하는 것이 중요합니다.

타입스크립트 활용

• Next.js는 타입스크립트와 함께 사용할 때 개발 경험이 크게 향상됩니다. 타입스크립트를 적극 활용하세요.

React Native 개발자로서 Next.js로 전환하실 때는 특히 서버 사이드 렌더링의 개념과 데이터 페칭 패턴의 차이점을 이해하는 것이 중요합니다. Next.js의 강력한 기능들을 활용하면 풀스택 웹 애플리케이션을 효율적으로 개발할 수 있을 것입니다.

 

 

 

 

Q. react 18 에서 19 로 변경되면서 forwardRef 관련해서도 달라진 점이 있지 않나요?

 

네, 말씀하신 대로 React 18에서 19로 업그레이드되면서 forwardRef와 관련해서 중요한 변경점이 있습니다.

React 19에서의 forwardRef 변경사항

1. 타입 안전성 강화

React 19에서는 forwardRef의 타입 안전성이 크게 개선되었습니다. TypeScript와 함께 사용할 때 특히 중요한 변화입니다.

// React 18
const MyComponent = forwardRef<HTMLDivElement, Props>((props, ref) => {
  return <div ref={ref}>{props.children}</div>
});

// React 19
// 더 명확한 타입 추론과 에러 감지가 가능해졌습니다
const MyComponent = forwardRef<HTMLDivElement, Props>((props, ref) => {
  return <div ref={ref}>{props.children}</div>
});

2. 새로운 forwardRef 구문

React 19에서는 forwardRef를 사용하는 새로운 구문을 도입했습니다. 이는 선택적인 기능이지만, 더 명확한 코드 구조를 제공합니다.

// React 19에서 새롭게 지원하는 forwardRef 패턴
const MyComponent = React.forwardRef(function MyComponent(
  props: Props,
  ref: React.ForwardedRef<HTMLDivElement>
) {
  return <div ref={ref}>{props.children}</div>;
});

3. 더 나은 표시 이름(displayName) 추론

React 19에서는 forwardRef 컴포넌트의 표시 이름을 더 잘 추론합니다. 이로 인해 디버깅과 개발자 도구에서 컴포넌트를 식별하기가 더 쉬워졌습니다.

// React 18에서는 종종 displayName을 수동으로 설정해야 했습니다
const Button = forwardRef((props, ref) => { ... });
Button.displayName = 'Button';

// React 19에서는 함수에 이름을 부여하면 자동으로 displayName이 설정됩니다
const Button = forwardRef(function Button(props, ref) { ... });
// 이제 displayName을 수동으로 설정할 필요가 없습니다

4. Ref 유형의 더 엄격한 검사

React 19에서는 ref의 유형 검사가 더 엄격해졌습니다. 이는 잘못된 ref 전달로 인한 오류를 줄이는 데 도움이 됩니다.

// 예를 들어, 다음과 같은 경우 React 19에서는 더 명확한 타입 에러가 발생합니다
const TextInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
  // 잘못된 사용 (다른 요소에 ref 연결)
  return <div ref={ref}>{props.children}</div>; // TypeScript 에러 발생

  // 올바른 사용
  // return <input ref={ref} />;
});

5. useImperativeHandle과의 통합 개선

forwardRef와 함께 자주 사용되는 useImperativeHandle 훅도 개선되어, 두 API 간의 통합이 더 자연스러워졌습니다.

// React 19에서 더 자연스러운 통합
const FancyInput = forwardRef(function FancyInput(props, ref) {
  const inputRef = useRef<HTMLInputElement>(null);
  
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    // 추가 메서드...
  }), []);

  return <input ref={inputRef} />;
});

6. 성능 최적화

forwardRef 컴포넌트의 내부 구현이 최적화되어 성능이 향상되었습니다. 특히 대규모 앱에서 forwardRef를 많이 사용하는 경우 렌더링 성능이 개선될 수 있습니다.

주의사항

• 기존 코드에서 forwardRef를 사용하는 방식에 따라 업그레이드 시 타입 검사 관련 오류가 발생할 수 있으니, 마이그레이션 시 주의해야 합니다.
• 서드파티 라이브러리에서 forwardRef를 사용하는 경우, 해당 라이브러리의 React 19 호환성을 확인하는 것이 좋습니다.

이러한 변경사항은 코드의 안정성과 개발자 경험을 크게 향상시키지만, 기존에 forwardRef를 많이 사용하는 프로젝트에서 마이그레이션 작업이 필요할 수 있습니다.

 

 

 

 

 

Q. ref 에 함수 형식만 해야한다거나 forwardRef 가 deprecated 되었다거나 그런 내용은 없나요?

 

 

React 19로 업그레이드되면서 ref와 forwardRef에 관한 중요한 변경사항에 대해 설명해 드리겠습니다.

React 19에서의 ref와 forwardRef 관련 변경사항

forwardRef의 상태

먼저 명확하게 말씀드리자면, React 19에서 forwardRef는 deprecated(폐지)되지 않았습니다. 오히려 계속해서 지원되며 개선되었습니다.

ref 콜백 함수 사용 권장

React 19에서는 string refs가 완전히 제거되었습니다(이미 React 16부터 deprecated 상태였음). 하지만 ref에 대해 "함수 형식만 사용해야 한다"는 엄격한 제한은 없습니다. 다음 두 가지 방식 모두 여전히 유효합니다:

1. 객체 ref (React.createRef 또는 useRef를 통해 생성)
2. const myRef = useRef(null); <div ref={myRef} />;
3. 콜백 ref (함수를 직접 전달)
4. <div ref={(node) => { this.myNode = node; }} />;

다만, React 팀은 더 명확한 코드 작성과 타입 안전성을 위해 특히 복잡한 상황에서는 콜백 ref를 권장하는 경향이 있습니다.

createRef와 useRef의 상태

React.createRef와 useRef는 계속해서 지원됩니다. 특히 useRef는 함수 컴포넌트에서 refs를 생성하는 표준적인 방법으로 계속 사용됩니다.

새로운 ref 관련 기능

React 19에서는 ref 관련하여 몇 가지 새로운 기능이 추가되었습니다:

1. useEffectEvent: 이펙트 이벤트 내에서 ref 값에 접근할 때 더 안정적인 패턴을 제공합니다.
2. ref 안정성 개선: 컴포넌트 리렌더링 간에 ref 객체의 일관성이 더욱 보장되었습니다.
3. 자동 ref 병합(Auto Ref Merging): 여러 라이브러리나 훅이 동일한 DOM 요소에 ref를 첨부하려고 할 때 충돌을 방지하는 개선된 메커니즘이 도입되었습니다.

forwardRef와 useImperativeHandle 통합 개선

forwardRef와 useImperativeHandle의 조합을 사용할 때 타입 추론이 개선되었습니다:

// React 19에서 더 명확한 타입 추론과 API 디자인
const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);
  
  useImperativeHandle(ref, () => ({
    focus() {
      inputRef.current?.focus();
    },
    // 기타 노출하고 싶은 메서드들...
  }));
  
  return <input ref={inputRef} {...props} />;
});

결론

React 19에서:

• forwardRef는 폐지되지 않았으며 계속해서 지원됩니다.
• ref에 객체와 콜백 함수 모두 사용 가능합니다.
• 타입 안전성과 개발자 경험을 위한 개선이 이루어졌습니다.
• string refs는 완전히 제거되었습니다(이미 오래전부터 deprecated 상태였음).

React 19로 마이그레이션할 때는 코드베이스에서 legacy string refs가 남아있는지 확인하고, 새로운 타입 시스템의 이점을 활용하는 것이 좋습니다.

 

 

Q. string refs 가 뭐죠?

 

string refs는 React의 초기 버전에서 사용되던 DOM 요소를 참조하는 방식입니다.

string refs란?

string refs는 React 컴포넌트에서 DOM 노드나 클래스 인스턴스에 접근하기 위해 문자열을 사용하는 방식입니다. 다음과 같이 사용했습니다:

// string refs의 예시 (오래된 방식)
class MyComponent extends React.Component {
  componentDidMount() {
    // this.refs.myInput을 통해 DOM 노드에 접근
    this.refs.myInput.focus();
  }

  render() {
    // ref 속성에 문자열을 전달
    return <input ref="myInput" />;
  }
}

위 코드에서 ref="myInput"과 같이 문자열을 ref 속성에 직접 전달하고, 나중에 this.refs.myInput을 통해 해당 DOM 노드에 접근하는 방식입니다.

string refs가 deprecated된 이유

React 팀은 여러 이유로 string refs를 사용하지 않도록 권장했습니다:

1. 성능 문제: string refs는 컴포넌트 렌더링 시 더 많은 오버헤드를 발생시킵니다.
2. 타입 안전성 부족: 문자열로는 참조하는 요소의 타입을 명확히 지정할 수 없습니다.
3. 모듈 시스템과의 호환성 문제: React가 모듈 시스템에서 사용될 때 string refs가 제대로 작동하지 않는 경우가 있었습니다.
4. 컴포지션 문제: 상위 컴포넌트에서 하위 컴포넌트로 ref를 전달하기 어렵습니다.
5. 리액티브하지 않음: string refs는 React의 반응형 데이터 흐름 모델에 잘 맞지 않았습니다.

현대적인 refs 사용 방식

React 16.3부터는 다음과 같은 방식을 사용하도록 권장하고 있습니다:

1. createRef (클래스 컴포넌트):

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  
  componentDidMount() {
    this.myRef.current.focus();
  }
  
  render() {
    return <input ref={this.myRef} />;
  }
}

1. useRef (함수 컴포넌트):

function MyComponent() {
  const myRef = useRef(null);
  
  useEffect(() => {
    myRef.current.focus();
  }, []);
  
  return <input ref={myRef} />;
}

1. 콜백 refs:

function MyComponent() {
  let inputElement = null;
  
  const setInputRef = (element) => {
    inputElement = element;
  };
  
  useEffect(() => {
    if (inputElement) {
      inputElement.focus();
    }
  }, []);
  
  return <input ref={setInputRef} />;
}

React 19에서는 string refs가 완전히 제거되었으며, 위에서 설명한 현대적인 방식 중 하나를 사용해야 합니다. 이러한 새로운 방식들은 타입 안전성, 성능, 그리고 컴포넌트 합성 측면에서 많은 이점을 제공합니다.