UI 표현하기

• React는 UI를 렌더링하기 위한 Javascript 라이브러리

• UI는 버튼, 텍스트, 이미지같은 작은 요소로 구성

  • 여기서 작은 요소들은 재사용 가능 + 중첩가능? ⇒ 컴포넌트

  <aside> 💡 여기서 컴포넌트는 리액트 컴포넌트를 칭한다고 생각한다.

  </aside>

첫 컴포넌트

• 컴포넌트 === 독립된 UI 조각, UI 구성 요소
• 리액트 컴포넌트 === 마크업을 얹을 수 있는 Javascript 함수

<aside> 💡 리액트 컴포넌트는 클래스 컴포넌트, 함수 컴포넌트 2가지가 있다. 최근에는 함수 컴포넌트를 메인으로 밀고 있어서 위와 같이 표현한 것 같다.

</aside>

• 마크업뿐이지만 CSS와 JS를 결합하여 상호작용하는 UI 애플리케이션 개발이 가능하다

• HTML 태그와 마찬가지로 컴포넌트를 사용할 수 있다.

• Chakra UI, Material UI. 같은 유명 Design System을 사용해서 별도의 디자인 작업없이도 프로젝트를 예쁘게 만들 수 있다.

<aside> 💡 최근에 디자인 뿐만 아니라 사용방식도 고려했을 때 Radix UI 추천

</aside>

컴포넌트 정의하기

• 기존 : 컨텐츠를 마크업 작업한 후, JS를 입히기