깔끔한 view단 코드 만들기

그냥 문득 작업하다가 생각이 났는데 리액트 컴포넌트에서 view에 리턴해주는 부분이 너무 난잡해보여서 정리해보다가 글을 쓰게 되었다. 애초에 jsx 문법이 가능해서 html 코드와 같이 javascript 문법으로 조건을 걸어서 렌더링이 가능해져서 유용하게 잘 사용하고 있었지만 한번 삼항연산자 안에 삼항연산자를 렌더링 해주어서 보다 깔끔하게 정리해보았다. 

 

return(	
    <>        
            <div className="content-header">
          <span className="content-title">{title}</span>
        </div>
        <div className="content-desc">
        {description}
        </div>
        <div id="2" className="authors-box">
            <div className="authors-title">
               Author
            </div>
            <div className="author-name">
              {flag ? 
              (authors.length === 0 ? (
               fewauthors.map((few) =>
               <span className="name">{few}</span>
               )
             ) 
             : (
              authors.map((few) =>
              <span className="name">{few}</span>
              )
             ))
              :(
                <span className="noname">기재된 작가명이 없습니다</span>
              )
            }

            </div>
        </div>
        </>
     )

 

잘 작동한다. 어찌보면 그렇게 복잡하지도 않다. 근데 가독성에서 뭔가 마음에 안들었다.

 

그래서 바꿔봤다.

 

 const imgRender = () => {
      return(<>
       {authors.length === 0 ? (
               fewauthors.map((few) =>
               <span className="name">{few}</span>
               )
             ) 
             : (
              authors.map((few) =>
              <span className="name">{few}</span>
              )
             )
    }
      </>
      )
    }
    
    
    
    /////////////////////////////
    
    
    return (
            <>        
            <div className="content-header">
          <span className="content-title">{title}</span>
        </div>
        <div className="content-desc">
        {description}
        </div>
        <div id="2" className="authors-box">
            <div className="authors-title">
               Author
            </div>
            <div className="author-name">
              {flag ? imgRender()
              :(
                <span className="noname">기재된 작가명이 없습니다</span>
              )
            }
            </div>
        </div>
        </>
        )

 

물론 코드 양적으로는 따로 함수를 만들어서 리턴시켜주는것이라 전체 양적으로는 똑같지만 그래도 리턴 부분이 깔끔해져서 더 좋다. 

 

나중에는 styled-component 도 적극 활용해서 view 리턴 부분을 아예 컴포넌트식으로 더 깔끔하게 만드는 걸 연습해야겠다. 

 

결론 : jsx 문법을 이용한 코드가 너무 view 리턴에서 길어지고 가독성이 떨어진다 싶으면 따로 그 부분만 리턴하는 함수를 만들어서 더 깔끔하게 만들장~  이상