팁들(input, toast, Route, NavLink 등)

input

리액트에서 input이 들어가면 웬만하면 컴포넌트로 빼는 것이 좋다. 안그러면 리렌더링이 너무 빈번하게 일어난다.

toast

만약 어떤 것을 하다가 에러가 발생하면 사용자들에게 알려주기 위해서 toast를 사용한다.

          toast.error(error.response?.data, { position: 'bottom-center' });

이 코드를 axios의 catch에 넣으면 된다.

Route

      <Route path="/workspace:workspace" component={Workspace} />
      <Route path="/workspace/slack" component={Workspace} />

첫번째 코드는 파라미터가 있는 주소이고 두번째는 아니다. 이렇게 하면 무조건 slack가 된다.

      <Route path="/workspace/salck" component={Workspace} />
      <Route path="/workspace:workspace" component={Workspace} />

따라서 파라미터가 있는 주소를 밑에 적어줘야 한다.

NavLink

<NavLink
    key={member.id} 
    activeClassName="selected"
    to={`/workspace/${workspace}/dm/${member.id}`}
>

그냥 Link와 비슷하다. 다른 점은 activeClassName을 줄 수 있다. 그래서 만약에 지금 주소와 링크의 주소가 같으면 activeClassName에 적어준 클래스가 부여된다.

이렇게 url과 하단에 나오는 주소와 일치하게 되면 클래스가 slected가 부여된다. 그렇기에 저 이름을 선택할 때 하이라이트 해주기 편하다.

swr과 props

대부분 데이터 관리를 할 때 swr로 하면된다. 하지만 2개 이상의 컴포넌트에서 사용할 때는 props를 사용하면 된다.

팁

if문과 반복문 안에 hooks가 들어있으면 안된다.