atomicdev 님의 블로그

슬라이딩테크 부착형 도어 클로저 출시 예정

atomicdev — Sat, 15 Feb 2025 08:22:36 +0900

슬라이딩테크, 부착형 도어 클로저 출시 예정… 안전·편의성 강화

스마트 도어 솔루션 전문기업 **슬라이딩테크(Sliding Tech)**가 신개념 부착형 도어 클로저를 출시할 예정이라고 밝혔다. 이번 신제품은 무전원 반자동 방식을 적용해 에너지 절감과 사용자 안전성을 강화한 것이 특징이다.

◇ 기존 제품 대비 설치 편의성 및 유지보수 효율 극대화

슬라이딩테크의 부착형 도어 클로저는 기존 일체형 제품과 달리 기존 미닫이문에 간단히 부착하는 방식으로, 별도의 전기 배선이나 복잡한 설치 과정 없이 누구나 손쉽게 장착할 수 있다. 특히, 유압 댐퍼 기술을 적용해 문이 부드럽게 닫히며, 끼임 사고를 방지하는 기능이 포함돼 어린이, 노약자, 반려동물이 있는 공간에서도 안전하게 사용할 수 있다.

또한, 기존 일체형 제품과 비교해 유지보수 시 고장난 부품만 교체할 수 있어 비용 절감 효과도 기대된다.

◇ 무전동 반자동 기술 적용… 에너지 절감 및 친환경성 강화

슬라이딩테크는 전력 없이 자동 개폐가 가능한 반자동 시스템을 적용해, 정전 시에도 정상 작동할 수 있도록 설계했다. 이는 전력 소모를 줄여 냉난방비 절감 및 친환경적인 운영이 가능하다는 점에서 공공기관, 학교, 병원 등에서 큰 관심을 받고 있다.

슬라이딩테크 관계자는 **“기존 자동문 대비 경제적이면서도 안전한 솔루션을 제공하는 것이 목표”**라며, **“부착형 도어 클로저는 설치가 간편해 기존 도어를 쉽게 업그레이드할 수 있는 최적의 선택”**이라고 강조했다.

이번 제품은 현재 특허 출원을 완료했으며, 정식 출시는 오는 하반기로 예정되어 있다. 기업 및 공공기관을 대상으로 한 사전 테스트도 진행 중이다.

도어클로저 패키지

◇ 시장 전망과 기대 효과

도어 하드웨어 및 인테리어 시장이 지속 성장하는 가운데, 반자동 도어 클로저의 수요도 꾸준히 증가하고 있다. 슬라이딩테크의 신제품은 기존 자동문과 수동문 사이의 틈새 시장을 공략하며, 특히 공간 활용과 유지보수 편의성을 중시하는 건축·인테리어 시장에서 높은 경쟁력을 가질 것으로 기대된다.

한편, 슬라이딩테크는 신제품 출시와 함께 국내외 시장 진출을 확대하고, 공공기관 및 기업과의 협업을 통해 보급 확대에 나설 계획이다.

출시 예정일: 2025년 하반기
문의: 슬라이딩테크 공식 홈페이지 또는 고객센터

https://slatech.co.kr/boards/14/view?referer=%2Fpages%2Fnews

18.Flux 아키텍처 완벽 이해: React 애플리케이션 상태 관리의 기초

코딩쉐프 — Mon, 9 Dec 2024 20:13:48 +0900

"Flux 아키텍처 완벽 이해: React 애플리케이션 상태 관리의 기초"

1시간 분량 강의안 (Flux 기초)

강의 목표

Flux 아키텍처의 개념과 필요성을 이해한다.
Flux의 주요 구성 요소(스토어, 디스패처, 액션, 뷰)를 학습한다.
Flux를 활용하여 React 애플리케이션의 상태 관리를 구현한다.

강의 목차

1. Flux란 무엇인가? (10분)

Flux의 정의

Flux는 Facebook에서 제안한 React 애플리케이션을 위한 아키텍처 패턴으로, 단방향 데이터 흐름을 기반으로 설계되었습니다.

Flux의 주요 특징

단방향 데이터 흐름: 데이터가 항상 한 방향으로 흐르며, 상태 관리가 예측 가능.
컴포넌트 간 독립성: 컴포넌트가 상태 대신 데이터를 받기 때문에 독립적이고 재사용 가능.
중앙 집중식 상태 관리: 상태가 중앙 저장소(Store)에 관리되어 상태 변경 추적이 용이.

Flux의 구성 요소

Action: 상태 변경을 요청하는 명령.
Dispatcher: Action을 Store로 전달하는 중앙 허브.
Store: 상태와 로직을 관리하는 컨테이너.
View: Store의 데이터를 기반으로 UI를 렌더링.

2. Flux의 데이터 흐름 (10분)

Flux 데이터 흐름

Action: 이벤트 발생 시 액션을 생성.
Dispatcher: 액션을 Store에 전달.
Store: 액션을 처리하고 상태를 업데이트.
View: 상태 변경을 감지하여 UI를 업데이트.

Flux와 MVC의 차이점

특징FluxMVC

데이터 흐름	단방향 데이터 흐름	양방향 데이터 흐름
상태 관리	Store에서 중앙 관리	여러 Model에서 분산 관리
복잡도	단순하고 예측 가능	복잡하고 의존성 증가

3. Flux의 주요 구성 요소 구현 (20분)

