React 파일 생성
터미널에서
npx create-react-app@latest 새폴더이름
React에서의 몇 가지 주요 규칙은 다음과 같습니다:
JSX 사용: React에서는 JSX(JavaScript XML)를 사용하여 UI를 표현합니다. JSX는 JavaScript의 확장 문법으로, XML 또는 HTML과 유사한 구조를 가지고 있습니다.
컴포넌트 기반: React는 컴포넌트 기반 아키텍처를 기반으로 하고 있습니다. UI를 독립적이고 재사용 가능한 작은 조각인 컴포넌트로 나누어 개발합니다.
단방향 데이터 바인딩: React에서는 단방향 데이터 바인딩을 지향합니다. 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있지만, 하위 컴포넌트에서는 직접 상위 컴포넌트의 데이터를 수정할 수 없습니다.
가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 성능을 최적화합니다. 이는 실제 DOM 조작을 최소화하고 변경된 부분만 업데이트하여 효율적인 렌더링을 가능하게 합니다.
단일 페이지 애플리케이션(SPA): React는 주로 단일 페이지 애플리케이션을 개발하는 데 사용됩니다. 이는 페이지 전환 시 전체 페이지를 새로고침하지 않고도 빠르게 렌더링되는 경험을 제공합니다.
상태 관리: React에서는 상태(state)를 사용하여 컴포넌트의 동적인 데이터를 관리합니다. 상태는 컴포넌트가 내부적으로 유지하며 변경될 때마다 렌더링이 다시 발생합니다.
이벤트 핸들링: React에서는 이벤트 핸들링이 일반적으로 camelCase로 작성됩니다. 예를 들어, onClick, onChange 등이 있습니다.
라이프사이클 메서드: React 컴포넌트는 라이프사이클 메서드를 가지고 있습니다. 이를 이용하여 컴포넌트의 생성, 업데이트, 소멸 등의 단계에서 작업을 수행할 수 있습니다.
프롭스(Props): 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데에는 프롭스를 사용합니다.
Hooks: 함수형 컴포넌트에서 상태나 라이프사이클 기능을 사용할 수 있게 해주는 Hooks가 도입되었습니다. 가장 많이 사용되는 것 중에는 useState, useEffect 등이 있습니다.
이러한 규칙들은 React를 사용하는 개발자들이 효율적이고 일관된 방식으로 애플리케이션을 개발할 수 있도록 도와줍니다.
참조 : React 공식문서(한글)