Today 요약

1. 리액트 강의

1. What I Learned?

리액트 강의

강의 듣다가 소소하게 알게된 것들

• vscode에서 한 줄 전체 삭제 할 때 기존에 cmd + shift + k 를 사용했었다. 하지만 강의를 보댜가 cmd + x 도 가능한 걸 알게되었다.
• 리액트에서 환경변수 사용할 때 .env를 보통 이용한다. 다른 방법으로는 .env.local이 있다. 리액트를 CRA로 생성해서 사용할 때 기본적으로 .gitignore에 .env.local이 추가 되어 있다.
  그래서 .env를 만들고 .gitignore에 추가하는 것보다 .env.local을 생성하면 좀 더 편리하다.

호출 단순화

export function onUserStateChange(callback) {
	onAuthStateChanged(auth, (user) => {
		callback(user)
	}
}

위와 같은 함수가 있고, 이 함수를 사용할 때

useEffect(() => {
  onUserStateChange((user) => setUser(user))
}, [])

이런 방식으로 보통 사용하게 되는데, 이때 user라는 인자가 함수에 전달되는 매개변수와 동일하면 생략할 수 있다.

useEffect(() => {
  onUserStateChange(setUser)
}, [])

이렇게 단축해서 사용이 가능하다. 이걸 어떤 용어로 부르는지는 아직 찾지 못했다. 하지만 호출 단순화 정도로 부르면 어떨까?

props 사용하는 방법

이건 그냥 단순한 내용인데, 나중에 어떻게 사용하는 게 코드 가독성이 더 좋을까에 대해서 한 번 고민해보고 사용하면 좋을 것 같아서 정리해본다.

평소에 내가 사용하는 방법은 아래와 같았다.

const User = ({ user }) => {
  return (
    <div>
      <img src={user.photoURL} alt="" />
      <span>{user.displayName}</span>
    </div>
  )
}

하지만 강의에서 아래 코드와 같은 방법을 사용했다.

const User = ({ user: { photoURL, displayName } }) => {
  return (
    <div>
      <img src={photoURL} alt="" />
      <span>{displayName}</span>
    </div>
  )
}

전달된 props 객체의 값들을 자주 사용하게 된다면, 이 방법이 더욱 가독성이 좋을 것 같다. 타입스크립트로 타입을 정의할 때는 어떤 차이가 있을까?

interface UserInfo {
  photoURL: string
  displayName: string
}

interface UserProps {
  user: UserInfo
}

const User = ({ user: { photoURL, displayName } }: UserProps) => {
  return (
    <div>
      <img src={photoURL} alt="" />
      <span>{displayName}</span>
    </div>
  )
}

import { FC } from 'react'

interface UserInfo {
  photoURL: string
  displayName: string
}

const User: FC<{ user: UserInfo }> = ({ user: { photoURL, displayName } }) => {
  return (
    <div>
      <img src={photoURL} alt="" />
      <span>{displayName}</span>
    </div>
  )
}

import { FC } from 'react'

interface UserInfo {
  photoURL: string
  displayName: string
}

const User: FC<{ user: UserInfo }> = ({ user }) => {
  return (
    <div>
      <img src={user.photoURL} alt="" />
      <span>{user.displayName}</span>
    </div>
  )
}

export default User

타입 정의할 때는 전혀 차이가 없다. 그러니까 그냥 어떤 게 더 가독성이 좋은 방법일까를 고민해서 사용하거나 코드가 이해하기 쉬운 게 어떤 것일까를 고민하면 될 것 같다.