React Component -2

1. HOCs(Higher-Order Components) :

다른 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수. 기능이나 상태를 재사용하는데 도움이 되며 코드의 중복을 줄이고 유지보수를 용이하게 할 수 있다. 일반적으로 공통 로직을 캡슐화하고 이를 다양한 컴포넌트에 적용할 수 있다.

function withHOC(WrappedComponent) {
  return class extends React.Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

2. Render Props:

하위 컴포넌트에게 어떻게 렌더링할지 결정할 수 있는 함수를 전달하는 패턴. 컴포넌트 간의 상태 공유와 기능 재사용을 가능하게 한다. Render Props를 사용하는 컴포넌트는 자식 요소로 함수를 전달받고, 이 함수는 컴포넌트 상태를 인자로 전달받아 사용할 수 있다.

class RenderPropComponent extends React.Component {
  render() {
    return this.props.render({ value: 'Hello, World!' });
  }
}

<RenderPropComponent
  render={({ value }) => <div>{value}</div>}
/>

3. Context API :

React 애플리케이션에서 전역적으로 상태를 공유할 수 있는 방법을 제공한다. 컴포넌트 트리를 통해 명시적으로 데이터를 전달하지 않고, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있다. 중간에 위치한 컴포넌트들이 불필요한  props를 전달하는 것을 방지할 수 있다.

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    const theme = this.context;
    return <button theme={theme}>Themed Button</button>;
  }
}

4. Hooks :

함수형 컴포넌트에서 상태와 생명주기 매서드를 사용할 수 있게 해주는 기능. 클래스 컴포넌트의 복잡성을 줄이고, 함수형 컴포넌트에서도 상태 관리와 생명주기 매서드를 적용할 수 있음. 더 간결하고 읽기 쉬운 코드를 작성할 수 있다. 아래는 몇가지 기본 Hooks이다.

1. useState : 컴포넌트의 로컬 상태를 관리할 수 있는 Hook. 상태를 생성하고 해당 상태를 변결할 수 있는 함수를 반환.
2. useEffect : 컴포넌트의 생명주기를 관리할 수 있는 Hook. 마운트, 업데이트, 언마운트 시점에 특정 작업을 수행하도록 설정 할 수 있다.
3. useContext : 컴포넌트에서 React context를 사용할 수 있는 Hook. 전역 상태를 손쉽게 사용할 수 있다.