컴포넌트
재사용이 가능한 독립된 모듈로, UI 컴포넌트는 웹과 모바일 화면에서 기능을 구성하는 최소한의 단위다.
예를 들면 웹사이트에서 보이는 한 버튼이 하나의 UI컴포넌트라 할 수 있다.
컴포넌트를 사용하면 좋은 것이,
사용자 입장에서는 다른 사이트에서 본 UI와 비슷한 UI로 인해 별도의 학습 없이도 사이트를 쉽게 사용할 수 있다.
개발자 입장에서도 기존에 사용했던 소스코드와 디자인을 재사용할 수 있어 생산성도 올라간다.
원래는 버튼마다 배경색, 테두리 둥글게, 안의 텍스트는 또 어떻게 할지 지정해줘야 하는데 이 UI컴포넌트라는 것을 사용하게 되면 기존에 있는 버튼의 UI를 그대로 가져다 쓸 수 있는 것이다.
컴포넌트 갤러리
https://component.gallery/
위 사이트에서는 여러 가지 웹UI 컴포넌트들의 예시와 사용방법을 보여준다.
컴포넌트 실제로 적용해보기
컴포넌트 갤러리에서 버튼 컴포넌트를 선택하면 여러 버튼 UI에 대한 예시들이 나오고, 원하는 컴포넌트를 찾아 사용할 수 있다.
Github에서 제공하는 Button의 컴포넌트 사용하기
여러 버튼 컴포넌트 중 GitHub에서 제공하는 버튼을 클릭하면 GitHub의 사이트로 이동한다.
GitHub에서 제공하는 여러 컴포넌트들에 대해 UI의 생김새와 컴포넌트를 어떻게 적용하는지 코드를 보여준다.
그러나 html/css기준으로 깃헙의 컴포넌트를 사용하기 위해선 html파일에 'GitHub꺼 컴포넌트 사용할거다'라는 것을 알려줘야 한다.
Getting started에서 CSS사용하기 위한 링크를 header에 추가해주면 된다.
아래 코드를 html파일 header태그 안에 넣어주면 기본적으로 GitHub의 UI컴포넌트 사용을 위한 준비가 끝이다.
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" /><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
<title>컴포넌트 써보기</title>
</head>이제 GitHub사이트 왼쪽의 리스트에서 Buttons을 선택한 후 Button컴포넌트 코드를 html파일에 복붙한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
<title>컴포넌트 써보기</title>
</head>
<body>
<button class="btn" type="button">Button</button>
</body>
</html>위 코드를 실행시켜 웹페이지를 확인해보면 GitHub의 버튼이 웹에 출력된 것을 확인할 수 있다.
위와 같은 방식으로 다시 GitHub사이트로 돌아가 왼쪽의 리스트에서 자신이 사용하고 싶은 컴포넌트를 찾아 코드를 복사해서 사용하면 GitHub의 UI를 쉽게 사용할 수 있다.
GitHub의 다른 컴포넌트들도 적용해본 모습이다.
단순히 코드를 재사용하는 것만으로 UI에 필요한 여러 요소들의 기능과 디자인을 쉽게 재사용할 수 있어 굉장히 편리하다!
GitHub Primer/CSS
https://primer.style/css/getting-started
