Today 요약

1. 리액트 강의

1. What I Learned?

리액트 강의

truncate

특정 DOM요소에서 텍스트가 점점 길어지게되면 보통 한줄에서 벗어나면서 두 줄이 되는 방식으로 해결하거나 아니면 알고리즘을 구현해서 해결했다. 알고리즘은 특정 글자 이상 텍스트가 들어오게 되면 그 뒤에 있는 텍스트를 …으로 치환해서 보여주는 방식을 이용했다. 하지만 text-overflow 라는 속성이 있었다. tailwind 에서는 truncate를 선언하면 된다. 그리고 일반적인 css 속성 이름은 text-overflow다. text-overflow: ellipsis를 선언하면 요소의 너비를 넘어가는 text는 … 으로 변환해서 보여준다.

<div className="flex justify-between p-4 mt-8">
  <span className="truncate">{item.title}</span>
  <span className="ml-4">{item.price.toLocaleString()}</span>
</div>

useLocation

쇼핑몰과 같은 토이 프로젝트에서 상품 목록을 보여주고 특정 상품을 클릭했을 때 상품 상세 페이지로 넘어가게 된다. 이때 백엔드에서 api를 제공해주면 그걸 가지고 리액트 쿼리로 데이터를 받아와서 보여줬었다. 하지만 상품 목록 페이지에서 특정 아이템을 아이디로 구분지어 놓았다면 그 특정 아이템 정보를 useNavigate의 state에 담아서 보낼 수 있다. 그리고 상품 목록 페이지에서 보낸 state 정보는 useLocation으로 보낸 페이지에서 받아서 사용할 수 있다. 어떤 게 더 효율적일까?

이 경우에는 처음에 한 번 전체 상품 목록을 받아오고 그 다음에는 통신할 필요가 없다. 그럼 서버와 불필요한 통신을 안하게 되니까 기존에 백엔드에서 상품 아이디에 대한 목록을 불러오는 api를 만들 필요가 없게 된 거 아닐까?

그렇다고 매번 useNavigate를 통해서 state를 보내는 게 유리하지는 않을 것 같다. 쇼핑몰의 경우 상품 상세페이지로 보내는 state가 상품 상세페이지에서 추가적으로 변동될 일이 크게 없다. 그렇기 때문에 useNagitate로 보내도 문제가 없지만 만약 상품 상세페이지로 보낸 state 정보가 추가적으로 api 통신을 해서 변경이 되어야 하는 상황이라면, 당연히 처음부터 api를 통해서 받고 데이터를 캐시한 다음에 변경사항이 일어나는 것이 더욱 유리할 것이라 생각한다.

아무튼 이번 강의에서는 토이 프로젝트 정도의 단위이고 상세페이지에서 state가 변경될 일이 없기 때문에 useNavigate와 useLocation을 사용한 거라 생각한다.

const ProductItem = ({ item }: ProductProps) => {
  const navigate = useNavigate()

  const handleClick = () => {
    navigate(`/product/${item.id}`, { state: { item } })
  }

  return (
    <li className="cursor-pointer" onClick={handleClick}>
      ...
    </li>
  )
}

const Product = () => {
  const location = useLocation()
  const { id, image, title, description, options, price } = location.state
    .item as ProductType

  const [option, setOption] = useState('')
  const [cartProduct, setCartProduct] = useState<CartProduct>({
    id: '',
    image: '',
    title: '',
    option: '',
    price: ''
  })

  useEffect(() => {
    setCartProduct({ id, image, title, option, price })
  }, [])

  return (
			...
	)
}

export default Product