React 에서 SoC 사용

리액트에서 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.jsexample2.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;