1단계: Action 생성

액션은 상태 변경 요청을 나타내는 객체.

const Actions = {
  increment: () => {
    Dispatcher.dispatch({
      type: 'INCREMENT',
    });
  },
  decrement: () => {
    Dispatcher.dispatch({
      type: 'DECREMENT',
    });
  },
};

2단계: Dispatcher 설정

Dispatcher는 액션을 Store로 전달하는 역할.

import { Dispatcher } from 'flux';

const AppDispatcher = new Dispatcher();
export default AppDispatcher;

3단계: Store 생성

Store는 상태를 관리하고 변경 사항을 View에 알림.

import { EventEmitter } from 'events';
import AppDispatcher from './AppDispatcher';

const Store = Object.assign({}, EventEmitter.prototype, {
  count: 0,

  getCount() {
    return this.count;
  },

  handleAction(action) {
    switch (action.type) {
      case 'INCREMENT':
        this.count++;
        this.emit('change');
        break;
      case 'DECREMENT':
        this.count--;
        this.emit('change');
        break;
      default:
        break;
    }
  },
});

AppDispatcher.register(Store.handleAction.bind(Store));
export default Store;

4단계: View에서 Store 사용

View는 Store 데이터를 구독하고 변경 시 UI를 업데이트.

import React, { useState, useEffect } from 'react';
import Store from './Store';
import Actions from './Actions';

