프로바이더를 단방향 데이터로 사용하는 경우

Q1. 만약에 내가 전달하려는 데이터를 매개변수로 설정하지 않으면 일방적으로 값을 전달하는 컴포넌트도 만들수 있긴하겠네? 그렇게도 쓰여?

네, 맞습니다! 그런 패턴을 "제어되지 않는 컴포넌트(Uncontrolled Component)" 또는 "단방향 데이터 흐름"이라고 할 수 있어요.

예시를 보여드릴게요:

// 일방적으로 데이터를 제공하는 컴포넌트
function DataProvider() {
    const staticData = {
        title: "고정된 제목",
        items: ["항목1", "항목2", "항목3"]
    };

    return (
        <DataContext.Provider value={staticData}>
            {/* 여기서는 외부에서 데이터를 받지 않고 내부에서 정의된 값만 사용 */}
            <div>
                <h1>{staticData.title}</h1>
                <ul>
                    {staticData.items.map(item => (
                        <li key={item}>{item}</li>
                    ))}
                </ul>
            </div>
        </DataContext.Provider>
    );
}

실제 사용 사례들:

1. 테마 제공자:

   function ThemeProvider() {
    const theme = {
        primary: '#007bff',
        secondary: '#6c757d',
        success: '#28a745'
    };
   
    return (
        <ThemeContext.Provider value={theme}>
            {children}
        </ThemeContext.Provider>
    );
   }

2. 설정 제공자:

   function ConfigProvider() {
    const config = {
        apiUrl: 'https://api.example.com',
        language: 'ko',
        version: '1.0.0'
    };
   
    return (
        <ConfigContext.Provider value={config}>
            {children}
        </ConfigContext.Provider>
    );
   }

하지만 보통은:

• 유연성을 위해 props를 받는 형태를 선호
• 테스트하기 더 쉬움
• 재사용성이 높음

그래서 실무에서는 props를 받는 형태가 더 일반적입니다!