[code-review] 1

1) 조건문은 가능하면 postive 로 하기

// 🌱 기존 내 코드

useEffect(() => {
    if (isLiveStreamActive == false) {
      // 영상 송출 중이 아닐 때
    }
    else {
      // 영상 송출 중일 때
    }
});



// 💡 코드 리뷰 후

useEffect(() => {
    if(isLiveStreamActive) {
       // 영상 송출 중일 때
    }
    else {
       // 영상 송출 중이 아닐 때 
    }
}

2) 불필요한 state 생성하지 않기

// 🌱 기존 내 코드

const [isAlertText, setIsAlertText] = useState(false); 
// 경고문구의 상태를 보여주는 state 생성 --- ❗️ 불필요

useEffect(() => {
    if (isLiveStreamActive) {
      setIsAlertText(false);  // 영상 송출 중이면 경고문구 false(off)
    } else {
      setIsAlertText(true);  // 영상 송출 중이 아니면 경고문구 true(on)
    }
  }, [isLiveStreamActive]);

{isRehearsal && (
  <>
    {isAlertText 
      ? ( <WarningText>
             <p>{t('서버에서 받아온 다국어 처리')}</p>
          </WarningText> ) 
      : null}
   </>
)};
// 리허설 모드(true)에서, isAlertText가 true면(영상 송출중이 아니라는 뜻) 경고문구 보여주고 
// 아니면 null

{!isRehearsal && (
  <>
    {isAlertText 
      ? ( <WarningText>
             <p>{t('서버에서 받아온 다국어 처리')}</p>
          </WarningText> ) 
    : null}
  </>
)};
// 방송 모드(false)에서, isAlertText가 true면(영상 송출중이 아니라는 뜻) 경고문구 보여주고 
// 아니면 null



// 💡 코드 리뷰 후

{isRehearsal && (
  <>
    {!isLiveStreamActive && ( 
	  <WarningText>
             <p> {t('서버에서 받아온 다국어 처리')} </p>
          </WarningText> )}
   </>
)};
// 리허설 모드(true)에서 영상 송출중이 아니면(!isLiveStreamActive) && 뒤를 실행

{!isRehearsal && (
  <>
    {!isLiveStreamActive && ( 
	  <WarningText>
             <p> {t('서버에서 받아온 다국어 처리')} </p>
          </WarningText> )}
   </>
)};
// 방송 모드(false)에서 영상 송출중이 아니면(!isLiveStreamActive) && 뒤를 실행

// isLiveStreamActive(=boolean) 이 존재하므로 굳이 isAlertText를 만들 필요가 없다
// 즉, isLiveStreamActive 값으로 대신 사용할 수 있다

📌 삼항 연산자를 사용할 때, true(?)면 실행하고 아니면(:) null 이라는 식이 있을 때는
굳이 null을 써줄 필요가 없다. 따라서 조건 && 실행코드 로 간단히 만들 수 있다.

// 예시
{ thisIsTrue ? <p>true</p> : null }
{ thisIsTrue && <p>true</p> }

📌 불필요한 state를 만들 필요 없다 (주의!)

const [isAlertText, setIsAlertText] = useState(false); 
// isAlertText의 상태를 만들어 준 뒤

useEffect(() => {
    if (isLiveStreamActive) {
      setIsAlertText(false);  // 영상 송출 중이면 경고문구 false(off)
    } else {
      setIsAlertText(true);  // 영상 송출 중이 아니면 경고문구 true(on)
    }
  }, [isLiveStreamActive]);
// isLiveStreamActive 와 true/false가 정반대로 되게 설정하여

{isAlertText ? <WarningText /> : null}
// boolean값에 따라 삼항연산자

>> 차라리 처음부터 isLiveStreamActive의 boolean 값으로 적용하면 간단 

from mentor Joseph🧐