ReactJS - Strict Mode: A Beginner's Guide

안녕하세요, 미래의 React 개발자 여러분! 오늘은 React의 중요한 기능 중 하나인 Strict Mode에 대해 알아보겠습니다. 프로그래밍에 새로운 사람이라고 걱정하지 마세요 - 저는 여러분을 단계별로 안내해 드릴 것입니다. 수업을 통해 수많은 학생들을 가르쳐온 경험을 바탕으로 말이죠. 그럼 커피 한 잔 (또는 차, 그게 당신의 취향이라면)을 챙기고, 함께 이 학습 여정에 출발해 보겠습니다!

Strict Mode는 무엇인가요?

구체적인 내용에 들어가기 전에, React에서 Strict Mode가 무엇인지 이해해 보겠습니다. 운전을 배우는 것을 상상해 보세요. Strict Mode는 당신 옆에 앉아 있는 매우 철저한 운전 교사처럼, 당신이 하는 모든 작은 실수를 지적해 줍니다. 이것은 당신을 나무라는 것이 아니라, 더 나은 운전자가 되도록 도와주는 것입니다 - 우리의 경우, 더 나은 React 개발자가 되도록 도와주는 것입니다.

Strict Mode는 애플리케이션에서 잠재적인 문제를 강조하는 도구입니다. 그것은 자식 컴포넌트에 대한 추가적인 검사와 경고를 활성화합니다. 이를 어떻게 사용하는지 보겠습니다:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

이 예제에서 우리는 전체 App 컴포넌트를 React.StrictMode로 감싸고 있습니다. 이는 App 내부의 모든 컴포넌트가 이러한 추가 검사에 대해 검사될 것을 의미합니다.

이제 Strict Mode가 실제로 무엇을 검사하는지 탐구해 보겠습니다.

Unsafe Lifecycle Usage

라이프사이클이 무엇인가요?

안전하지 않은 라이프사이클에 대해 이야기하기 전에, 라이프사이클이 무엇인지 이해해 보겠습니다. React에서 컴포넌트는 탄생(마운트)에서 사망( 언마운트)까지 여러 단계를 거칩니다. 이 단계들을 라이프사이클이라고 합니다.

안전하지 않은 라이프사이클

일부 라이프사이클 메서드는 비동기 렌더링에서 버그를 유발할 수 있기 때문에 안전하지 않게 간주됩니다. Strict Mode는 이러한 사용을 식별하는 데 도움을 줍니다. 다음은 예제입니다:

class OldComponent extends React.Component {
componentWillMount() {
console.log("이 메서드는 안전하지 않습니다!");
}

render() {
return <div>Hello, I'm an old component!</div>;
}
}

이 컴포넌트를 Strict Mode에서 사용하면, componentWillMount 라이프사이클 메서드 사용에 대한 경고가 콘솔에 표시됩니다.

대신, 더 안전한 대안을 사용해야 합니다. 다음은 안전하지 않은 메서드와 그 안전한 대안을 나열한 표입니다:

안전하지 않은 메서드	안전한 대안
componentWillMount	componentDidMount
componentWillReceiveProps	static getDerivedStateFromProps
componentWillUpdate	getSnapshotBeforeUpdate

Legacy Ref API Usage

Refs는 무엇인가요?

Refs는 렌더 메서드에서 생성된 DOM 노드나 React 요소에 접근할 수 있는 방법을 제공합니다. UI의 특정 부분에 대한 직접적인 연결과 같습니다.

문자 Refs (레거시)

과거에는 문자를 사용하여 refs를 생성했습니다:

class OldButton extends React.Component {
componentDidMount() {
this.refs.myButton.focus();
}

render() {
return <button ref="myButton">Click me!</button>;
}
}

이 방법은 레거시로 간주되며 문제를 일으킬 수 있습니다. Strict Mode에서 문자 refs를 사용하면 경고를 받습니다.

현대적인 Ref 사용

대신, createRef API나 useRef hook을 사용해야 합니다:

class ModernButton extends React.Component {
constructor(props) {
super(props);
this.myButton = React.createRef();
}

componentDidMount() {
this.myButton.current.focus();
}

render() {
return <button ref={this.myButton}>Click me!</button>;
}
}

이 예제에서 우리는 React.createRef()를 사용하여 ref를 생성하고 있습니다. 이는 훨씬 안전하고 효율적입니다.

Legacy findDOMNode Usage

findDOMNode는 무엇인가요?

findDOMNode는 특정 React 컴포넌트 인스턴스를 DOM 트리에서 검색하는 데 사용된 메서드였습니다. 그러나 잠재적인 문제를 일으킬 수 있어 지금은 사용하지 않습니다.

findDOMNode 사용 예제

class OldFinder extends React.Component {
componentDidMount() {
const node = ReactDOM.findDOMNode(this);
node.style.backgroundColor = 'red';
}

render() {
return <div>I'm going to be red!</div>;
}
}

이 코드는 div의 배경색을 빨간색으로 변경합니다. 그러나 findDOMNode를 이렇게 사용하는 것은 권장되지 않으며, Strict Mode에서는 경고를 받습니다.

현대적인 대안

findDOMNode 대신 refs를 사용해야 합니다:

class ModernFinder extends React.Component {
constructor(props) {
super(props);
this.myDiv = React.createRef();
}

componentDidMount() {
this.myDiv.current.style.backgroundColor = 'blue';
}

render() {
return <div ref={this.myDiv}>I'm going to be blue!</div>;
}
}

이는 같은 결과를 얻지만, 더 안전하고 React-friendly한 방법입니다.

결론

그렇습니다, 여러분! 우리는 React의 Strict Mode라는 땅을 거쳐, 안전하지 않은 라이프사이클, 레거시 ref 사용, 그리고 deprecated된 findDOMNode 메서드에 대한 경고를 탐구했습니다. 기억하세요, Strict Mode는 여러분의 친절한 이웃 React 개발자 도구입니다. 항상 여러분이 더 나은, 더 안전한 코드를 작성하도록 도와줍니다.

마무리하면서, 한 학생이 이야기한 것을 떠올립니다. "React는 엄격하지만 사랑하는 부모님처럼 - 우리를 안전하게 지키기 위한 규칙을 정하지만, 동시에 우리가 놀라운 것을 창조할 수 있는 자유를 주는 것입니다." 이 말에 동의할 수 없습니다!

계속 연습하고, 학습하고, 가장 중요한 것은 계속 코딩하세요. 다음 번에 만날 때까지, 행복한 React 개발을 기원합니다!

Credits: Image by storyset