function Counter() {
  const [count, setCount] = useState(Store.getCount());

  useEffect(() => {
    const handleChange = () => setCount(Store.getCount());
    Store.on('change', handleChange);

    return () => {
      Store.removeListener('change', handleChange);
    };
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={Actions.increment}>Increment</button>
      <button onClick={Actions.decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

4. Flux 활용 사례 및 비교 (10분)

Flux 활용 사례

Flux는 단방향 데이터 흐름이 필요한 대규모 애플리케이션에서 주로 사용됩니다.
Redux와 MobX의 설계 철학에 영향을 미친 패턴입니다.

Flux와 Redux 비교

특징FluxRedux

Dispatcher 사용 여부	사용	사용하지 않음
Store	여러 Store	단일 Store
데이터 흐름	단방향 데이터 흐름	단방향 데이터 흐름
Boilerplate 코드	상대적으로 많음	상대적으로 간결함

5. 실습 과제 (10분)

실습 과제

Flux 패턴을 사용하여 Todo 애플리케이션을 구현하세요.
Todo 항목을 추가, 완료 표시, 삭제하는 액션과 Store를 작성하세요.
변경 사항을 View에서 반영하세요.

예제

액션 예제:

const Actions = {
  addTodo: (text) => {
    Dispatcher.dispatch({
      type: 'ADD_TODO',
      text,
    });
  },
};

Store 예제:

const Store = Object.assign({}, EventEmitter.prototype, {
  todos: [],

  handleAction(action) {
    switch (action.type) {
      case 'ADD_TODO':
        this.todos.push({ text: action.text, completed: false });
        this.emit('change');
        break;
      default:
        break;
    }
  },
});

6. Q&A 및 정리 (10분)

Q&A:
1. Flux와 Redux의 주요 차이점은 무엇인가요?
2. Flux는 어떤 규모의 애플리케이션에서 적합한가요?
요약:
- Flux는 React 애플리케이션에서 단방향 데이터 흐름을 관리하기 위한 강력한 패턴입니다.
- Action, Dispatcher, Store, View의 구성 요소를 이해하고 활용하면 상태 관리를 효율적으로 구현할 수 있습니다.
- Redux와 같은 현대적인 상태 관리 도구의 기초가 되는 개념입니다.

17.React Context API로 상태 관리하기: Props Drilling 없이 데이터 공유

코딩쉐프 — Mon, 9 Dec 2024 20:11:57 +0900

"React Context API로 상태 관리하기: Props Drilling 없이 데이터 공유"

1시간 분량 강의안 (Context API 상태 관리)

강의 목표

React Context API를 상태 관리 목적으로 사용하는 방법을 이해한다.
Props Drilling 문제를 해결하는 Context API의 기본 개념을 학습한다.
Context API를 사용하여 전역 상태 관리와 컴포넌트 간 데이터 공유를 구현한다.

강의 목차

1. Context API란 무엇인가? (10분)

Context API의 정의

React Context API는 컴포넌트 계층 구조를 통해 데이터를 전달할 때 Props Drilling 문제를 해결하기 위한 전역 상태 관리 도구입니다.

Context API의 주요 구성 요소

Context: 전역 상태를 관리하는 객체를 생성.
Provider: 데이터를 하위 컴포넌트에 전달.
Consumer: 데이터를 소비하는 컴포넌트.

Context API의 동작 방식

Provider에서 데이터를 제공하고, 하위 컴포넌트에서 Consumer 또는 useContext Hook으로 데이터를 소비.

Context API의 장점

Props Drilling 없이 컴포넌트 간 데이터를 공유.
React의 내장 기능으로 추가 설치 불필요.

2. Context API를 사용한 상태 관리 설정 (15분)

1단계: Context 생성

Context를 생성하여 데이터 관리.

import { createContext } from 'react';

const CounterContext = createContext();
export default CounterContext;

2단계: Provider로 상태 관리

Provider 컴포넌트를 사용해 상태와 업데이트 함수를 공유.

import React, { useState } from 'react';
import CounterContext from './CounterContext';

function CounterProvider({ children }) {
  const [count, setCount] = useState(0);

  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);

  return (
    <CounterContext.Provider value={{ count, increment, decrement }}>
      {children}
    </CounterContext.Provider>
  );
}

export default CounterProvider;

3단계: Provider로 감싸기

최상위 컴포넌트를 Provider로 감싸 데이터 공유.

import React from 'react';
import CounterProvider from './CounterProvider';
import App from './App';

function Root() {
  return (
    <CounterProvider>
      <App />
    </CounterProvider>
  );
}

export default Root;

3. Context 데이터 소비하기 (15분)

1단계: useContext Hook 사용

useContext로 데이터를 직접 소비.

import React, { useContext } from 'react';
import CounterContext from './CounterContext';

function Counter() {
  const { count, increment, decrement } = useContext(CounterContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

2단계: Consumer 사용

Consumer를 사용하여 데이터 소비(구식 방식).

import React from 'react';
import CounterContext from './CounterContext';

function Counter() {
  return (
    <CounterContext.Consumer>
      {({ count, increment, decrement }) => (
        <div>
          <p>Count: {count}</p>
          <button onClick={increment}>Increment</button>
          <button onClick={decrement}>Decrement</button>
        </div>
      )}
    </CounterContext.Consumer>
  );
}

export default Counter;

4. Context API로 상태 관리 구현 (15분)

1단계: 다중 Context 관리

여러 Context를 조합하여 사용.

const ThemeContext = createContext();
const CounterContext = createContext();

function App() {
  return (
    <ThemeContext.Provider value={{ theme: 'dark' }}>
      <CounterContext.Provider value={{ count: 10 }}>
        <ChildComponent />
      </CounterContext.Provider>
    </ThemeContext.Provider>
  );
}

2단계: 중첩된 Context 소비

여러 Context를 동시에 소비.

function ChildComponent() {
  const { theme } = useContext(ThemeContext);
  const { count } = useContext(CounterContext);

  return (
    <div style={{ color: theme === 'dark' ? 'white' : 'black' }}>
      Count: {count}
    </div>
  );
}

5. 실습 과제 (10분)

실습 과제

Context API를 사용하여 사용자 이름과 나이를 관리하고 화면에 표시하세요.
테마(Context)를 추가하여 배경색을 변경할 수 있는 버튼을 구현하세요.

예제

function ThemeToggler() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      현재 테마: {theme === 'dark' ? '다크' : '라이트'}
    </button>
  );
}

6. Q&A 및 정리 (10분)

Q&A:
1. Context API와 Redux의 차이점은 무엇인가요?
2. Context API는 어떤 규모의 애플리케이션에 적합한가요?
요약:
- Context API는 Props Drilling 문제를 해결하며, 간단한 전역 상태 관리에 유용합니다.
- Provider로 상태를 제공하고, useContext로 데이터를 소비합니다.
- Redux와 달리 복잡한 상태 관리는 적합하지 않을 수 있습니다.

16.Jotai로 배우는 React 상태 관리: 최소화된 경량 상태 관리 솔루션

코딩쉐프 — Tue, 3 Dec 2024 00:00:44 +0900

"Jotai로 배우는 React 상태 관리: 최소화된 경량 상태 관리 솔루션"

1시간 분량 강의안 (Jotai 기초)

강의 목표

Jotai의 개념과 필요성을 이해한다.
Jotai의 주요 기능(Atoms, Selectors)을 학습한다.
Jotai를 활용하여 React 애플리케이션에서 효율적으로 상태를 관리하는 방법을 익힌다.

강의 목차

1. Jotai란 무엇인가? (10분)

Jotai의 정의

Jotai는 React를 위한 최소화된 상태 관리 라이브러리로, 상태를 단일 객체 대신 여러 Atom으로 분리하여 관리할 수 있습니다.
"Jotai"는 일본어로 "원자(atom)"를 의미하며, Atomic 상태 관리를 목표로 합니다.

Jotai의 주요 특징

간결한 API: 상태 정의와 사용이 간단.
Atomic 상태 관리: 필요한 상태만 구독하여 성능 최적화.
React 친화적: React의 useState와 유사한 방식으로 상태 관리.
모듈화: 상태를 독립적으로 관리하고 재사용 가능.

Jotai의 주요 구성 요소

Atom: 상태의 최소 단위.
Derived Atom: 기존 Atom의 값을 기반으로 생성된 파생 상태.

2. Jotai 설치 및 기본 설정 (10분)

1단계: Jotai 설치

Jotai 설치:

npm install jotai

2단계: 기본 Atom 생성

상태를 정의하는 Atom 작성:

import { atom } from 'jotai';

export const countAtom = atom(0); // 초기값 0

3. Jotai 주요 개념 및 구현 (20분)

1단계: Atom 사용

React 컴포넌트에서 Atom의 상태를 가져와 사용:

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from './atoms';

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

export default Counter;

2단계: Derived Atom 생성

기존 Atom을 기반으로 파생 상태 생성:

import { atom } from 'jotai';
import { countAtom } from './atoms';

export const doubleCountAtom = atom((get) => get(countAtom) * 2);

3단계: Derived Atom 사용

React 컴포넌트에서 Derived Atom 값 사용:

import React from 'react';
import { useAtom } from 'jotai';
import { doubleCountAtom } from './atoms';

const DoubleCounter = () => {
  const [doubleCount] = useAtom(doubleCountAtom);

  return <p>Double Count: {doubleCount}</p>;
};

export default DoubleCounter;

4단계: 비동기 Atom 생성

비동기 데이터를 관리하는 Atom:

import { atom } from 'jotai';

export const asyncDataAtom = atom(async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  return response.json();
});

4. 고급 Jotai 기능 (10분)

1단계: Atom의 상태 조작

Atom의 상태를 직접 설정하는 함수 작성:

const incrementAtom = atom(
  (get) => get(countAtom),
  (get, set) => set(countAtom, get(countAtom) + 1)
);

2단계: Atom Family

비슷한 역할을 가진 여러 Atom을 동적으로 생성:

import { atomFamily } from 'jotai/utils';

const itemAtomFamily = atomFamily((id) => atom({ id, value: 0 }));

3단계: Jotai Devtools

상태 디버깅을 위한 Devtools 설치:
```
npm install jotai-devtools
```
사용:

import { useAtomsDebugValue } from 'jotai-devtools';

function DebugComponent() {
  useAtomsDebugValue();
  return null;
}

5. 실습 과제 (10분)

실습 과제

Jotai를 사용하여 카운터 애플리케이션을 구현하세요.
Derived Atom을 사용하여 카운터 값을 두 배로 계산하여 화면에 표시하세요.
비동기 Atom을 생성하여 API 데이터를 화면에 표시하세요.

예제

비동기 데이터 컴포넌트:

import React from 'react';
import { useAtom } from 'jotai';
import { asyncDataAtom } from './atoms';

const AsyncData = () => {
  const [data] = useAtom(asyncDataAtom);

  if (!data) return <p>Loading...</p>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
};

export default AsyncData;

6. Q&A 및 정리 (10분)

Q&A:
1. Jotai는 어떤 상황에서 적합한 상태 관리 도구인가요?
2. Jotai와 Zustand의 차이점은 무엇인가요?
요약:
- Jotai는 최소화된 상태 관리 라이브러리로, 간단한 API를 통해 효율적으로 상태를 관리할 수 있습니다.
- Atom과 Derived Atom을 사용해 상태와 파생 데이터를 관리합니다.
- React와 자연스럽게 통합되며, 비동기 데이터를 쉽게 관리할 수 있습니다.

15.React Query로 서버 상태 관리하기: 효율적인 데이터 페칭과 캐싱

코딩쉐프 — Mon, 2 Dec 2024 23:54:06 +0900

"React Query로 서버 상태 관리하기: 효율적인 데이터 페칭과 캐싱"

1시간 분량 강의안 (React Query 기초)

강의 목표

React Query의 개념과 필요성을 이해한다.
React Query의 주요 기능(데이터 페칭, 캐싱, 뮤테이션)을 학습한다.
React Query를 활용한 서버 상태 관리 방법을 실습한다.

강의 목차

1. React Query란 무엇인가? (10분)

React Query의 정의

React Query는 React 애플리케이션에서 서버 상태를 관리하고 데이터 페칭과 캐싱을 간단하게 만들어주는 라이브러리입니다.

React Query의 주요 특징

데이터 동기화: 클라이언트와 서버 간의 데이터를 동기화.
자동 캐싱: 데이터가 변경되지 않으면 캐시된 데이터를 사용하여 네트워크 요청 감소.
리트라이와 리페치: 실패한 요청을 자동으로 재시도하거나, 데이터가 오래된 경우 자동으로 새로고침.
개발자 도구: 상태 디버깅을 위한 React Query Devtools 제공.

React Query의 주요 구성 요소

Query: 데이터를 가져오는 작업.
Mutation: 데이터를 생성, 수정, 삭제하는 작업.
Query Client: React Query의 중앙 관리 객체.

2. React Query 설치 및 기본 설정 (10분)

1단계: React Query 설치

npm install @tanstack/react-query

2단계: Query Client 설정

애플리케이션의 최상위 컴포넌트에 Query Client를 설정합니다.

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

const queryClient = new QueryClient();

function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

export default Root;

3. React Query 주요 기능 및 구현 (20분)

1단계: 데이터 페칭(Query)

서버에서 데이터를 가져오는 기본 예제:

import React from 'react';
import { useQuery } from '@tanstack/react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts').then((res) =>
    res.json()
  );
}

