[React] Main Concept

1. 컴포넌트 (Component)

• 리액트 애플리케이션을 구성하는 기본 단위
• 재사용하고 독립적인 UI 요소
• 함수형 컴포넌트와 클래스 컴포넌트로 나뉨
  
  • 함수형 컴포넌트 : 함수로 정의되며, 주로 hooks와 함께 사용
  • 클래스형 컴포넌트 : 클래스 문법을 사용하여 정의 (리액트의 최신 버전에서는 함수형 컴포넌트가 더 많이 사용됨)

// 함수형 컴포넌트 예제
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

// 클래스형 컴포넌트 예제
class Welcome extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

2. 렌더링 (Rendering)

• 리액트 컴포넌트가 UI를 화면에 출력하는 과정
• 리액트는 가상 DOM을 사용하여 실제 DOM과의 변경 사항을 최소화하여 효율적인 렌더링을 구현
• 컴포넌트가 상태(state)나 props가 변경될 때마다 리렌더링이 발생

ReactDOM.render(
    <Welcome name="lee" />,
    document.getElementById('root')
);

3. Props

• 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 읽기 전용 데이터 
• 컴포넌트 간의 데이터 전달을 위해 사용되며, 자식 컴포넌트에서는 props를 수정할 수 없음

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

// 사용 예
<Welcome name="lee" />

4.State

• 컴포넌트 내부에서 관리되는 동적인 데이터
• 컴포넌트 내에서 변경할 수 있으며, 상태가 변경되면 컴포넌트가 리렌더링 됨
• 함수형 컴포넌트에서는 'useState' 훅을 사용하여 state를 관리

// 함수형 컴포넌트에서의 state 사용 예제
import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

5. Hooks

• 함수형 컴포넌트에서 state와 라이프사이클 기능을 사용할 수 있게 해주는 기능
• 대표적인 훅으로는 'useState', 'useEffect', 'useMemo', 'useCallback' 등이 있음
  • useState: 컴포넌트 내 상태를 관리하는 훅.
  • useEffect: 컴포넌트의 생명주기 동안 사이드 이펙트를 처리하는 훅.
  • useMemo: 연산량이 큰 작업의 결과를 메모이제이션하는 훅.
  • useCallback: 콜백 함수를 메모이제이션하는 훅.

메모이제이션(Memoization)은 동일한 연산을 반복적으로 수행할 때, 그 결과를 저장해 두고 필요할 때 다시 사용하는 최적화 기법입니다. 이를 통해 중복된 계산을 피하고 성능을 향상시킬 수 있습니다

// useState와 useEffect 훅 사용 예제
import React, { useState, useEffect } from 'react';

function Timer() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        const timer = setInterval(() => {
            setCount(count + 1);
        }, 1000);

        return () => clearInterval(timer);
    }, [count]);

    return <div>{count}</div>;
}

최종 요약

• Component: 리액트 애플리케이션의 기본 구성 요소로, 함수형 컴포넌트와 클래스형 컴포넌트가 있습니다.
• Rendering: 컴포넌트가 UI를 화면에 출력하는 과정으로, 상태나 props가 변경될 때마다 발생합니다.
• Props: 부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터입니다.
• State: 컴포넌트 내부에서 관리되는 동적인 데이터로, 상태가 변경되면 컴포넌트가 리렌더링 됩니다.
• Hooks: 함수형 컴포넌트에서 state와 라이프사이클 기능을 사용할 수 있게 해주는 기능입니다.

끝.