🌿 메뉴이동을 위한 컴포넌트

컴포넌트 방식으로 메뉴 이동하기

마지막으로는 컴포넌트 방식으로 메뉴가 이동된 효과를 보여주는 방법입니다.

컴포넌트란, 재사용 가능한 독립적인 구성 요소를 말해요! 우리가 여태 만들어보았던 버튼, 입력 필드 등을 모듈화 해놓은 개념이라고 보면 됩니다. 지금은 이런것이구나~! 하고 가볍게 이해해주세요. React에서 화면을 구성하는 방법이 바로 컴포넌트 방법입니다. 뒤에서 더 자세히 배우게 됩니다. 😃

컴포넌트의 특징은 다음과 같습니다.

  1. 재사용성 컴포넌트는 한번 작성하면 여러곳에서 재사용 할 수 있습니다. 예를들어, 버튼, 입력필드, 모달 등이 여러 페이지에서 재사용 될 수 있겠죠?
  2. 독립성 각 컴포넌트는 독립적으로 동작하며, 다른 컴포넌트와의 의존성을 최소화하여 유지보수와 테스트가 용이합니다.
  3. 캡슐화 각 컴포넌트는 내부 상태와 구현 세부 사항을 숨기고, 외부와의 상호작용을 명확하게 정의합니다. 그래서 코드 복잡성이 줄어들 수 있습니다.
  4. 조합 가능성 여러개의 컴포넌트를 조합해서 사용할 수 있습니다. 예를들어, 여러 버튼 컴포넌트를 조합해서 메뉴바를 만들 수 있겠죠 ?

컴포넌트를 사용하면 코드가 모듈화 되어있어 유지보수가 편리해집니다. 또한 반복해서 사용할 수 있기 때문에 협업할때에도 코드 반복이 줄어들고 빠른 개발을 할 수 있게 됩니다. 더 자세한건 후에 더 공부해봅시다 !

📝 실습 코드