리액트의 생태계는
실용적이고 중요한
다양한 기능과 개념이 있습니다
당연히 이 과정에서
모두 심도 있게 배울 것입니다
리액트 애플리케이션에 전체적으로 필요한
한 가지 핵심 개념을 선택한다면
그것은 컴포넌트를 사용하는 것입니다
컴포넌트는 잠재적으로 재사용이 가능한 구성 요소로
리액트 개발자가 생성할 수 있고
차후에 혼합하여
전반적인 UI를 구축할 수 있습니다
결국 리액트 애플리케이션은 컴포넌트를 결합하여 만들어지는 것입니다
완벽하게 상호작용하는 유저 인터페이스를
만들기 위해 추가적인
기능과 개념이 필요하지만
컴포넌트는 복잡도와 상관없이
모든 리액트 애플리케이션에서 사용됩니다
UI를
여러 컴포넌트의 결합으로 여기는 것은
리액트에서만 적용되는 것이 아닙니다
어느 웹사이트를 방문하든
웹사이트 또는 웹사이트의
몇 가지 주요 빌딩블록을
바로 확인 할 수 있습니다
예시로 오늘 작업 할
이 데모 웹사이트에서
헤더 부분과 주요 개념 항목 그리고
상호작용 탭 부분을 컴포넌트로 볼 수 있습니다
컴포넌트는 개발자에 따라
범위가 정해지기 때문에
컴포넌트가 더 많을 수도
더 적을 수도 있습니다
이 내용은 오늘 그리고 과정 전체에서
계속 배울 것입니다
쉽게 말해 컴포넌트는
HTML과
경우에 따라 CSS 코드,
관련된 자바스크립트 로직 등을
감싼다고 볼 수 있습니다
이 언어와 코드 조각들이 합쳐져
UI의 한 부분을 규정하고 조종합니다
이로 인해 개발자인 여러분이
복잡한 사용자 인터페이스를
관리하기 쉽도록 작게 분리하여
UI의 다른 위치에도 사용할 수
있게 해줍니다
예시로, 이 핵심 개념 컴포넌트는
4번 사용되었는데, 다른 데이터로 설정 됐다는 차이가 있습니다
동일한 컴포넌트이기 때문에 같은 HTML 마크업과 스타일
그리고 자바스크립트 로직을 내재하고 있습니다
컴포넌트 접근 방식이 강력하고 가장 인기가 많은
가장 큰 이유 중 하나 입니다
컴포넌트가 없다면 방대하고 복잡한
HTML 파일이 빠르게 축적되어
작업을 처리하기 어려워질 수 있습니다
더불어, 코딩 변경을 애플리케이션의
다른 부분에서 실행해야 할 수도 있어
오류의 가능성이 증가합니다
컴포넌트 방식을 사용할 때는
코드를 재활용하는 것이므로
한 부분에서 수정할 수 있습니다
컴포넌트 방식의 또 다른 큰 장점은
비슷한 코드는 함께 저장 된다는 것입니다
컴포넌트가 없다면
마크업은 HTML 파일에 하고
자바스크립트 코드는 자바스크립트 파일에 저장됩니다
자바스크립트 코드를 수정하려면
두 파일을 번갈아가며
작업해야 합니다
별도의 파일에서 작업 하기 때문에
연결된 코드를 모두 확인 못하는
경우가 발생할 가능성이 높고
자바스크립트에 수정한 내용을
HTML에는
변경 안 할 경우
코드가 망가질
가능성이 있습니다
반면에 컴포넌트로 작업하는 경우
유사한 코드가 대체로 함께 묶여있어
개발 과정이 단순해집니다
컴포넌트 작업의 장점 마지막은
디자인과 개발 원칙을 따른다는 점이며
대부분의 경우 장점으로 적용합니다
즉, 관심사가 분리되는 것입니다
각 컴포넌트는 다른 기능이 있으므로
UI의 다른 부분을 처리합니다
오늘의 데모 프로젝트의 경우
정보 출력을 담당하는
컴포넌트가 있고
탭 변환과
사용자 입력을 담당하는
컴포넌트가 따로 있습니다
물론 아주 기본적인 앱입니다
프로젝트가 복잡해지면서
이 패턴이 더욱 중요하게 되는데
각자 담당하는 부분이 다른
다수의 개발자가 같은 프로젝트에
작업 할 때
과정이 단순해지기 때문입니다
리액트는 이런 이유로 컴포넌트 사용을 선호합니다
이 수업에서도 마찬가지로 리액트 개발자가 되어
수 백 개의 컴포넌트를
만들고 사용할 것입니다
덧붙이자면 리액트만 이 방법을 사용하는 것이 아닙니다
다른 대중적인 프론트엔드 프레임워크에서도
이런 개념을 찾아볼 수 있고
예로
Angular, Vue, Svelte가 있습니다
웹개발 영역 밖에서도
찾아볼 수 있습니다
예로, 모바일 개발 프레임워크인 Flutter가 있습니다
이제부터 첫 리액트 컴포넌트의 코드를
살펴볼 것이고
이어서 우리의 첫 컴포넌트를 만들어보겠습니다