React 19? 18.3 먼저 살펴보기

 

 

 

들어가며

 

지난달 25일, React 19가 공개되었습니다. 여러가지 기능이 추가된 버전을 사용할 수 있게 되었는데, 기존 프로젝트에서 곧바로 버전을 올리기엔 고려해야 할 점들이 꽤 존재합니다.

 

18에서 19로 업그레이드를 생각하는 사용자들을 위해, React 18.3이 함께 공개 되었습니다. 

 

리액트 19 업그레이드 가이드 문서 중

 

 

18.3 은 이전과 기능상으로 완전히 동일하지만, 19에서 deprecated된 API들에 대한 경고가 추가되었습니다. 리액트 팀은 버전 업 이전에 먼저 적용해보고, 충분한 수정 작업을 거친 뒤 올리기를 권장하고 있네요.

 

이 포스트에서는 개인적으로 중요하다고 생각되는 변경점들을 일부만 살펴 볼 예정이고, 전체 변경 내용은 React 19 업그레이드 가이드 문서나 릴리즈 노트를 참고해주세요.

 

 

 

변경점

문자열 refs 제거

클래스 컴포넌트에서는 해당 컴포넌트가 가지고 있는 refs들을 문자열을 통해 참조할 수 있었습니다.

 

// Before
class MyComponent extends React.Component {
  componentDidMount() {
    this.refs.input.focus();
  }

  render() {
    return <input ref='input' />;
  }
}

 

 

위처럼 render() 내부에 ref로 선언된 값들을 this.refs 객체를 참조하면 자동으로 가져와서 사용할 수 있습니다.

그러나 React 19에서는 더 이상 작동하지 않는 코드가 됩니다.

 

따라서 아래처럼, 콜백 패턴을 이용하는 방식으로 변경해주는 작업이 필요합니다.

 

// After
class MyComponent extends React.Component {
  componentDidMount() {
    this.input.focus();
  }

  render() {
    return <input ref={input => this.input = input} />;
  }
}

 

 

 

문자열 refs는 아래의 이유들로 React 16.3에서 이미 deprecated 되었던 스펙입니다.

 

• 리액트가 현재 렌더링 되는 컴포넌트를 트래킹 해야하며, 이는 리액트가 더 느려지게 하는 원인입니다.
• 콜백 패턴을 사용했을때와 다르게 동작할 수 있습니다.
• 한 요소에 하나의 ref만 지정할 수 있습니다.

 

 

 

ReactDOM.findDOMNode 제거

React 16.6에서 deprecate 되었던 ReactDOM.findDOMNode가 완전히 삭제되었습니다.

 

// Before
import {findDOMNode} from 'react-dom';

function AutoselectingInput() {
  useEffect(() => {
    const input = findDOMNode(this);
    input.select()
  }, []);

  return <input defaultValue="Hello" />;
}

 

// After
function AutoselectingInput() {
  const ref = useRef(null);
  useEffect(() => {
    ref.current.select();
  }, []);

  return <input ref={ref} defaultValue="Hello" />
}

 

 

findDOMNode는 DOM과 선택자 사이의 연결이 명시적이지 않아 잠재적인 위험을 안고 있습니다. 클래스 컴포넌트라면 createRef를, 함수 컴포넌트라면 useRef를 통해 변경하여 사용해야 합니다. 자세한 설명은 아래 링크의 포스트에 정리해 두었으니 참고해주세요.

 

• 리액트에서 DOM Node를 찾는 방법

 

findDOMNode를 사용시 콘솔에 등장하는 에러

 

 

 

proptypes와 defaultProps 제거

React 15.5에서 deprecated 되었던 proptypes가 제거되었습니다. propTypes를 대신하여 타입스크립트나 다른 타입 체크 라이브러리를 사용할 것을 권장합니다.

 

// Before
import PropTypes from 'prop-types';

function Heading({text}) {
  return <h1>{text}</h1>;
}
Heading.propTypes = {
  text: PropTypes.string,
};
Heading.defaultProps = {
  text: 'Hello, world!',
};

 

// After
interface Props {
  text?: string;
}
function Heading({text = 'Hello, world!'}: Props) {
  return <h1>{text}</h1>;
}

 

 

타입스크립트의 사용이 대중화되며 propTypes의 제거는 기정 사실화 되었습니다. 또한 클래스 컴포넌트에서 유용하게 사용되던 defaultProps도 함수 컴포넌트가 대중화 된 현재에는 구태여 필요하지 않은 속성이 되었습니다.

 

이번 업데이트에서 두 속성이 제거되었는데, 클래스 컴포넌트에서의 defaultProps은 유지되었습니다. ES6 환경에서는 defaultProps가 여전히 유용한 기능이기 때문입니다.

 

 

ReactDOMtestUtils 제거

React 팀은 더 나은 테스트 경험을 위해, ReactDOM의 test-util 보다는 현대적인 라이브러리인 @testing-library/react를 사용할 것을 권장합니다.

 

아래는 더 이상 사용할 수 없는 API들 입니다.

 

• mockComponent()
• isElement()
• isElementOfType()
• isDOMComponent()
• isCompositeComponent()
• isCompositeComponentWithType()
• findAllInRenderedTree()
• scryRenderedDOMComponentsWithClass()
• findRenderedDOMComponentWithClass()
• scryRenderedDOMComponentsWithTag()
• findRenderedDOMComponentWithTag()
• scryRenderedComponentsWithType()
• findRenderedComponentWithType()
• renderIntoDocument
• Simulate

 

자세한 내용은 공식 문서에 올라온 이 아티클을 참고해주세요.

 

 

 

마치며

활발히 돌아가는 서비스에서 라이브러리의 버전을 올리는건 쉽지 않은 일입니다. 더군다나 React처럼 큰 라이브러리는 더더욱 그렇죠.

 

React 19로 버전을 올리기 전, 18.3에서 확인할 수 있도록 해준 React 팀의 배려(?)를 최대한 활용하셔서 이번 새 버전도 문제없이 적용하셨으면 좋겠습니다.