[리액트] Component

컴포넌트(Component)

리액트에서 컴포넌트(Component)는 UI를 구성하는 기본 단위로, 재사용이 가능한 코드 덩어리다.
예를 들어, 버튼, 네비게이션 바, 카드 UI 같은 것들이 각각 하나의 컴포넌트가 될 수 있다.

 

리액트에서는 함수형 컴포넌트와 클래스형 컴포넌트가 있는데,
React 16.8 이후로는 함수형 컴포넌트가 주로 사용되며, 클래스형 컴포넌트는 거의 사용되지 않는다.
즉, 리액트의 컴포넌트는 결국 "JSX를 반환하는 함수"라고 볼 수 있다.

 

---

컴포넌트의 특징

(1) JSX를 반환하는 함수

컴포넌트는 JavaScript 함수처럼 작동하며, JSX를 반환하는 함수다.
즉, 컴포넌트를 실행하면 HTML처럼 보이는 JSX 코드가 반환되며, React가 이를 해석해 화면에 렌더링한다.

JSX 사용 규칙 !

 

(2) 재사용 가능

한 번 만든 컴포넌트는 여러 곳에서 반복해서 사용할 수 있다.

 

(3) 컴포넌트는 계층 구조를 가짐 (트리 구조)

컴포넌트는 다른 컴포넌트를 포함할 수 있으며, 트리 구조를 형성한다.
최상위 컴포넌트인 App 컴포넌트 아래 여러 개의 하위 컴포넌트가 배치된다.

 

(4) props를 통해 데이터 전달

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 props(속성)를 사용한다.
리액트는 단방향 데이터 흐름(부모 → 자식)을 따르며, props는 읽기 전용(Read-only)이므로 수정할 수 없다.

 

• props는 읽기 전용 (자식 컴포넌트에서 직접 변경 불가)
• 반드시 부모 → 자식 방향으로만 전달 가능함.(단반향 데이터 흐름)
• 객체 형태로 전달되며, { }를 사용해 접근할 수 있음.

 

(5) 상태(state)를 가질 수 있다

컴포넌트는 state를 가지고 있으며, 상태가 변경되면 리렌더링이 발생한다.

(함수형 컴포넌트에서 useState를 사용해 관리함.)

 

• State는 컴포넌트 내부에서 관리하는 데이터
• useState()를 사용해서 정의
• State가 변경되면 해당 컴포넌트만 리렌더링됨

 

(6) 불필요한 렌더링 방지 – React.memo()

리액트에서는 부모 컴포넌트의 state가 변경되면, 자식 컴포넌트도 함께 리렌더링된다.
하지만, 자식 컴포넌트의 내용이 변경되지 않았다면 불필요한 리렌더링이 발생할 수 있다.
이때 React.memo()를 사용하면 props가 변경된 경우에만 렌더링을 수행하게 할 수 있다.

---

리액트 컴포넌트 명명 규칙

컴포넌트 이름은 반드시 대문자로 시작해야 한다

리액트에서 컴포넌트의 이름은 반드시 대문자로 시작해야 한다.
소문자로 시작하면 리액트가 기본 HTML 태그로 인식할 수 있기 때문이다.