React 의 삼항연산자 가독성 높이기

• 태그 부분의 코드가 길고, 삼항연산자로 표현하는데 한계가 있기 때문에 어떤 로직인지 한눈에 보이지 않는다.

• 상품 상세페이지의 길이가 너무 길어졌으므로 댓글 부분을 따로 떼어서 하위 component 로 만들자.
• 불필요. 그렇게 하지 않아도 구현이 가능

• 태그 부분을 변수로 만들어서 필요한 곳에 넣어주자(공통화).
• 불가능. 보안에 취약함

• 로직은 스크립트 영역에서 만들고, 태그 영역의 삼항 연산자는 결과값을 가지고 판별만 하도록 만들자.

// 스레드 안의 댓글작성 가능여부
const [isThreadMessagePossible, setIsThreadMessagePossible] = useState(false);
// 스레드 밖의 댓글작성 가능여부
const [isMessagePossible, setIsMessagePossible] = useState(false);

// 중략

if (userInfo !== null && userInfo !== undefined) { // 로그인
  if (userInfo.userId === product.userId) { // 판매자
    setIsThreadMessagePossible(false);
    setIsMessagePossible(true);
  } else { // 구매자
    for (const item of resultList) {
      if (item.userId === userInfo.userId) {
        setIsThreadMessagePossible(true);
      }
    }
    if (!isThreadMessagePossible) {
      setIsMessagePossible(true);
    }
  }
}

// 또 중략, JSX(TSX) 부분

{
	isThreadMessagePossible
	? <div>댓글 스레드 안에서 댓글 쓰는 부분</div>
	: <></>
}
{
	isMessagePossible
	? <div>댓글 스레드 밖에서 댓글 쓰는 부분</div>
	: <></>
}