[TIL] 가독성에 죽고 사는 프론트엔드

Keunyeong Lee·2022년 5월 20일
0

[TIL]

목록 보기
10/15
post-thumbnail

프론트엔드 = 가독성

가독성 있는 코드를 짜자

render 에 map, 삼항 연산자 안 쓰기

취향? 이라기엔 충격적인 이야기.

react component 렌더 단에 map 과 삼항 연산자를 쓰지 말자는 멋진 선배 개발자의 코드리뷰를 보았다.

물론 다른 훌륭한 개발자들은 동의 하지 않을 수 있다.

그래도

"프론트엔드는 가독성이죠."

"코드를 수정하기에 용이한게 짱입니다."

백번 동의하고 배워보자!

함수로 만들어서 렌더에 던지기

  • 기존 코드
import { useState } from 'react'
import { useRecoilValue } from 'recoil'
... 중략

const FavoritesList = () => {
  const pickList = useRecoilValue<MovieData[]>(pickMovieList)
  ...중략
  return (
    <ul className={styles.ul}>
      {pickList.map((item, index) => {
        const movieListKey = `movie${index}`
        return (
          <li
            className={styles.li}
            key={movieListKey}
          >
              <div>{item.Title}</div>
          </li>
        )
      })}
    </ul>
  )
}

export default FavoritesList
  • map 을 꺼내서 돌리고 렌더에 넣어주기
import { useState } from 'react'
import { useRecoilValue } from 'recoil'
... 중략

const FavoritesList = () => {
  const pickList = useRecoilValue<MovieData[]>(pickMovieList)
  // useMemo 는 필요에 따라 넣기도 하기 빼기도하고!
  const pickMovieList = useMemo(()=>pickList.map((item, index) => {
        const movieListKey = `movie${index}`
        return (
          <li
            className={styles.li}
            key={movieListKey}
          >
              <div>{item.Title}</div>
          </li>
        )
      }),[pickList])
  
  ...중략
  return (
    <ul className={styles.ul}>
      {pickMovieList}
    </ul>
  )
}

export default FavoritesList

렌더되는 부분을 깔끔하게~! 관리

정리의 부분은 개발자마다 다를 수 있겠지만 개인적으로는 깔끔해서 좋다~!

profile
🏃🏽 동적인 개발자

0개의 댓글