function Posts() {
  // 수정된 useQuery 형태 (단일 객체 사용)
  const { data, isLoading, isError } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  });

  if (isLoading) return <p>Loading...</p>;
  if (isError) return <p>Error fetching data.</p>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

export default Posts;

App.js

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import Posts from './Posts'; // default export 확인

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div>
        <h1>React Query Example - Posts</h1>
        <Posts />
      </div>
    </QueryClientProvider>
  );
}

export default App;

2단계: 데이터 뮤테이션(Mutation)

데이터를 생성, 수정, 삭제하는 작업:

//CreatePost.js
import React from 'react';
import { useMutation } from '@tanstack/react-query';

function createPost(newPost) {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newPost),
  }).then((res) => res.json());
}

function CreatePost() {
  // 수정된 useMutation 형태 (단일 객체 사용)
  const mutation = useMutation({
    mutationFn: createPost,
  });

  const handleCreate = () => {
    mutation.mutate({ title: 'New Post', body: 'This is a new post.' });
  };

  return (
    <div>
      <button onClick={handleCreate}>Create Post</button>
      {mutation.isLoading && <p>Creating post...</p>}
      {mutation.isSuccess && <p>Post created!</p>}
      {mutation.isError && <p>Error creating post!</p>}
    </div>
  );
}

