[React] basic manual

Component

컴포넌트는 React의 핵심 개념으로, 웹 페이지의 사용자 인터페이스(UI)를 재사용 가능한 독립적인 단위로 분할하는 역할을 수행합니다. 

이는 마치 레고 블록을 조립하여 복잡한 구조물을 완성하는 과정과 유사합니다. 

현대 React 개발에서는 함수형 컴포넌트의 활용이 보편적입니다.

 

 

JSX (JavaScript XML)

JSX는 JavaScript 내부에 HTML과 유사한 구문을 작성할 수 있도록 지원하는 JavaScript의 확장 문법입니다. 이는 실제 HTML이 아닌, React 엘리먼트를 생성하기 위한 목적이며, 사용자 인터페이스의 구조를 더욱 직관적으로 표현하는 데 기여합니다. 

 

 

Properties

Props(Properties)는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는 메커니즘입니다. 

HTML 태그의 속성과 유사한 형태로 사용되며, 자식 컴포넌트에서는 전달받은 props를 읽어 활용합니다. 

전달된 props는 자식 컴포넌트 내부에서 변경 불가능한(읽기 전용) 특성을 지닙니다. 

 

 

useState

State(상태)는 컴포넌트 내부에서 시간이 경과함에 따라 변화할 수 있는 데이터를 의미합니다. 

이는 카운터 애플리케이션의 현재 값 또는 목록의 항목 등 동적인 데이터를 관리하는 데 사용됩니다. 

useState 훅을 활용하여 상태를 선언하고 갱신하며, 상태의 변경은 React가 사용자 인터페이스를 자동으로 재렌더링하도록 트리거합니다. 

 

 

useEffect

 

 

Conditional Rendering

조건부 렌더링은 특정 조건에 따라 다른 사용자 인터페이스 요소를 표시할 필요가 있을 때 사용됩니다. 

JavaScript의 if 문 또는 삼항 연산자 (조건 ? 참일_경우_값 : 거짓일_경우_값)를 활용하여 구현할 수 있습니다.

 

 

map

여러 데이터를 목록 형태로 출력할 때 JavaScript의 map() 메서드가 일반적으로 활용됩니다. 

배열의 각 항목에 대해 컴포넌트를 생성하며, 이때 각 항목에 고유한 key prop을 부여하는 것이 필수적입니다.

 

 

Event Handling

이벤트 핸들링은 버튼 클릭, 입력 필드 변경 등 사용자 상호작용에 반응하는 기능을 구현합니다. 

HTML의 이벤트 처리와 유사하나, React에서는 이벤트 핸들러 함수를 JSX 요소에 직접 전달하며, 이벤트 이름은 카멜케이스(camelCase)를 사용합니다.

 

 

출처 : React basic manual