state 란? 무엇인가 . . .🙄

컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다.

거의 내가 알고있는 개념에 부합하는데, 최근에 데이터를 state로 관리하면서.. 코드를 분리할 때 데이터와 state에 대한 고민을 많이 했다.

 

초반 고민은 데이터 관련된 로직이 너무 길었기 때문에 코드를 다른 파일로 분할하는 것 이었다.

 

1. axios로 받은 500개 가량의 객체 데이터들을 받고

2. 해당 데이터를 state로 저장한다.

3. 데이터를 필터링 한다. (해당 데이터를 state로 저장한다.=> 동적인 데이터라고 생각)

4. 데이터를 정렬한다. (해당 데이터를 state로 저장한다.=> 동적인 데이터라고 생각)

5. 렌더링을 한다.

 

그래서 코드를 분리하려고 했고, 시도해본 방법은 크게 두가지였다. (ContextAPI 사용)

1. 커스텀 훅으로 분리한다

 - 이유: useState를 사용해서 state에 데이터를 저장하기 때문에, 커스텀훅으로 분리가 가능하다고 생각했다.

 - 과정

 (1) 필터링 종류가 2가지여야 한다. 컬럼에 따른 필터링이 가능해야 했다. 각 함수의 기능을 표현식으로 작성한다.

 (2) props를 만들어서 useState의 초기값으로 전달한다.

 (3) 커스텀 훅 이름을 useFilter로 하고, 함수를 호출하는 컴포넌트에서 row data에 대한 props를 전달한다.

 (4) useFilter에서 state와 filtering 하는 함수를 return 한다.

 

2. 렌더링은하지 않는 class로 만든다. (=> 맞는 방법인지는 모르겠다.)

 - 이유

 (1) row data는 렌더링에 관여하지 않는다. (왜냐면, 가장 처음에 화면을 접하더라도 필터되고 정렬된 '결과물' 데이터가 렌더링에 관여한다고 생각했다.)

 (2) 함수를 호출하는 컴포넌트에서 row data에 대한 props를 전달할 때의 초기값을 동적으로 넣어주고 싶었다.. 왜냐면, 앞에서 사용한 useFilter에서 적용되는 필터 기능이 달랐고, 리턴되는 데이터 배열이 달랐기 때문에.. 그 새로 만들어진 배열 데이터를 초기화 값으로 사용하고 싶었다.

 (3) 생성자를 이용해서 초기값을 전달하고, 메서드를 사용할 수 있을 것으로 기대했다.

 

그런데, 둘 다 코드를 분리하더라도 너무 복잡했고, 초기화를 하는 방법이 렌더링과 연관되면서 undefined가 데이터로 입력되곤 했다.

 

내가 원한건, 코드 분리였는데.. 한 컴포넌트에 기능을 몰아넣는것을 해소하고 싶었다.

계속 state에 관한 생각을 했었고,

state! 

어떤 방식이든 서로 코드에 의존하는 결과를 만들어냈다...

실패..

실패..

실패..

 

라이브러리를 사용하지 않고 처음부터 모든 것을 구현해내려고 했었는데, 결국 내 코드는 유지보수에 유용하지 않았다.

내 생각으로만 구현하려고 하는 것 때문이 아닐까... 싶어서, 새로운 관점으로 접근하려고 했다.

 

css 라이브러리들은 모두 기능에 대한 분리가 잘 되어 있다.

예를들어, Button 컴포넌트에 onClick 속성을 두고, onClick 속성에 함수를 대입만 해주면 되니, 코드를 입력하는 사람은 컴포넌트 내부가 어떻게 구성되어 있는지 몰라도 된다.

어떻게 사용자 커스텀에 따라 이렇게 잘 사용할 수 있도록 만들었을까.. 대단하다

 

나는 아마 그런 캡슐화가 잘 된 컴포넌트, 추상화가 잘 된 함수를 바랬던 것 같다.

아무래도 라이브러리 코드를 보고 어떻게 구현했는지 아이디어를 살펴보아야 겠다. (아주 내부의 코드는 조금 어려워서.. 내가 이해할 수 있는 범위에서부터 시작해보려고 한다.)

 

결과적으로는 내가 data로 관리했던 state 들은 사실 state로 관리하지 않아도 되는 것 같다. '동적인 데이터를 다룰 때 사용된다.'고 하지만,

'화면이 달라지는 것'과 '데이터의 변화'를 분리해서 생각하되, 렌더링의 트리거는 '인터렉션'에 초점을 맞춰서 state에 대한 접근을 바꿔야 할 것 같다.

 

컴포넌트와 동작을 분리하는 것, 추상화를 잘 하기