React 에서 SoC 사용

Posted on Edited on In , Word count in article: 204 Reading time ≈ 1 mins.

리액트에서 Soc (Separation of Concerns)를 사용하자

Soc 사용이유

Soc 사용을 통해서 복잡한 기능이 뭉쳐지는 것을 방지하고 function 의 기능을 명확하게 해줄 수 있다

사용예

Soc 사용전

example.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const URL = "http://somehost:someport/some/path";

const Example = () => {
  const [data, setData] = useState([]);
  
  const options = {
    method: 'POST', 
    body: JSON.stringify(sampleBody),
  }
  
  useEffect(() => {
    (async () => {
      try {
       const response = await axios.post(URL, options);
       if (response) {
           setData(response.data);
          }
        } catch (error) {
          console.error(error);
        }
    })();
  }, [data]);
  
  return (
      {data.map(element => (
        <div>{element}</div>
      ))}
    );
}

export default Example;

Soc 사용

1개의 example.js 파일이 post.js 와 example2.js 로 많아졌지만
js 파일의 역할이 명확해지면서 가독성은 더 좋아졌다.
post.js 는 axios 를 사용한 데이터 처리용으로 분리되었고
example2.js 는 URL 과 options 정보를 이용해서 사용하는 역할로 명확해졌다.

post.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { useState, useEffect } from 'react';
import axios from 'axios';

export const usePost = (url, options) => {
    const [data, setData] = useState(null);

    useEffect(() => {
        (async () => {
             try {
                const response = await axios.post(url, options);
                if (response) {
                    setData(response.data);
                  } 
                } catch (error) {
                    console.error(error);
                }
        })();
    }, [url, options]);

    return data;
}
example2.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React from 'react';
import { usePost } from './usePost';

const URL = "http://somehost:someport/some/path";
const options = {
    method: 'POST', 
    body: JSON.stringify(sampleBody),
  }

const Example = () => {
  const data = usePost(URL, options);
  return (
      {data.map(element => (
        <div>{element}</div>
      ))}
    );
}

export default Example;