> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/05.-state-management/3.-redisclient.md).

# 3. RedisClient

이 문서는 서버 컴포넌트와 클라이언트 컴포넌트에서 레디스를 사용하여 데이터를 저장하고 조회하는 방법을 안내합니다.

서버 컴포넌트에서는 상태를 저장하거나 조회하기 어렵기 때문에 redisClient를 제공합니다.

{% stepper %}
{% step %}

### Server Component

다음 코드는 레디스를 서버 컴포넌트에서 작성하고 사용하는 예제입니다.

* getRedisValue와 setRedisValue 함수를 통해 데이터를 저장하고 가져옵니다.
* setRedisValue 함수에 Key, 객체, 유효시간(초)를 설정합니다. (예: 마지막 인자 500은 500초. 아무것도 넣지 않으면 무한으로 저장됨)
* getRedisValue 함수를 사용하여 레디스에서 Key에 해당하는 데이터를 가져와서 사용합니다.

{% code title="app/page.tsx (Server Component 예제)" %}

```
```

{% endcode %}

```javascript
import { restApi } from '@/lib/common/plugins/restApi';
import { getRedisValue, setRedisValue } from '@/lib/common/plugins/redisClient';

const SearchPage = async () => {
  const test = {
    test1: 'test1',
    test2: '999999',
    test3: 'weqweqweqwe',
  };

  // 마지막 500의 경우 500초로, 아무것도 안넣을 경우 무한으로 저장됨
  await setRedisValue('test998877', test, 500);

  const value = await getRedisValue('test998877');
  console.log(value);

  return (
    <>
      test1111
    </>
  );
};

export default SearchPage;
```

{% endstep %}

{% step %}

### Client Component

다음 코드는 클라이언트 측에서 레디스를 사용하는 예제입니다. 사용 방법과 설명은 Server Component에서와 동일합니다.

{% code title="app/page.client.tsx (Client Component 예제)" %}

```
```

{% endcode %}

```javascript
'use client';

import { restApi } from '@/lib/common/plugins/restApi';
import { useEffect, useState } from 'react';
import { getRedisValue, setRedisValue } from '@/lib/common/plugins/redisClient';

const TestPage = () => {
  async function setRedis() {
    const test = {
      test1: 'test12222',
      test2: '99999922222222',
      test3: 'weqweqweqwe222222',
    };
    await setRedisValue('test998877', test, 500);
  }

  async function getRedis() {
    const value = await getRedisValue('test998877');
    console.log(value);
  }

  return (
    <>
      test2222
      <button onClick={() => setRedis()}>레디스 저장</button>
      <button onClick={() => getRedis()}>레디스 조회</button>
    </>
  );
};

export default TestPage;
```

{% endstep %}
{% endstepper %}

다음과 같이 레디스 서버에 데이터가 저장된 것을 확인할 수 있습니다.

<figure><img src="/files/xdHmlvZYcHdB95TCmISE" alt="" width="563"><figcaption></figcaption></figure>