210912 개발기록: 리액트, 삼항연산자 없이 jsx 깔끔히 리턴

🍏  삼항연산자를 이용한 jsx 리턴

jsx/tsx 에서 아래처럼 삼항 연산자를 사용하여 원하는 태그를 렌더링 하는 경우가 많다.

 

responseData['image'] 값이 존재할 때와 그렇지 않을 때 각각 다른 태그를 렌더링하는 코드인데, 

우선 코드 가독성이 너무 떨어져 다른 방법을 찾고 싶었다.

 

 

🍎  Nesting 대신 OR operator 를 사용한 리턴

다른 분의 벨로그 를 통해 네스팅이 아닌 early return 이란 방법을 알게 됐다. (이분도 주니어 같은데 글을 깔끔하고 가독성있게 잘 쓰신다. 무엇보다 내용이 좋다..!!)

 

우선 삼항 연산자로 사용할 코드 부분을 아예 다른 컴포넌트로 생성한다.

QuestionImg 라는 컴포넌트를 생성하여 아래 주석된 코드를 밀어넣었다.

 

이제 한눈에 봐도 코드가 깔끔해진 것을 볼 수 있다. 마저 작업하러 QuestionImg 컴포넌트 내부를 살펴보자. 

이전에는 삼항연산자를 사용했다면, 이번에는 OR operator 를 사용했다.

구현하고자 하는 내용은 같다. responseData['image'] 가 존재한다면, 해당 값을 img 태그의 src 로 넣고, 그렇지 않으면 '슬의' 라는 고정값을 사용한다. 이 부분을 삼항연산자가 아닌 OR operator 를 사용함으로 더욱 깔끔히 구현할 수 있었다.

const QuestionImg = () => {

    const imageName = responseData['image'] || '슬의' 

    return (
            <img
                id="poster"
                src={require(`../images/${imageName}.png`).default}
                alt={ imageName}/>
    );
}

export default QuestionImg;

 

깔-끔