[React] (리액트 공부하기 25) 컴포넌트 렌더링 막기

1. WarningBanner 컴포넌트

function WarningBanner(props) {
  if (!props.warning) {
    return null; // warning이 false라면 아무것도 렌더링하지 않음
  }
  
  return (
    <div>경고!</div> // warning이 true일 때만 "경고!"를 표시
  );
}

• 역할: props.warning의 값에 따라 특정 메시지를 표시하거나 아무것도 렌더링하지 않는 컴포넌트이다.
• props.warning이 false일 경우 return null;을 통해 아무것도 렌더링하지 않는다.
• props.warning이 true일 경우 <div>경고!<div>을 렌더링하여 화면에 메시지를 표시한다.

---

2. MainPage 컴포넌트

function MainPage(props) {
  const [showWarning, setShowWarning] = useState(false);
  
  const handleToggleClick = () => {
    setShowWarning(prevShowWarning => !prevShowWarning); // 상태를 토글
  );
    
  return (
    <div>
      <WarningBanner warning={showWarning} />
      <button onClick={handleToggleClick}>
        {showWarning ? "감추기" : "보이기"}
      </button>
    </div>
  );
}

상태 관리: showWarning이라는 상태를 관리하며, 이 값은 경고 메시지를 표시할지 말지를 결정한다.

• 초기값은 false이다. 즉, 처음에는 경고 메시지가 보이지 않는다.

• handleToggleClick 함수:

• 버튼 클릭 시 showWarning 상태를 반전 시킨다.

• 이전 값(prevShowWarning)을 가져와 true면 false로, false면 true로 변경한다.

렌더링 구조:
1. <WarningBanner warning={showWarning} />

• showWarning 상태 값이 true이면 경고 메시지를 렌더링한다.
• showWarning 상태 값이 false이면 아무것도 렌더링 하지 않는다

2. <button>

• 버튼 텍스트는 showWarning 상태에 따라 "감추기" 또는 "보이기"로 표시 된다.
• 버튼 클릭 시 handleToggleClick 함수가 실행 되어 showWarning 값을 변경한다.

---

실행 과정

1. 초기 렌더링:

• showWarning의 초기값은 false이므로 <WarningBanner>는 아무것도 렌더링하지 않는다.
• 버튼에는 "보이기"라는 텍스트가 표시 된다.

2. "보이기" 버튼 클릭

• handleToggleClick 함수가 호출 된다.
• showWarning 상태가 true로 변경된다.
• <WarningBanner>가 렌더링되어 "경고!" 메시지가 화면에 표시된다.
• 버튼 텍스트가 "감추기"로 바뀐다.

3. "감추기" 버튼 클릭:

• handleToggleClick 함수가 다시 호출 된다.
• showWarning 상태가 false로 변경된다.
• <WarningBanner>가 렌더링되지 않으므로 "경고!" 메시지가 사라진다.
• 버튼 텍스트가 "보이기"로 다시 바뀐다.

---

핵심 포인트

1. null 반환:

• 리액트에서 컴포넌트가 null을 반환하면 아무것도 렌더링하지 않는다.
• 이 기능을 활용해 조건부로 특정 컴포넌트를 렌더링하지 않을 수 있다.

2. 상태 기반 렌더링:

• showWarning 상태에 따라 <WarningBanner>의 렌더링 여부가 결정된다.
• 이처럼 상태 값에 따라 UI를 동적으로 변경하는 것이 리액트의 주요 특징 중 하나이다.

3. 효율성:

• null을 반환하더라도 컴포넌트가 호출된 것은 유지된다. 단지 DOM에 렌더링되지 않을 뿐이다.