export default CreatePost;

3단계: 캐싱 및 리페치

캐싱된 데이터를 사용하는 경우:

const { data } = useQuery(['posts'], fetchPosts, {
  staleTime: 5000, // 데이터가 5초 동안 신선한 상태로 유지
});

4. React Query Devtools 사용 (5분)

설치

npm install @tanstack/react-query-devtools

사용

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

5. 실습 과제 (10분)

실습 과제

서버에서 데이터를 페칭하여 화면에 표시하세요.
데이터를 생성하거나 수정하는 버튼을 구현하세요.
React Query Devtools를 사용하여 상태를 확인하세요.

6. Q&A 및 정리 (10분)

Q&A:
1. React Query와 Redux의 차이점은 무엇인가요?
2. React Query는 어떤 상황에서 적합한 상태 관리 도구인가요?
요약:
- React Query는 서버 상태를 간단하게 관리하고, 데이터 페칭 및 캐싱을 효율적으로 처리할 수 있습니다.
- Query와 Mutation을 활용하여 다양한 서버 작업을 처리할 수 있습니다.
- React Query Devtools로 상태를 시각적으로 디버깅할 수 있습니다.

14.Zustand로 배우는 경량 상태 관리: 간단하고 빠른 React 상태 관리 솔루션

코딩쉐프 — Mon, 2 Dec 2024 23:49:36 +0900

"Zustand로 배우는 경량 상태 관리: 간단하고 빠른 React 상태 관리 솔루션"

1시간 분량 강의안 (Zustand 기초)

강의 목표

Zustand의 개념과 장점을 이해한다.
Zustand의 주요 기능(상태 생성, 업데이트, 구독)을 학습한다.
Zustand를 활용하여 React 애플리케이션에서 상태를 관리하는 방법을 익힌다.

강의 목차

1. Zustand란 무엇인가? (10분)

Zustand의 정의

Zustand는 React 애플리케이션에서 사용되는 간단하고 경량화된 상태 관리 라이브러리입니다.
독일어로 "상태"라는 뜻이며, 직관적이고 선언적인 상태 관리를 제공합니다.

Zustand의 주요 특징

간결한 API: 상태 생성과 사용이 간단.
퍼포먼스 최적화: 필요한 컴포넌트만 렌더링.
React와 독립적: React 외부에서도 사용 가능.
미들웨어 확장: 로깅, 지속성, Devtools와 같은 기능 확장 지원.

Zustand의 주요 구성 요소

Store: 상태를 정의하고 관리하는 중앙 저장소.
Actions: 상태를 변경하는 함수.
Selectors: 필요한 상태만 선택적으로 구독.

2. Zustand 설치 및 기본 설정 (10분)

1단계: Zustand 설치

Zustand 설치:

npm install zustand

2단계: 기본 Store 생성

상태를 정의하는 Store 작성:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;

3. Zustand 주요 개념 및 구현 (20분)

1단계: 상태 사용

React 컴포넌트에서 Store의 상태와 함수를 가져와 사용:

import React from 'react';
import useStore from './store';

const Counter = () => {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

2단계: Selectors 활용

필요한 상태만 구독하여 렌더링 최적화:

const count = useStore((state) => state.count);

3단계: 상태 초기화

Store 상태를 초기화하는 함수 추가:

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));

4. 고급 Zustand 기능 (10분)

1단계: 미들웨어 추가

상태를 로컬 스토리지에 저장:

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    { name: 'counter-storage' }
  )
);

export default useStore;

2단계: Zustand Devtools

상태 디버깅을 위한 Devtools 통합:

import create from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }))
);

export default useStore;

5. 실습 과제 (10분)

실습 과제

Zustand를 사용하여 카운터 애플리케이션을 구현하세요.
카운터 값이 10 이상일 때 "최대 값 도달" 메시지를 표시하세요.
Zustand Devtools와 로컬 스토리지 저장 기능을 추가하세요.

예제

카운터 상태 확인 컴포넌트:

import React from 'react';
import useStore from './store';

const CounterInfo = () => {
  const count = useStore((state) => state.count);

  return <p>{count >= 10 ? '최대 값 도달' : `Count: ${count}`}</p>;
};

export default CounterInfo;

6. Q&A 및 정리 (10분)

Q&A:
1. Zustand와 Redux의 차이점은 무엇인가요?
2. Zustand는 어떤 상황에서 적합한 상태 관리 도구인가요?
요약:
- Zustand는 React와 독립적으로 작동하는 간단하고 경량화된 상태 관리 라이브러리입니다.
- 상태 정의, 업데이트, 구독이 간단하며, Selectors를 사용해 성능을 최적화할 수 있습니다.
- 미들웨어 확장을 통해 로컬 스토리지 저장 및 Devtools 디버깅이 가능합니다.

13.Recoil로 배우는 React 상태 관리: 간단하고 강력한 최신 상태 관리 라이브러리

코딩쉐프 — Mon, 2 Dec 2024 23:44:46 +0900

"Recoil로 배우는 React 상태 관리: 간단하고 강력한 최신 상태 관리 라이브러리"

