리액트 주요 문법과 개념

리액트는 자바스크립트를 기반으로 한 라이브러리로, UI(User Interface)를 만들기 위한 도구입니다. 리액트의 주요 문법과 개념은 다음과 같습니다:

1. JSX (JavaScript XML):
   • JSX는 자바스크립트의 확장 문법으로, 리액트에서 UI를 작성할 때 사용됩니다.
   • HTML과 유사한 문법을 사용하여 컴포넌트의 UI를 정의할 수 있습니다.
   • JSX는 babel과 같은 도구를 사용하여 일반 자바스크립트 코드로 변환됩니다.
2. 컴포넌트 (Components):
   • 리액트의 핵심 개념 중 하나로, 재사용 가능한 UI 조각을 나타냅니다.
   • 함수형 컴포넌트(Functional Components)와 클래스형 컴포넌트(Class Components)로 구현할 수 있습니다.
   • 컴포넌트는 JSX를 반환하는 함수 혹은 클래스입니다.
3. Props (Properties):
   • 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전달하는 메커니즘입니다.
   • Props는 읽기 전용(immutable)이며, 자식 컴포넌트에서는 수정할 수 없습니다.
   • 함수형 컴포넌트의 인자로 전달되거나, 클래스형 컴포넌트의 this.props를 통해 접근할 수 있습니다.
4. State:
   • 컴포넌트 내에서 관리되는 데이터의 상태를 나타냅니다.
   • state는 클래스형 컴포넌트에서 사용되며, 컴포넌트의 상태 변화에 따라 UI를 업데이트하는 데 사용됩니다.
   • useState 훅을 사용하여 함수형 컴포넌트에서도 상태를 관리할 수 있습니다.
5. 이벤트 처리:
   • 사용자의 액션에 반응하여 특정 동작을 수행하는 메커니즘입니다.
   • JSX에서는 이벤트 핸들러를 직접 설정할 수 있습니다. 예를 들어, onClick, onChange 등이 있습니다.
6. 라이프사이클 (Lifecycle):
   • 클래스형 컴포넌트에서만 적용되며, 컴포넌트의 수명 주기를 관리하는 메소드들을 의미합니다.
   • 컴포넌트가 생성될 때, 업데이트될 때, 제거될 때 등의 시점에 특정 작업을 수행할 수 있습니다.
7. Hooks:
   • 함수형 컴포넌트에서 상태 관리나 다른 리액트 기능을 사용할 수 있게 해주는 함수입니다.
   • useState, useEffect, useContext 등이 자주 사용되는 훅의 예시입니다.