ReactJS 디자인 패턴 ~State 동시 배치~

Source: Dev.to

Collocating State 개요

Collocating State는 상태를 사용되는 위치에 가능한 한 가깝게 배치하는 방법입니다. 이 패턴은 복잡성을 줄이고 컴포넌트를 이해하기 쉽게 만들어 줍니다.

이전

App 컴포넌트

function App() {
  const [isVisible, setIsVisible] = useState(false);
  return (
    
      
    
  );
}

ToggleSection 컴포넌트

function ToggleSection({ isVisible, setIsVisible }) {
  return (
    
       setIsVisible(!isVisible)}>
        {isVisible ? "Hide" : "Show"} Content
      
      {isVisible && (
        
          
This content can be toggled!

        
      )}
    
  );
}

이후

App 컴포넌트 (상태 제거)

function App() {
  // Removed the isVisible state.
  return (
    
      
    
  );
}

ToggleSection 컴포넌트 (상태 공동 배치)

function ToggleSection() {
  // Placed the isVisible state here.
  const [isVisible, setIsVisible] = useState(false);
  return (
    
       setIsVisible(!isVisible)}>
        {isVisible ? "Hide" : "Show"} Content
      
      {isVisible && (
        
          
This content can be toggled!

        
      )}
    
  );
}