1시간 분량 강의안 (Recoil 기초)

강의 목표

Recoil의 개념과 필요성을 이해한다.
Recoil의 주요 구성 요소(Atoms, Selectors, RecoilRoot)를 학습한다.
Recoil을 활용하여 React 애플리케이션에서 상태를 관리하는 방법을 익힌다.

강의 목차

1. Recoil이란 무엇인가? (10분)

Recoil의 정의

Recoil은 React를 위한 친화적인 상태 관리 라이브러리로, 상태를 관리하고 컴포넌트 간의 상태 공유를 간단하게 만듭니다.
Facebook에서 개발되었으며, React의 특성을 최대한 활용하도록 설계되었습니다.

Recoil의 주요 특징

React 친화적: React의 상태 관리 방식과 자연스럽게 통합.
정확한 상태 구독: 상태가 필요한 컴포넌트만 다시 렌더링.
비동기 상태 관리: Selectors를 활용하여 비동기 데이터 로드 처리.

Recoil의 주요 구성 요소

Atom: 상태의 최소 단위로, 상태를 저장하고 공유.
Selector: Atom을 기반으로 파생된 데이터를 생성.
RecoilRoot: Recoil 상태를 사용할 수 있는 컨텍스트를 제공.

2. Recoil 설치 및 기본 설정 (10분)

1단계: Recoil 설치

Recoil 설치:
```
npm install recoil
```

2단계: RecoilRoot 설정

Recoil 상태를 애플리케이션에서 사용하려면 RecoilRoot로 감싸야 합니다.

import React from 'react';
import { RecoilRoot } from 'recoil';
import App from './App';

const Root = () => (
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

export default Root;

3. Recoil 주요 개념 및 구현 (20분)

1단계: Atom 생성

Atom은 상태의 최소 단위로, React 컴포넌트에서 공유 가능.

import { atom } from 'recoil';

export const counterState = atom({
  key: 'counterState', // Atom의 고유 ID
  default: 0,         // 초기 상태 값
});

2단계: Atom 사용

React 컴포넌트에서 Atom을 사용하려면 useRecoilState를 활용.

import React from 'react';
import { useRecoilState } from 'recoil';
import { counterState } from './atoms';

const Counter = () => {
  const [count, setCount] = useRecoilState(counterState);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
};

export default Counter;

3단계: Selector 사용

Selectors를 통해 Atom을 기반으로 파생된 데이터를 생성.

import { selector } from 'recoil';
import { counterState } from './atoms';

export const doubleCounterState = selector({
  key: 'doubleCounterState',
  get: ({ get }) => {
    const count = get(counterState);
    return count * 2;
  },
});

4단계: Selector 값 사용

React 컴포넌트에서 Selector 값을 읽기.

import React from 'react';
import { useRecoilValue } from 'recoil';
import { doubleCounterState } from './selectors';

const DoubleCounter = () => {
  const doubleCount = useRecoilValue(doubleCounterState);

  return <p>Double Count: {doubleCount}</p>;
};

export default DoubleCounter;

4. 고급 Recoil 기능 (10분)

1단계: 비동기 Selector

서버에서 데이터를 로드하여 상태로 사용.

import { selector } from 'recoil';

export const asyncData = selector({
  key: 'asyncData',
  get: async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    return data;
  },
});

2단계: Atom Effects

Atom에 추가적인 효과(예: 로컬 스토리지 저장) 적용.

import { atom } from 'recoil';

export const localStorageState = atom({
  key: 'localStorageState',
  default: 0,
  effects: [
    ({ setSelf, onSet }) => {
      const savedValue = localStorage.getItem('state');
      if (savedValue != null) {
        setSelf(JSON.parse(savedValue));
      }

      onSet((newValue) => {
        localStorage.setItem('state', JSON.stringify(newValue));
      });
    },
  ],
});

5. 실습 과제 (10분)

실습 과제

Recoil을 사용하여 카운터 애플리케이션을 구현하세요.
카운터 값을 Selector로 두 배로 계산하여 화면에 표시하세요.
비동기 데이터를 로드하여 화면에 표시하세요.

예제

비동기 데이터 컴포넌트:

import React from 'react';
import { useRecoilValue } from 'recoil';
import { asyncData } from './selectors';

