Component
컴포넌트는 하나의 기능 구현을 위한 여러 종류의 코드 묶음이라고 합니다 :) UI를 재사용 가능한 여러 조각으로 나눈 다음에 각 조각을 개별적으로 나누어 코딩을 합니다!
모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있습니다! 이 컴포넌트는 애플리케이션 내부적으로는 근원이 되는 역할을 합니다 ✨ 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있습니다! 이 계층적 구조를 트리 구조로 형상화할 수 있습니다
먼저 근원이 되는 root 컴포넌트가 있고 그 아래 헤더, 콘텐츠 리스트가 옵니다 😊 헤더는 자신의 아래에 서치와 세팅 같은 자식 컴포넌트를, 콘텐츠 리스트는 각각의 영상 콘텐츠들을 자식 컴포넌트로 가질 수 있습니다 🤓
SPA
수많은 페이지가 존재하는 복잡한 웹 사이트의 경우, html 파일이 수십에서 수백 개가 될 텐데 이걸 어떻게 관리할까요? 이러한 문제를 해결하기 위해 나오게 된 것이 바로 SPA입니다 :) SPA는 Single Page Application의 약자입니다! 말 그대로 하나의 페이지만 존재하는 웹 사이트 또는 웹 애플리케이션 입니다! 처음에는 html 파일에 body 태그가 비어있다가 해당 페이지에 접속할 때 그 페이지에 해당하는 콘텐츠를 가져와서 동적으로 body 태그 내부를 채워 넣게 됩니다 🤭
오른쪽 그림이 SPA입니다 :)
Props
컴포넌트의 속성을 의미합니다
props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 어플리케이션에서 해당 컴포넌트가 가진 속성에 해당합니다 😁
부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값입니다
React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다! 따라서..!! 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있습니다 😁
객체 형태입니다
props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가집니다 :)
props는 읽기 전용입니다
props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값입니다!! 그래서 props는 함부로 변경될 수 없는 읽기 전용 객체가 되었습니다 🤭 함부로 변경되지 않아야 하기 때문입니다!!
