❓Link랑 button 중에 뭘 써야 하는거지..?

하는 질문에서 출발했다. 하는 기능은 비슷한 것 같은데 어떤 상황에서 Link 혹은 button 컴포넌트를 사용하는 것이 적절한가 궁금해졌다.

❗Link와 button은 분명히 다르다!

button ✅does something, a link ✅goes somewhere

• button 은 웹사이트의 상태(state)를 변경시킨다.(프론트 혹은 벡엔드)
• Link 는 사용자를 somewhere로 이동시킨다. (이 때 웹사이트의 state를 변경시키지 않는다.)

❓ 그래서 언제 Link / button을 사용해야 하나?

💡“Will this action affect the website?” 이라는 질문을 던져보면 된다.

General하게는 button은 아껴쓰도록 하고, 중요한 action일 경우 사용한다. 너무 많은 button은 웹사이트의 로딩 속도를 떨어뜨리고, 핵심 CTA(call-to-actions)를 찾기 어렵게 한다.

웹페이지에서 일어나는 action은 다음 두 가지 카데고리 중 하나이다.

1. 사용자가 웹사이트의 back-end 혹은 front-end에 영향을 미치는 action
2. 사용자가 웹사이트에 어떤 영향도 주지 않는 action

sign-up과 purchase action에는 보통 button을 사용한다. 새로운 계정을 만들거나 금전적인 거래가 이루어지는 상황은 웹사이트의 back-end에 영향을 주는 action이다. 새로운 post를 만들거나 댓글을 다는 action도 웹사이트의 content와 렌더링되는 내용을 변경시키는 action으로, front-end에 영향을 주는 action이다.

💡이처럼 웹사이트의 back-end 혹은 front-end에 영향을 미칠 경우, button을 사용한다.

하지만, 사용자가 또다른 페이지로 이동하는 actino은 웹사이트에 어떤 영향도 주지 않는다. 이 때 사용자는 웹페이지를 브라우징하는 구경꾼이다.

💡이럴 때는 button보단 link를 사용하도록 한다.

출처

• https://medium.com/@h_locke/links-vs-buttons-e8b523660fb3
• https://uxmovement.com/buttons/when-to-use-a-button-or-link/