[React] render() 함수 완벽 가이드 ✨

React의 render() 톺아보기! ✨

React에서 컴포넌트를 다룰 때 가장 중요한 메서드 중 하나가 바로 render() 함수입니다. UI를 구성하는 핵심 역할을 담당하는 이 함수에 대해 깊이 파헤쳐 봅시다. 어디서, 어떻게 사용되고, 어떤 원리로 동작하는지 알아보고, 실무에서의 활용법과 주의점까지 다뤄볼게요!

---

render() 함수란? 🤔

render() 함수는 React 클래스형 컴포넌트에서 필수적으로 구현해야 하는 메서드로, 컴포넌트의 UI를 정의합니다. React는 이 함수가 반환하는 결과를 기반으로 DOM을 업데이트하거나 Virtual DOM과 비교 작업을 수행합니다.

 

주요 특징

• JSX 반환: render() 함수는 JSX 또는 null을 반환해야 합니다.
• 순수 함수: render() 함수는 외부 상태를 직접 변경하지 않고, 입력(상태와 props)에 따라 동일한 출력을 반환해야 합니다.
• 컴포넌트 내부의 UI 정의: render() 함수에서 컴포넌트의 UI를 선언적으로 작성합니다.

---

render() 함수의 기본 사용법 🌟

클래스형 컴포넌트에서 render() 함수는 반드시 구현해야 합니다. 함수형 컴포넌트에서는 return문이 render() 역할을 대신하죠.

 

클래스형 컴포넌트 예제

import React from "react";

class Greeting extends React.Component {
  render() {
    const { name } = this.props;
    return <h1>Hello, {name}!</h1>;
  }
}

export default Greeting;

• render() 함수는 props를 통해 부모 컴포넌트에서 전달된 데이터를 받아 UI를 반환합니다.

---

render() 함수의 원리 🧩

React는 render() 함수의 반환값을 활용해 DOM을 업데이트하거나 Virtual DOM과 비교(diffing)합니다.

 

작동 과정

1. 상태 변화:
   • 컴포넌트의 state나 props가 변경되면 React는 render() 함수를 다시 호출합니다.
   • 변경된 결과를 기반으로 Virtual DOM을 생성합니다.
2. Virtual DOM 비교:
   • 새로운 Virtual DOM과 이전 Virtual DOM을 비교(diffing)하여 변경된 부분만 실제 DOM에 반영합니다.
3. 최소 DOM 조작:
   • 변경된 부분만 DOM에 업데이트하여 성능을 최적화합니다.

---

render() 함수의 규칙 🛠️

1. 반드시 JSX 또는 null 반환

• HTML처럼 보이는 JSX를 반환하거나, 아무것도 렌더링하지 않을 경우 null을 반환합니다.

render() {
  return <div>안녕하세요!</div>; // JSX 반환
  // return null; // 렌더링할 내용이 없을 때
}

 

2. Side Effect 금지

• render() 함수 내부에서 상태 변경이나 API 호출 같은 부작용(Side Effect)을 실행하면 안 됩니다.

render() {
  // this.setState({ name: "React" }); // ❌ 상태 변경 금지
  return <h1>React Rules!</h1>;
}

 

3. Props와 State에 의존

• UI는 props와 state에 기반해 결정됩니다. 외부 변수나 직접적인 DOM 조작은 피해야 합니다.

---

함수형 컴포넌트와의 차이점 🤷‍♀️

React Hooks가 도입되기 전, 함수형 컴포넌트는 상태 관리와 라이프사이클 메서드를 사용할 수 없었기 때문에 render() 함수가 없는 단순한 컴포넌트만 작성할 수 있었습니다.

 

함수형 컴포넌트 예제

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

 

React Hooks(useState, useEffect 등)가 등장하면서 함수형 컴포넌트도 상태와 라이프사이클을 사용할 수 있게 되었고, render() 함수가 필요 없어졌습니다.

---

실무에서의 활용: 상태 변화에 따른 렌더링 🛠️

React 컴포넌트는 상태가 변경되면 자동으로 render() 함수가 다시 호출됩니다. 이를 활용하면 동적인 UI를 만들 수 있습니다.

 

상태에 따른 조건부 렌더링

import React from "react";

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  toggleButton = () => {
    this.setState((prevState) => ({
      isOn: !prevState.isOn,
    }));
  };

  render() {
    return (
      <div>
        <p>{this.state.isOn ? "ON" : "OFF"}</p>
        <button onClick={this.toggleButton}>Toggle</button>
      </div>
    );
  }
}

export default Toggle;

• setState를 통해 상태를 업데이트하면 render() 함수가 다시 호출되어 새로운 UI가 렌더링됩니다.

---

주의점과 흔히 발생하는 오류 ⚠️

1. this 바인딩 문제

클래스형 컴포넌트에서 render() 함수 내부에서 사용하는 메서드는 반드시 this를 바인딩해야 합니다.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log(this);
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

 

대안: 클래스 필드 문법을 사용해 자동 바인딩

handleClick = () => {
  console.log(this);
};

 

2. 렌더링 성능 문제

render() 함수는 가벼운 연산만 수행해야 합니다. 무거운 계산은 useMemo(함수형 컴포넌트)나 별도의 유틸 함수로 분리하세요.

 

3. 불필요한 리렌더링

• 부모 컴포넌트가 리렌더링되면 자식 컴포넌트의 render() 함수도 호출됩니다.
• React.memo를 사용해 불필요한 리렌더링을 방지할 수 있습니다.

---

요약: render() 함수의 핵심 📌

• UI 정의: JSX를 반환하여 컴포넌트의 UI를 정의
• Pure Function: 외부 상태를 변경하지 않고, 동일한 입력에 동일한 출력을 반환
• 자동 호출: 상태나 props가 변경될 때 React가 자동으로 호출
• Virtual DOM과 연동: Virtual DOM을 생성하고 비교(diffing)해 효율적으로 업데이트

 

React의 render() 함수는 UI를 그리는 핵심 도구로, React의 선언적 프로그래밍 철학을 완벽히 보여줍니다. 이를 잘 활용하면 유지보수성 높고 효율적인 애플리케이션을 개발할 수 있습니다.

 

🌷전설의 개발자가 되어봅시당! 🌷