[새싹 성동 2기] 4-2. 리액트 컴포넌트(1)

목차

 

1. 컴포넌트의 종류         

2. 컴포넌트의 주요 특징 

3. 주요 개념                   

 

 

 

리액트 컴포넌트(React Component)는 UI를 독립적이고 재사용 가능한 코드 조각으로 나눠주는 리액트의 핵심 개념이다.

컴포넌트는 크게 상태(state)와 속성(props)을 기반으로 구성되어 UI를 렌더링하고, 사용자의 입력에 반응하며, 다른 컴포넌트와 상호작용한다.

 

 

[1] 컴포넌트의 종류

(1) 함수형 컴포넌트(Functional Component)

 - Javascript 함수로 정의되는 컴포넌트

 - 선언이 간결하고 최신 리액트에서 주로 사용됨

 - React Hooks를 사용해 상태 관리와 라이프사이클 메서드를 구현할 수 있음

// 함수형 컴포넌트
function MyApp() {
  return (
    <></>
  );
}
export default MyApp;


// 함수 표현식으로 변경
const MyApp = function () {
  return (
    <></>
  );
};
export default MyApp;


// 화살표 함수로 변경
const MyApp = () => {
  return (
    <></>
  );
};
export default MyApp;

 

 

(2) 클래스형 컴포넌트(Class Component)

 - ES6 클래스 문법으로 정의되는 컴포넌트

 - 상태(state)와 라이프사이클 메서드를 기본으로 지원함

 - 함수형 컴포넌트와 React Hooks 등장 이후 덜 사용됨

import { Component } from 'react'; 

class MyApp extends Component {	 ⇐ 사용자가 만드는 컴포넌트(MyApp)는 리액트 Component를 상속받아서 정의
  render() {			 ⇐ 리액트 Component가 정의한 render 함수를 재정의 
    return (
      <></>
    );
  };
}
export default MyApp;

 

 

 

[2] 컴포넌트의 주요 특징

 

 

[3] 주요 개념

(1) 리액트 컴포넌트의 기본 구조

• 부모-자식 컴포넌트(Parent-Child Components) : 부모와 자식 컴포넌트 간의 관계부터 시작하여, 컴포넌트가 어떻게 다른 컴포넌트와 상호작용하는지에 대해 설명
• props(=properties) : 부모에서 자식 컴포넌트로 데이터를 전달하는 방법

 

(2) 컴포넌트의 상태 관리

• state : 컴포넌트 내부에서 관리되는 데이터

 

(3) 컴포넌트의 동작과 생명 주기

• hooks : 함수형 컴포넌트에서도 상태 관리 및 생명 주기 메서드를 사용할 수 있는 hooks 개념을 설명
• Life cycle : 클래스형 컴포넌트의 생명 주기 메서드와 함께, 함수형 컴포넌트에서도 특정 훅을 사용하여 생명주기를 처리하는 방법을 다룸

(4) 컴포넌트 간의 상태 전달 방법

• 상태 내리기(Lifting State Down) : 상태를 부모 컴포넌트에서 자식 컴포넌트로 내려보내는 방식
• 상태 올리기(Lifting State Up) : 반대로, 자식 컴포넌트에서 상태를 부모로 올려보내는 방식, 이를 통해 여러 자식 컴포넌트에서 공통된 상태를 관리할 수 있음

 

(5) 컴포넌트의 DOM 참조

• ref : ref를 사용하여 DOM 요소나 컴포넌트 인스턴스를 직접 참조하는 방법

 

(6) 컴포넌트의 동작과 사용자 인터렉션

• event handling : 사용자 상호작용을 처리하는 방법을 설명