const AsyncComponent = () => {
  const data = useRecoilValue(asyncData);

  return (
    <div>
      <h1>Async Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default AsyncComponent;

6. Q&A 및 정리 (10분)

Q&A:
1. Recoil은 Redux와 비교했을 때 어떤 점에서 더 간단한가요?
2. Recoil을 사용하면 Context API는 필요 없나요?
요약:
- Recoil은 React 애플리케이션에서 상태 관리가 필요한 경우 간단하고 직관적인 해결책을 제공합니다.
- Atom과 Selector를 통해 상태와 파생 데이터를 쉽게 관리할 수 있습니다.
- RecoilRoot로 상태 관리의 범위를 지정하고, React Hooks로 상태를 간단히 사용할 수 있습니다.

React 함수와 JavaScript 함수의 차이

atomicdev — Mon, 2 Dec 2024 08:52:01 +0900

React 함수와 JavaScript 함수는 근본적으로 JavaScript에서 실행되는 코드이지만, React에서 사용하는 함수는 React의 특정 개념이나 기능에 초점을 맞춥니다. 아래는 React 함수와 JavaScript 함수의 차이점과 용도에 대한 설명입니다.

1. JavaScript 함수

JavaScript 함수는 코드의 재사용성을 높이고 특정 작업을 수행하기 위해 정의된 일반적인 함수입니다. React와 관계없이 순수하게 JavaScript 언어 자체에서 사용하는 함수입니다.

특징:

목적: 특정 작업을 수행하거나 값을 반환.
종류: 일반 함수, 화살표 함수, 익명 함수 등.
호출 방법: 직접 호출하거나 이벤트에 의해 호출.

유형

일반 함수:

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 5

화살표 함수:

const multiply = (a, b) => a * b;
console.log(multiply(2, 3)); // 6

사용 예:

데이터를 계산하거나 처리할 때.
이벤트 핸들러를 정의할 때.
모듈화된 로직을 구현할 때.

2. React 함수

React에서 사용하는 함수는 컴포넌트 함수 또는 Hooks가 포함됩니다. React는 JavaScript의 라이브러리이므로 React 함수도 JavaScript 함수지만, React 애플리케이션을 구성하기 위해 특별한 규칙과 사용 목적이 있습니다.

(1) React 컴포넌트 함수

React에서는 컴포넌트를 정의할 때 함수형 컴포넌트를 사용할 수 있습니다. 이는 UI를 렌더링하기 위한 함수입니다.

특징:

React의 상태와 생명주기를 다룰 수 있음.
JSX를 반환하여 UI를 정의.
반드시 첫 글자를 대문자로 작성해야 함.

예:

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

// 사용
<Greeting name="Alice" />

(2) React Hook 함수

React Hook은 React 16.8 이후 추가된 기능으로, 함수형 컴포넌트에서 상태와 생명주기를 사용할 수 있도록 도와주는 특수 함수입니다.

주요 Hook:

useState: 상태 관리

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>
  );
}

useEffect: 사이드 이펙트 관리

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log('Component mounted or updated');
    return () => {
      console.log('Component unmounted');
    };
  });

  return <div>Check the console</div>;
}

커스텀 Hook: 로직을 재사용하기 위해 사용자 정의 가능

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

3. React 함수와 JavaScript 함수의 주요 차이점

항목	JavaScript 함수	React 함수
목적	일반적인 작업 수행	UI 렌더링 및 React 상태/생명주기 관리
리턴값	어떤 값이든 반환 가능 (문자열, 숫자, 객체 등)	JSX 또는 null
호출 방식	직접 호출	React에서 렌더링 중 호출 (컴포넌트 함수)
특수 기능	없음	Hook을 통해 상태와 생명주기 관리 가능
사용 규칙	제한 없음	컴포넌트 이름은 대문자로 시작, Hook은 특정 규칙 준수 (use로 시작)

결론

JavaScript 함수는 범용적이며 React 외부에서도 사용 가능한 일반적인 함수입니다.
React 함수는 React 애플리케이션 내에서 상태 관리, 생명주기 처리, UI 렌더링 등 React와 밀접하게 연관된 작업을 수행하기 위해 사용됩니다.

12.MobX로 배우는 간단한 상태 관리: 직관적이고 강력한 React 상태 관리 도구

코딩쉐프 — Wed, 27 Nov 2024 15:47:25 +0900

"MobX로 배우는 간단한 상태 관리: 직관적이고 강력한 React 상태 관리 도구"

1시간 분량 강의안 (MobX 기초)

강의 목표

MobX의 개념과 장점을 이해한다.
MobX의 주요 개념(Observable, Action, Computed, Observer)을 학습한다.
MobX를 활용하여 React 애플리케이션에서 상태를 관리하는 방법을 익힌다.

강의 목차

1. MobX란 무엇인가? (10분)

MobX의 정의

MobX는 간단하고 직관적인 상태 관리 라이브러리입니다.
React 애플리케이션에서 상태를 관리하고 UI를 자동으로 업데이트합니다.

MobX의 주요 특징

반응성(Reactivity): 상태가 변경되면 자동으로 관련된 UI를 업데이트.
직관적 API: 상태를 관리하는 방법이 간단하며 코드가 읽기 쉽다.
유연성: Redux와 달리 불변성을 강제하지 않아 상태를 자유롭게 수정 가능.

MobX의 주요 구성 요소

Observable: 상태를 반응형 데이터로 정의.
Action: 상태를 변경하는 함수.
Computed: 상태에서 파생된 값을 생성.
Observer: 상태 변경을 감지하여 UI를 업데이트하는 React 컴포넌트.

2. MobX 설치 및 기본 설정 (10분)

1단계: MobX 설치

MobX와 React 통합 패키지 설치:

npm install mobx mobx-react-lite

2단계: 프로젝트 구조

기본 폴더 구조:

src/
├── stores/
│   └── counterStore.js
├── components/
│   └── Counter.js
└── App.js

3. MobX 주요 개념 및 구현 (20분)

1단계: Observable

상태를 관찰 가능한 데이터로 정의:

