Intro 🌼
-
요즘
바닐라 자바스크립트가 재밌습니다.리액트와 같이라이브러리들이 왜 생겨나고, 인기있는지,자바스크립트를 공부하면 할수록 더 깊이 있는 이해를 할 수 있는 것 같습니다. -
오늘은
class에 대해서 이야기 해보려고 해요.바닐라 자바스크립트로 처음댓글 추가 삭제 기능을 만들때는 객체지향언어에 대한 개념이 없었기 때문에, 사실 그냥 만들었던거 같아요. 다시기초부터 공부하면서, 조금씩 알아가고 있답니다.객체지향언어가 무엇인지...
Class 🤔
-
class는 사실자바스크립트에는 없는 개념이랍니다. 흔히들자바스크립트를프로토타입의 객체 지향 언어라고 하죠.프로토타입에 대해서도 다음에 이야기할 기회가 있을 거에요. 일단은,Class를객체를 만드는기능?,표지등 으로 생각하면 쉬울거 같아요. 그러면 왜?Class를 쓰는 걸까요? 왜Class를 사용해서객체를 만드는 걸까요? -
사실 제가 이해하고 있는 부분이 100% 맞다고 말씀드릴 수는 없어요. 하지만, 제각 직접 코드를 쓰고 만들어 보면서 느낀점은, 코드를
레고화시키기 위해서는class가 필요하다는 거죠. 여기서레고화란 한페이지에 있는 코드를 쪼개서 하나의컴포넌트,모듈화를 하는거죠. 그리고한페이지에서 모두 합치는거에요,SPA같은 느낌이랄까요... 여기서리액트와 비슷한 점이 있어요. 꼭리액트의Class형을 쓰는 느낌이 들어요. -
아래는 댓글 추가 삭제 기능을 만들어 놓은 코드에요. 이 코드를 class를 사용해서 바꿔보았답니다.
-
아래는 class를 사용해서 만든 코드에요.
이렇게 코드를 만들게 되면, 이코드를 다른 페이지로 땡겨 올 수 있답니다. 즉,import를 해 올 수 있어요. 그렇게 되면,컴포넌트로 기능들을 관리 할 수 있기 때문에,유지보수할 때, 좋고재활용하기에도 수월해 진답니다. -
Class를 사용하다보면,this에 대해서도 생각을 하게 된답니다. 여기서 말하는this는Comment를 의미한답니다. 세번째 줄에서this.onAdd.bind(this)대신에 아래,onAdd 함수에서Arrowfunction처리를 해도 상관은 없답니다.
끝으로 🧐
자바스크립트를 공부하다보면,React의 필요성에 대해서 다시 한 번 생각해 볼 수 있는 식안을 갖게 됩니다.React를 공부하다가, 이해가 되지 않는 부분이 나온다면, 저처럼요... 다시자바스크립트로 돌아가서 하나부터 다시 공부하는 것을 추천드려요. 뭔가... 조금은 알 것 같거든요. 사실Class에 대해서 이야기를 하면, 정말 할 이야기가 많지만... 아직은 제가 그 단계까지는 아닌 것 같습니다. 여기서는 간단하게 그냥 개념만 이해하고, 제가 더 깊이 있는 이해를 하게 되면, 더 자세히 성실하게 설명하도록 하겠습니다.
