[데브코스 12일차 TIL] 컴포넌트 방식으로 구현하기

명령형 프로그래밍과 선언형 프로그래밍

명령형 프로그래밍은 프로그래밍을 처음 배울 때 생각해보면 진짜 하나하나! 세세하게! 순서대로! 어떻게 할 건지 A부터 Z까지 코드로 설계하는 프로그래밍이다. 보통 처음 배울 때 C언어(당연히 아닌 사람들도 많겠지만)로 시작하고는 하니, 명령형에 익숙해져있는 것은 어찌보면 당연하다.

명령형이 "어떻게"에 초점을 맞췄다면, 함수형(선언형) 프로그래밍은 목표(그래서 뭘 하고 싶은데?)에 초점을 맞추는 것이라 보면 될 것 같다. 이러한 철학으로, HTML도 일종의 선언형 프로그래밍이다. 명확한 알고리즘(어떻게)을 명시하지 않고, 그저 어떤 태그를 만들겠다, 어떤 이벤트를 걸겠다 등으로 접근하지 않는가? 따라서 함수형은 더 직관적(가독성은 상대적이지만)이다. 그러나 함수형은 사용하는 프로그래밍 언어를 좀 더 잘 알고 있어야 좋은 코드를 짤 수 있다. (함수형을 잘한다는 것은 어느정도 허들이 있다고 생각함) 가령 자바스크립트로 함수형을 하고자 한다면 우선 자바스크립트가 가지고 있는 내장함수부터 잘 알아야 하지 않겠는가?

무작정 함수형이 더 좋다고 하기보다는 명령형과 선언형을 적절히 섞어 쓰는 것이 좋은 코드라고 생각한다. (저 "적절히"가 가장 어렵긴 하지만)

컴포넌트 추상화

컴포넌트를 추상화하는 것도 선언적 프로그래밍 방식의 한 예라고 할 수 있다. 나는 몇 달전 인스턴스 객체로 컴포넌트를 처음 만들어봤는데, 진짜 신세계였다... 바닐라JS를 하면서 '리액트'를 느꼈다. (이래서 프레임워크를 사용하나? 라는 생각을 처음으로 하게 된 계기였음) 그 전까지는 완전 명령형에 js 파일을 나누긴 했지만서도 그냥 중구난방이었다. 데브코스에서 어제 바닐라JS 강의가 시작됐는데, 시작하자마자 컴포넌트 추상화를 알려주셔서 정말 좋았음. 오늘 배운 방식은 내가 그 전까지 알고 있던 방식과 조금 다른, 또 새로운 방법을 배워서 더 좋았다. 바닐라JS를 배우면 배울수록 이렇게도 할 수 있구나, 저렇게도 할 수 있구나를 느끼고 있는데 새로운 기술스킬보다 방법론(?)적으로 시야가 넓어질수록 정말 재미있다. (아주 흥미로워 아주...)
컴포넌트로 구현을 하다보면 문자열로 html dom을 그리는 경우가 많다. (가상DOM) 이 dom들은 브라우저가 알아서 바꿔준다. (조금 오타가 있더라도 말이지) DOM api를 이용해서 DOM을 직접 조작할 수도 있겠지만, 가독성과 유지보수 측면에서 좋지 않다.

---

💡 해결 된 의문 한 가지 - 같은 클래스 중에서 몇 개만 옵션을 주고 싶다

오늘 해결된 의문 한 가지가 있는데, 같은 클래스 중에서 몇 개만 옵션을 주고 싶다 - 이 부분에서 혼자 생각한 방법이 외부에서 옵션으로 주는 것이라 생각했다. 하지만 그 동안 어디 물어볼 곳도 없었는데, 강사님께서 이 부분을 다뤄주셨다. 굉장히 흥미로웠음. 그리고 여기서 그 옵션이 좀 복잡하면 외부에서 아싸리 함수로 주입하는 것이다. 맞다. 이렇게 하면 좀 더 다형성이 높아질 수 있다. 물론 독립성은 그대로 유지하고 당연히 재사용성은 더 높아진다.

💡 다시 리마인드 한 부분 - 인스턴스 생성 파라미터는 객체로 주는 것

그리고 인스턴스에 파라미터를 객체로 주셨는데, 곰곰히 생각하니 내가 저번에 한 프로젝트에서 난 파라미터를 객체로 주지 않았었다. 다음부터는 객체로 주는 걸로 해볼 것. 추후 타입스크립트를 위해서 defaultParams 객체를 만드는 습관을 들이는 것도 좋을 것 같다. 파라미터를 객체로 주지 않으면 순서도 지켜야하고 어떤 파라미터를 줘야하는지 다시 코드를 뜯어봐야해서 사용하는 쪽에서 불편하고 예상치 못한 버그를 유발할 수 있다. 생각해보니 리액트에서도 파라미터는 객체(children)으로 들어가는구나.

💡 새로 배운 것 - 리액트의 useState와 유사한 로직을 구현

리액트의 useState와 유사한 로직을 구현하여 컴포넌트의 상태관리를 할 수 있다. 프론트엔드에서 상태관리는 중요하다. 리액트의 사용 이유가 '상태 관리' 그것 하나 때문이라는 영상을 본 적도 있다(근데 정말 그거 하나 때문? 아직 잘 모름). 어쨌든, state 관리를 중심으로 컴포넌트를 구현해본 적은 없었고 그런 생각을 해본 적도 없었는데 엄청 신박했다... 이게 프로그래밍이지...

---

오늘의 일기

회고를 위에서 다 했으니 간단한 일기를 써보겠음. 오늘 팀원들과 갈틱톡? 갈틱폰? 을 했는데 오... 꽤 재미있었다. 그 동안 시간에 쫒겨 수다를 못 떨었는데 오늘 정말 대화를 많이했고 웃긴 장면들도 많았음. 정말 좋은 팀원들이다. 임시팀은 이번 주까지여서 조금 아쉽지만, 우리의 인연은 딥 다이브 스터디로 이어진다. 아참 딥다이브 공부했어야 했는데... 주말에 해야겠따.