ReactJS - 조화: 초보자 가이드

안녕하세요, 미래의 React 개발자 여러분! 오늘은 React의 가장 흥미로운 측면 중 하나인 조화에 대해 배우겠습니다. coding을 전혀 해보지 않았다면 걱정하지 마세요 - 이 여정을 단계별로 안내해드릴게요. 그럼 커피 한 잔 (또는 차, 당신의 취향에 따라)을 마시면서 시작해보겠습니다!

ReactJS - Reconciliation

조화는 무엇인가요?

당신이 방을 꾸미는 것을 상상해보세요. 마음 속에 어떻게 보이고 싶은 이미지가 있고, 물건들을 옮기기 시작합니다. 이것이 React가 웹 페이지를 다루는 방식과 비슷합니다. 그 과정을 조화라고 합니다.

간단히 말하면, 조화는 React가 DOM(Document Object Model)을 효율적으로 업데이트하는 방법입니다. React의 슈퍼파워처럼, 웹 앱을 빠르고 반응성 있게 만드는 것입니다.

조화의 중요성

더 깊이 들어가기 전에, 조화가 왜 중요한지 이해해보겠습니다. DOM 업데이트는 일반적으로 웹 애플리케이션에서 가장 느린 부분입니다. React가 변화가 발생할 때마다 전체 DOM을 업데이트해야 한다면, 앱이 바퀴벌레가 언덕을 오를 때보다도 느릴 것입니다!

이때 조화가 등장합니다. React는 DOM 업데이트를 최소화하여 앱을 더 빠르고 반응성 있게 만드는 지혜로운 방법입니다.

조화의 작동 방식

가상 DOM

조화의 핵심에는 가상 DOM이 있습니다. 이를 React의 스케치 pad라고 생각해보세요. 실제로 변경을 가하기 전에 모든 변경을 계획합니다.

다음은 간단한 예제입니다:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Alice" />;
ReactDOM.render(element, document.getElementById('root'));

이 코드에서 React는 <h1> 태그에 "Hello, Alice"를 포함한 가상 DOM의 표현을 만들고, 이를 실제 DOM과 일치시키기 위해 효율적으로 업데이트합니다.

Diffing 알고리즘

이제 Alice를 Bob으로 변경하고 싶다고 가정해봅시다:

// 초기 렌더링
ReactDOM.render(
<Welcome name="Alice" />,
document.getElementById('root')
);

// 업데이트
ReactDOM.render(
<Welcome name="Bob" />,
document.getElementById('root')
);

React는 전체 DOM을 다시 빌드하지 않습니다. 대신, 새로운 가상 DOM과 이전 DOM을 비교하는 "diffing" 알고리즘을 사용하여 필요한 부분만 업데이트합니다 - 이 경우 "Alice"를 "Bob"으로 변경합니다.

조화의 주요 개념

1. 요소 유형

React는 먼저 요소 유형이 같은지 확인합니다. 유형이 변경되었다면, 전체 서브 트리를 다시 빌드합니다.

예를 들어:

// 이전
<div>
<Counter />
</div>

// 이후
<span>
<Counter />
</span>

이 경우, React는 <div>와 그 자식을 파괴하고, 새로운 <span>과 그 자식을 생성합니다.

2. 키

키는 React가 목록에서 항목이 변경되었는지, 추가되었는지, 제거되었는지 식별하는 데 도움이 됩니다. 예를 들어:

function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
);
}

key={todo.id}는 목록 항목의 순서가 변경되더라도 각 항목을 추적하는 데 도움이 됩니다.

3. 컴포넌트 라이프사이클

조화는 컴포넌트 라이프사이클 메서드를 포함합니다. 간단한 개요를 보겠습니다:

메서드	설명
`componentDidMount`	컴포넌트가 DOM에 삽입된 후 호출됩니다
`componentDidUpdate`	컴포넌트가 업데이트된 후 호출됩니다
`componentWillUnmount`	컴포넌트가 DOM에서 제거되기 전에 호출됩니다

예를 들어:

class Clock extends React.Component {
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

tick() {
this.setState({
date: new Date()
});
}

render() {
return (
<div>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

이 클록 컴포넌트에서 componentDidMount는 타이머를 설정하고, componentWillUnmount는 컴포넌트가 제거될 때 타이머를 정리합니다.

조화를 활용한 예제

이제 더 복잡한 예제로 모든 것을 통합해보겠습니다:

class FruitList extends React.Component {
state = {
fruits: ['Apple', 'Banana', 'Cherry']
};

addFruit = () => {
this.setState(prevState => ({
fruits: [...prevState.fruits, 'Date']
}));
};

render() {
return (
<div>
<ul>
{this.state.fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
<button onClick={this.addFruit}>Add Date</button>
</div>
);
}
}

"Add Date" 버튼을 클릭할 때, React의 조화 과정이 작동합니다:

새로운 가상 DOM을 만들어 업데이트된 과일 목록을 포함합니다.
새로운 가상 DOM과 이전 DOM을 비교합니다.
새로운 <li> 요소가 추가되었음을 식별합니다.
실제 DOM의 해당 부분만 효율적으로 업데이트합니다.

그러면 새로운 과일이 목록에 빠르게 추가됩니다!

결론

조화는 극장 공연에서 무대 뒤에서 일하는 팀과 같습니다. 그들의 작업은 보이지 않지만, 원활한 공연에 필수적입니다. React가 DOM을 효율적으로 업데이트하는 방법을 이해하면, 빠르고 반응성 있는 웹 애플리케이션을 구축하는 데 한 걸음 더 가까워집니다.

로마는 하루아침에 지어지지 않았고, React에 대한 전문 지식도 마찬가지입니다. 계속 연습하고, 계속 코딩하면, 언제 그이들이 조화를 잘하는 사람들과 어깨를 나란히 할 수 있을 것입니다!

미래의 React 마스터 여러분, 행복하게 코딩하세요!

Credits: Image by storyset

이전 튜토리얼:

ReactJS - JSX 없는 React

다음 튜토리얼:

ReactJS - 레퍼런스와 DOM