React 훅이 도입된 이유

[lledellebell]

Chapter3. 리액트 훅 깊게 살펴보기

• Chapter3. 리액트 훅 깊게 살펴보기
  • 리액트 훅(React Hooks)
  • React 훅이 도입된 이유

리액트 훅(React Hooks)

리액트 훅(React Hooks)은 리액트의 함수형 컴포넌트에서 상태 관리와 생명주기 메서드를 사용하기 위해 리액트 16.8 버전에 도입된 새로운 기능입니다. 이전에는 클래스형 컴포넌트에서만 상태 관리와 생명주기 메서드를 사용할 수 있었지만, 훅을 통해 함수형 컴포넌트에서도 동일한 기능을 사용할 수 있게 되었습니다.

// react 16.8 이전
import React from 'react';

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>{this.state.count} 번 클릭했습니다.</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          👈 클릭
        </button>
      </div>
    );
  }
}

// react 16.8 이후
import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}번 클릭했습니다.</p>
      <button onClick={() => setCount(count + 1)}>
       👈 클릭
      </button>
    </div>
  );
}

React 훅이 도입된 이유

클래스 컴포넌트의 복잡성 감소

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

컴포넌트 재사용성 향상

// 클래스 컴포넌트 예시 (HOC 사용):
// withDataFetching.js
import React, { Component } from 'react';

export function withDataFetching(WrappedComponent) {
  return class extends Component {
    state = {
      data: [],
      isLoading: false,
      error: null,
    };

    componentDidMount() {
      this.setState({ isLoading: true });
      fetch(this.props.dataSource)
        .then(response => response.json())
        .then(data => this.setState({ data, isLoading: false }))
        .catch(error => this.setState({ error, isLoading: false }));
    }

    render() {
      return (
        <WrappedComponent
          data={this.state.data}
          isLoading={this.state.isLoading}
          error={this.state.error}
          {...this.props}
        />
      );
    }
  };
}

// 사용 예:
// SomeComponent.js
import React from 'react';
import { withDataFetching } from './withDataFetching';

class SomeComponent extends React.Component {
  render() {
    // 데이터 사용
  }
}

export default withDataFetching(SomeComponent);

// 함수형 컴포넌트 예시 (커스텀 훅 사용)
// useDataFetching.js
import { useState, useEffect } from 'react';

function useDataFetching(dataSource) {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    fetch(dataSource)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setIsLoading(false);
      })
      .catch(error => {
        setError(error);
        setIsLoading(false);
      });
  }, [dataSource]);

  return { data, isLoading, error };
}

// 사용 예:
// SomeComponent.js
import React from 'react';
import { useDataFetching } from './useDataFetching';

function SomeComponent({ dataSource }) {
  const { data, isLoading, error } = useDataFetching(dataSource);

  // 데이터 사용
}

export default SomeComponent;

클래스와 함수형 컴포넌트 간의 일관성

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>{this.state.count} 번 클릭했습니다.</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          👈 클릭
        </button>
      </div>
    );
  }
}

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}번 클릭했습니다.</p>
      <button onClick={() => setCount(count + 1)}>
        👈 클릭
      </button>
    </div>
  );
}

컴포넌트의 사이드 이펙트 관리

// useEffect를 사용하여 API 호출을 처리하는 예시
import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData(); // 컴포넌트가 마운트되거나 업데이트될 때마다 fetchData 함수를 실행합니다.
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}