React는 자기밖에 모르는 것 같아

jh_leitmotif·2022년 1월 15일
0

Frontend 개인 공부

목록 보기
18/24
post-thumbnail

개요

항상 코드 설명으로 시작했던 것 같은데, 뜬금없지만 제 MBTI를 올려봅니다.

제가 들어가놓고선 댓글은 달지 않고, 눈팅만 하는 페이지의 '아이덴티티'로 시작해봅니다.

코딩과 굉장히 무관(?) 합니다만

React가 만약 사람이라면, MBTI가 ESTP일 것 같습니다.

React의 MBTI

요약을 해보자면

1. 노는 건 좋지만 남한테 크게 관심은 없고 나가기가 귀찮음
2. 공감 능력이 강한 편은 아님
3. 하고자 하는 건 어찌됐든 해야함
4. 표현을 잘하고 되는대로 흘러감
5. 조장 욕심이 있음

이런 것 같습니다.

왜 그렇게 생각해?

React는 SPA의 형태로서, 어떠한 컨텐츠를 보여주기 위해 새롭게 새로고침하기보단

하나의 페이지 안에서 동적으로 내용을 변경합니다.

그리고 컴포넌트를 지향하여 해당 컴포넌트간 props를 넘기든가, 아니면 context api를 활용해 전역적으로 관리하거나... 하곤 합니다.

그런데 이 때 각 컴포넌트는 다른 컴포넌트들이 '정확히' 무슨 일을 하는지 알지는 못합니다.

예를 들어서, 불특정 다수에게 '라면 좀 끓여줘~' 라고 부탁한다면

A: 라면 봉지에 있는 레시피 대로만 끓이는 사람
B: 계란도 넣고, 파도 썰고, 떡도 썰어 넣어 끓이는 사람
C: 물을 한강처럼 넣는 사람
D: 치즈를 풀어 끓이는 사람

이런 식으로 각자 다른 스타일을 가지기도 하죠.

그래서 각자의 특징을 알고나서는 주문한다면 이렇게 할 겁니다.

'A야 라면 끓여줘'
'D야 라면 끓여줘'

그럼에도 불구하고, 굳이 '어떻게 끓여줘!' 를 얘기하지는 않고 어떠한 누군가를 지칭하기만 합니다.

각자 어떻게 끓이는지는 대충 알겠는데, 정확히 어떻게 끓이고 말고는 상관할 것은 아니다.

라는 것입니다.

React의 경우는?

최근에 피드백을 받았던 부분 중 하나를 가져와보았습니다.

대충보면, 메인 컴포넌트에 6개의 하위 컴포넌트가 자리해있는데

전체크기 슬라이더 하나 있고...
또 무슨 이상한 슬라이더가 2개 있고... 스티키한 영역이 3개 있고..
회원가입하는 바같은게 있는 거 같은데..?

현재로서는 겉으로 보기엔 각자가 어떠한 '기능'을 가지고 있는지는 알겠지만

'무엇'을 의미하는지에 대해선 솔직히 모호합니다.

물론 props에 있는 sectionArea 값으로 유추할 수는 있겠지만, 눈길을 한칸 더 옆으로 돌려야됩니다.

피드백을 받은 후 고친 모습입니다.

일단 소개하는 슬라이더가 하나 있는가보네?
베스트 아이콘...추천 품목이 있는 것 같고
그 다음엔 자기들이 누군지, 그리고 무슨 상품이 있는지 소개하고
가치관같은 걸 알려주는 뭔가가 있는가보네.
그리고 회원가입하는 막대기가 푸터처럼 자리해있겠군

분명히 각각의 컴포넌트는 각자 어떠한 동작에 대한 명시가 있을테지만

당장 Main 컴포넌트는 그것을 알 필요가 없습니다.

Main의 입장에서는, 각각의 컴포넌트들이 어떠한 역할을 하는지만 생각하며 배치만 하면 되는거죠.

그러니까 React의 컴포넌트는,

조립될 컴포넌트에 대해 대충 어떤 일을 하는지 알기는 아는데
굳이? 그 각자가 어떤 일을 하는지 정확히 알 필요는 없다.

할 것은 그저 그 역할에 따라 알맞는 곳에 조립해주기만 하면 될 뿐.

그리그 그것이 잘 되려면 각자의 컴포넌트의 이름을 '무엇'인지에 집중하여 잘 표현해야한다.

마무리

어쩌면 이 사진도 위와 같은 발상의 산물 중 하나였을 지도 모르겠습니다.

원래 날개에 달렸어야하는 부분이 머리에 달려버려서

뭐 어쨌든, 동작은 잘하는 것 같긴 하지만 정확히 이야기하면 기괴한 생물체가 되어버렸습니다.

요즘 공부하면서 느끼는 것은 기능의 로직은 천천히 풀다보면, 또 종이에 논리를 작성해가다보면 어쨌건 간에 구현은 되고 있습니다.

뭣보다, 내가 구현한 로직이 무엇을 의미하는지에 대해서 어떤 이름을 붙여야할지에 대해 계속 고민을 거듭합니다.

제목처럼, React는 자기밖에 모르는 것 같은 기분이 드니 최소한 각자가 뭘하는지는 명시해주고 싶고.. 그런 생각입니다.

profile
Define the undefined.

0개의 댓글