import { makeAutoObservable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeAutoObservable(this); // 상태를 자동으로 관찰 가능하도록 설정
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

const counterStore = new CounterStore();
export default counterStore;

2단계: Observer

React 컴포넌트를 상태 변경에 반응하도록 설정:

import React from 'react';
import { observer } from 'mobx-react-lite';
import counterStore from '../stores/counterStore';

const Counter = observer(() => {
  return (
    <div>
      <p>Count: {counterStore.count}</p>
      <button onClick={() => counterStore.increment()}>Increment</button>
      <button onClick={() => counterStore.decrement()}>Decrement</button>
    </div>
  );
});

export default Counter;

3단계: App 컴포넌트에서 사용

import React from 'react';
import Counter from './components/Counter';

function App() {
  return (
    <div>
      <h1>MobX Counter</h1>
      <Counter />
    </div>
  );
}

export default App;

4. 고급 MobX 기능 (10분)

1단계: Computed

상태에서 파생된 값을 생성:

get isPositive() {
  return this.count > 0;
}

React 컴포넌트에서 사용:

<p>{counterStore.isPositive ? "Positive" : "Negative or Zero"}</p>

2단계: Action

상태를 변경하는 메서드에 Action을 명시적으로 추가:

import { action, makeObservable, observable } from 'mobx';

class CounterStore {
  count = 0;

  constructor() {
    makeObservable(this, {
      count: observable,
      increment: action,
      decrement: action,
    });
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

5. 실습 과제 (10분)

실습 과제

MobX를 사용하여 카운터 애플리케이션을 구현하세요.
버튼 클릭으로 숫자를 증가/감소하고, 숫자가 0보다 작아지지 않도록 제한하세요.
isPositive를 Computed로 구현하여 상태가 양수인지 여부를 화면에 표시하세요.

예제

decrement() {
  if (this.count > 0) {
    this.count--;
  }
}

6. Q&A 및 정리 (10분)

Q&A:
1. MobX와 Redux의 차이점은 무엇인가요?
2. 작은 프로젝트에서 MobX는 적합한 선택인가요?
요약:
- MobX는 React 애플리케이션에서 간단하고 직관적인 상태 관리를 제공합니다.
- Observable, Action, Computed, Observer는 MobX의 핵심 개념입니다.
- MobX는 상태를 효율적으로 관리하며, 작은 프로젝트에서 특히 유용합니다.

11.Redux 완전 정복: 중앙 집중식 상태 관리의 기본

코딩쉐프 — Wed, 27 Nov 2024 15:37:59 +0900

"Redux 완전 정복: 중앙 집중식 상태 관리의 기본"

1시간 분량 강의안 (Redux 기초)

강의 목표

Redux의 개념과 필요성을 이해한다.
Redux의 주요 개념(스토어, 액션, 리듀서)을 학습한다.
Redux를 활용한 간단한 상태 관리 애플리케이션을 구현한다.

강의 목차

1. Redux란 무엇인가? (10분)

Redux의 정의

Redux는 JavaScript 애플리케이션을 위한 상태 관리 라이브러리입니다.
애플리케이션의 상태를 중앙 집중식 스토어에 저장하여, 상태 관리의 일관성을 유지합니다.

Redux의 필요성

React 컴포넌트 간 Props Drilling을 해결.
상태 관리가 복잡한 대규모 애플리케이션에서 데이터를 효율적으로 관리.

Redux의 3가지 핵심 원칙

Single Source of Truth:
- 모든 상태는 하나의 스토어에 저장됩니다.
State is Read-Only:
- 상태는 불변하며, 오직 **액션(Action)**을 통해 변경됩니다.
Changes are Made with Pure Functions:
- 상태 변경은 **순수 함수(Pure Function)**인 리듀서(Reducer)를 통해 이루어집니다.

2. Redux 주요 구성 요소 (15분)

1단계: 스토어(Store)

상태가 저장되는 중앙 데이터 저장소.
스토어 생성:

import { createStore } from 'redux';

const store = createStore(reducer);

2단계: 액션(Action)

상태를 변경하기 위해 디스패치되는 순수 JavaScript 객체.
액션 생성:

const incrementAction = { type: 'INCREMENT' };

3단계: 리듀서(Reducer)

현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수.
리듀서 예제:

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

Redux 데이터 흐름

UI에서 액션을 디스패치.
리듀서가 액션을 처리하여 새로운 상태를 반환.
스토어가 상태를 업데이트하고, UI가 다시 렌더링.

3. Redux 기본 구현 (20분)

1단계: 프로젝트 설정

Redux 설치:

npm install redux react-redux

2단계: 스토어 생성 및 리듀서 연결

스토어 생성:

import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

export default store;

3단계: React 컴포넌트에서 Redux 사용

Provider 설정:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

const root = createRoot(document.getElementById("root"));

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

상태 사용 및 디스패치:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default Counter;

4. 실습 과제 (10분)

실습 과제

Redux를 사용하여 카운터 애플리케이션을 구현하세요.
버튼 클릭으로 숫자를 증가/감소하고, 숫자가 0보다 작아지지 않도록 제한하세요.

예제

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: Math.max(0, state.count - 1) }; // 최소값 제한
    default:
      return state;
  }
}

5. Q&A 및 정리 (10분)

Q&A:
1. Redux는 어떤 상황에서 사용하는 것이 적합한가요?
2. Context API와 Redux의 차이는 무엇인가요?
요약:
- Redux는 대규모 애플리케이션에서 상태 관리를 일관되게 처리하기 위한 강력한 도구입니다.
- 스토어, 액션, 리듀서의 개념을 이해하고, React와의 연동을 통해 효율적인 상태 관리를 구현할 수 있습니다.