취향? 이라기엔 충격적인 이야기.
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
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
렌더되는 부분을 깔끔하게~! 관리
정리의 부분은 개발자마다 다를 수 있겠지만 개인적으로는 깔끔해서 좋다~!