나의 React 여정은 4년 전 기능적 구성 요소와 Hooks로 시작되었습니다. 그런 다음 부트 캠프의 동료 참가자이자 레지던트 클래스 구성 요소 애호가인 'Siswe'가 왔습니다. 우리 중 나머지 사람들이 기능적 구성 요소로 팀 프로젝트를 공동 작업하는 동안 '시스위는 흔들리지 않는 충성심으로 클래스 구성 요소에 매달렸습니다.

구성 요소는 사용자 인터페이스(UI)의 구성 요소입니다.

레고 벽돌이라고 생각해보세요. 다양한 방법으로 결합하여 복잡한 구조를 만들 수 있습니다. UI와 로직을 캡슐화하는 독립적이고 재사용 가능한 코드 조각입니다.

다른 구성요소 내에서 구성요소를 재사용하는 것은 일반적으로 다음과 같습니다.

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    

      
    
  );
}

클래스 구성요소와 기능 구성요소는 React에서 구성요소를 생성하는 두 가지 주요 방법입니다.

import React, { Component } from 'react';

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

 handleClick = () => {
  this.setState({  
 count: this.state.count   1 });
 };

 render() {
  return  
 (
   

    
You clicked {this.state.count} times
    Click me
   
  );
 }
}

export default Counter;

React.Component 클래스를 확장하는 JavaScript 클래스를 사용하여 생성된 클래스 구성 요소입니다.

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count   1);
  };

  return (
    

      
You clicked {count} times
      Click me
    
  );
}

export default Counter;

반면에 이것은 간단한 JavaScript 함수로 작성된 기능적 구성요소입니다.

상태 관리: 핵심 차이점.

클래스 구성 요소는 this.state를 사용하여 자체 내부 상태를 관리합니다. 이는 위의 코드 블록에서 볼 수 있듯이 일반적으로 생성자에서 초기화되고 this.state 객체를 사용하여 액세스되며 this.setState 메서드를 사용하여 업데이트됩니다.

기능적 구성 요소는 처음에는 상태 비저장이었습니다. 그러나 Hooks의 도입으로 그들은 상태 및 수명주기 논리를 관리하는 능력을 얻었습니다. 상태 관리를 위해 useState 후크를 활용하면 위에서 볼 수 있듯이 현재 상태와 이를 업데이트하는 함수라는 한 쌍의 값을 반환합니다. 이는 간단한 상태 관리에 충분합니다. 여러 하위 값을 포함하는 더 복잡한 상태 논리의 경우 또는 다음 상태가 이전 상태에 따라 달라지는 경우 useReducer.
를 사용하는 것이 좋습니다. 예를 들어:

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count   state.step };
    case 'decrement':   

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    

      
Count: {state.count}
      
Step: {state.step}
       
      -
       setStep(Number(e.target.value))} />
    
  );
}

export default Counter;

여기서 useReducer는 구조화되고 유지 관리 가능한 방식으로 여러 상태 값과 복잡한 업데이트 논리를 관리합니다. 후크는 기능적인 구성 요소에만 사용됩니다.

두 구성 요소 모두에서 상태 개체를 직접 조작하지 마세요.

구성 요소 유형에 관계없이 상태 개체를 직접 수정하거나 변경하지 마세요. 대신 업데이트된 값으로 새 개체를 만듭니다. 이 접근 방식은 React가 변경 사항을 효율적으로 추적하고 다시 렌더링을 최적화하는 데 도움이 됩니다.

기능적 구성 요소 예:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    

      
Name: {user.name}
      
Age: {user.age}
       handleNameChange(e.target.value)} />
    
  );
}

export default UserProfile;

클래스 구성요소 예:

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      

        
Name: {this.state.user.name}
        
Age: {this.state.user.age}
         this.handleNameChange(e.target.value)} />
      
    );
  }
}

export default UserProfile;

두 예 모두 원본 개체의 무결성을 유지하면서 사용자 개체의 이름 속성을 업데이트합니다. 이렇게 하면 새로운 상태 개체가 생성되어 불변성을 유지하고 상태 업데이트와 관련된 잠재적인 문제를 방지할 수 있습니다. 이를 준수하면 예측 가능한 동작, 성능 최적화 및 보다 쉬운 디버깅이 보장됩니다.

클래스 구성 요소는 복잡한 논리를 위한 것입니다.

• 복잡한 상태 관리: 세밀한 제어가 필요한 복잡한 상태 로직을 처리할 때 this.state 및 this.setState가 있는 클래스 구성 요소는 더 많은 유연성을 제공할 수 있습니다.
• 수명주기 메서드: componentDidMount, componentDidUpdate 또는 componentWillUnmount와 같은 수명주기 메서드에 크게 의존하는 구성 요소의 경우 클래스 구성 요소가 전통적인 선택입니다.
• 오류 경계: 구성 요소 트리 내의 오류를 처리하고 충돌을 방지하려면 componentDidCatch가 있는 클래스 구성 요소가 필수적입니다.
• 성능 최적화: 성능이 중요한 특정 시나리오에서는 클래스 구성 요소 내의 PureComponent 또는 shouldComponentUpdate를 활용할 수 있습니다.
• 레거시 코드베이스: 클래스 구성 요소에 크게 의존하는 기존 프로젝트에서 작업하는 경우 새 구성 요소에 클래스 구성 요소를 사용하여 일관성을 유지하는 것이 더 쉬울 수 있습니다.

기능적 구성 요소는 간단한 보기용입니다.

• 간단한 구성 요소: 최소한의 상태나 논리를 갖춘 표현형 구성 요소의 경우 단순성과 가독성으로 인해 기능적 구성 요소가 선호되는 경우가 많습니다.
• 후크를 사용한 상태 관리: 기능적 구성 요소에서 useState 및 useReducer를 활용하면 상태를 관리하는 강력하고 유연한 방법이 제공됩니다.
• 부작용: useEffect 후크를 사용하면 데이터 가져오기, 구독 또는 수동 DOM(문서 개체 모델) 조작과 같은 부작용을 관리할 수 있습니다.
• 성능 최적화: useMemo 및 useCallback을 사용하여 기능 구성 요소의 성능을 최적화할 수 있습니다.

구성 요소의 요구 사항에 따라 결정을 내리세요.

기능적 접근 방식은 일반적으로 더 간결하고 읽기 쉬운 것으로 간주되며 단순성과 효율성으로 인해 충분한 경우가 많습니다. 그러나 클래스 구성 요소는 특히 복잡한 논리 또는 성능 최적화를 처리할 때 상태 관리 및 수명 주기 메서드에 대한 더 많은 제어 기능을 제공합니다. 이는 복잡한 논리를 구성하기 위한 더 나은 구조를 의미합니다.

엄격한 규칙이 없기 때문에 클래스 구성 요소와 기능 구성 요소 사이의 선택이 항상 명확한 것은 아닙니다. 구성 요소의 요구 사항을 평가하고 프로젝트 요구 사항에 가장 잘 맞는 유형을 선택하세요.

어떤 구성요소를 더 많이 사용하시나요?