인프런 커뮤니티 질문&답변

강의에서 comment-editor.tsx의 취소 버튼을 조건부 렌더링하는 코드를 수정하는 과정에서 아래와 같은 조건을 사용하고 있는데요. 이렇게 되면 props.type === "REPLY"일때만 의도대로 동작하고, props.type === "EDIT"일때는 취소 버튼이 렌더링 되지 않습니다.

        {props.type === "EDIT" ||
          (props.type === "REPLY" && (
            <Button
              disabled={isPending}
              variant={"outline"}
              onClick={() => props.onClose()}
            >
              취소
            </Button>
          ))}

아래와 같이 렌더링 조건 부분을 괄호로 감싸주면 의도대로 동작하도록 수정됩니다!

        {(props.type === "EDIT" || props.type === "REPLY") && (
          <Button
            disabled={isPending}
            variant={"outline"}
            onClick={() => props.onClose()}
          >
            취소
          </Button>
        )}