[react] 중첩 삼항연산자 쓰는 법 + 단점

결론부터 말하면 {} 안에 ()를 써주면 된다. 

 

 

중첩 삼항연산자를 쓰기 전 코드

---

<div>
 {checked && message === '' && isDuplicate ? '다른 닉네임을 입력해주세요.' : ''}
 {checked && message === '' && !isDuplicate ? '사용가능한 닉네임입니다.' : ''}
</div>

728x90

중첩 삼항연산자를 쓴 후 코드

---

<div>
  {checked && message === '' ? 
    (isDuplicate ? 
     '다른 닉네임을 입력해주세요.'
     : 
     '사용가능한 닉네임입니다.') 
  :''}
</div>

 

반응형

+ 중첩 삼항연산자를 쓰는 것이 더 좋을 줄 알고 리팩토링을 하려고 했던건데,(checked && message === '' 코드가 중복적으로 나오는 것이 보기 싫었다.) 오히려 코드의 가독성이 떨어진다는 단점이 있다고 한다.

중첩 삼항연산자를 사용하면 eslint 오류가 발생하는데 해당 오류를 공식사이트에서 확인해보면 코드의 가독성 문제로 인해 허용하지 않고 있다는 글을 확인해볼 수 있다.