3. Components | 코드 재사용

리액트의 생태계는 실용적이고 중요한 다양한 기능과 개념이 있다.

리액트 애플리케이션에 전체적으로 필요한 한 가지 핵심 개념을 선택한다면 그것은 컴포넌트를 사용하는 것이다.

 

컴포넌트는 잠재적으로 재사용이 가능한 구성 요소로 리액트 개발자가 생성할 수 있고

차후에 혼합하여 전반적인 UI를 구축할 수 있다.

 결국 리액트 애플리케이션은 컴포넌트를 결합하여 만들어지는 것이다.

완벽하게 상호작용하는 유저 인터페이스를 만들기 위해 추가적인 기능과 개념이 필요하지만

컴포넌트는 복잡도와 상관없이, 모든 리액트 애플리케이션에서 사용된다

 

UI를 여러 컴포넌트의 결합으로 여기는 것은 리액트에서만 적용되는 것이 아닙니다

어느 웹사이트를 방문하든 웹사이트 또는 웹사이트의 몇 가지 주요 빌딩블록을 바로 확인 할 수 있다.

 

쉽게 말해 컴포넌트는 HTML과 경우에 따라 CSS 코드, 관련된 자바스크립트 로직 등을 감싼다.

이 언어와 코드 조각들이 합쳐져 UI의 한 부분을 규정하고 조종한다.

이로 인해 개발자가 복잡한 사용자 인터페이스를 관리하기 쉽도록 작게 분리하여

UI의 다른 위치에도 사용할 수 있게 해준다

 

 

예시로, 이 핵심 개념 컴포넌트는 4번 사용되었는데, 다른 데이터로 설정 됐다는 차이가 있다,

동일한 컴포넌트이기 때문에 같은 HTML 마크업과 스타일 그리고 자바스크립트 로직을 내재하고 있다.

컴포넌트 접근 방식이 강력하고 가장 인기가 많은 가장 큰 이유 중 하나다

컴포넌트가 없다면 방대하고 복잡한 HTML 파일이 빠르게 축적되어 작업을 처리하기 어려워질 수 있다.

더불어, 코딩 변경을 애플리케이션의 다른 부분에서 실행해야 할 수도 있어 오류의 가능성이 증가한다

컴포넌트 방식을 사용할 때는 코드를 재활용하는 것이므로 한 부분에서 수정할 수 있다

컴포넌트 방식의 또 다른 큰 장점은 비슷한 코드는 함께 저장 된다는 것이다

컴포넌트가 없다면 마크업은 HTML 파일에 하고, 자바스크립트 코드는 자바스크립트 파일에 저장된다

자바스크립트 코드를 수정하려면 두 파일을 번갈아가며 작업해야 한다

별도의 파일에서 작업 하기 때문에 연결된 코드를 모두 확인 못하는 경우가 발생할 가능성이 높고

자바스크립트에 수정한 내용을 HTML에는 변경 안 할 경우 코드가 망가질 가능성이 있다

반면에 컴포넌트로 작업하는 경우 유사한 코드가 대체로 함께 묶여있어 개발 과정이 단순해진다

컴포넌트 작업의 장점 마지막은 디자인과 개발 원칙을 따른다는 점이며 대부분의 경우 장점으로 적용한다

즉, 관심사가 분리되는 것이다. 각 컴포넌트는 다른 기능이 있으므로 UI의 다른 부분을 처리한다

 

정보 출력을 담당하는 컴포넌트가 있고 탭 변환과 사용자 입력을 담당하는 컴포넌트가 따로 있다.

물론 아주 기본적인 앱이다, 프로젝트가 복잡해지면서 이 패턴이 더욱 중요하게 되는데

각자 담당하는 부분이 다른 다수의 개발자가 같은 프로젝트에 작업 할 때 과정이 단순해지기 때문이다

리액트는 이런 이유로 컴포넌트 사용을 선호한다

이 수업에서도 마찬가지로 리액트 개발자가 되어 수 백 개의 컴포넌트를 만들고 사용할 것이다

덧붙이자면 리액트만 이 방법을 사용하는 것이 아니다.

다른 대중적인 프론트엔드 프레임워크에서도 이런 개념을 찾아볼 수 있고

예로 Angular, Vue, Svelte가 있다