Component

용어정리

이 카테고리는 비전공자로서 개발자로써 공부하며, 평소 이해하지 못한 단어를 제방식대로 정리하는 카테고리입니다.
제방식대로 풀어 쓴것이므로 오류가 있을 수 있습니다.
오류가 있을시 댓글로 남겨주시면 참고하도록 하겠습니다.


컴포넌트란 무엇인가?
쉬운듯 하나 어려운 IT언어…
금일은 컴포넌트단위.. 컴포넌트수정..등 컴포넌트에 대해 알아보겠습니다.

Component(컴포넌트)란 무엇인가?

위키에서 검색을 하면 한국어로 구성요소라고 정의한다.
기계적으로 봤을때 우리가 사용하는 휴대폰을 예로 들면
휴대폰의 구성요소인 배터리는 하나의 컴포넌트이다.
휴대폰배터리
다시말에 어떤 기계나 프로그맹을 구성하는 부품정도라고 생각하면 될 것이다.

그렇다면 우리가 만드는 소프트웨어 즉 프로그래밍에서는 컴포넌트를 어떻게 사용하고 있을까?

개발자들의 컴포넌트사용

우리 개발자들의 숙명 좋은 코드란 무엇일까?
많은 좋은 코드들이 있겠지만, 프론트엔드개발자로써 좋은 코드의 요건중 하나는
재사용이 가능한 코드일 것이다.

html, css를 이용해서 텝리스트를 만든다고 가정을해보자!
텝에 디자인만 조금 바뀐다면 어떻게 작업을 할 것인가?
처음부터 다 다시만들것인가?
여기서 좋은 개발자와 그냥 그러한 개발자가 나누어질것이다.
버튼컴포넌트
좋은개발자라면 기존에 있는 코드에 부모의 클래스나 클래스를 추가하는 방법으로
기본적으로 만들어놓은 텝을 활용할것이다.

이렇듯 기존에 있는 구성요소를 재활용 할 수 있도록 기본 컴포넌트를 잘 구성하는것이 좋은 개발의 한단계일 것 입니다.

프론트엔드개발에서의 컴포넌트 사용

프론트엔드개발과정에서도 컴포넌트 단위로 코딩을 하는 경우가 많다.
semantic-ui
위 사이트는 우리가 원하는 컴포넌트를 만들어 공개해둔 사이트 입니다.
기본적인 semantic-ui 모듈을 설치하고 가이드에 맞는 class명만 입력을 하면 사용하고자하는 컴포넌트로 변경되는 형태이다.

최근에 SPA(single page application)에서도 컴포넌트 단위 코딩을 하는 경우가 많다.
이전에 말해던 semantic-ui 페이지는 React의 컴포넌트를 만든 페이지도 구성하고 있다.
react semantic-ui

이처럼 컴포넌트를 잘 활용하는 것만으로 개발을 효율적으로 할 수 있다.

댓글