컴포넌트 구조화 하기 - (부제: 나만의 코드 작성하기)

부제만 봐도 마치 필자가 처음 영어를 배울 때 느끼던 보이지 않는 통곡의 벽을 보는 기분이다.

하지만,이것도 결국 방향만 매번 빠르게 잘 잡으면 생각보다 빨리 해결 할 수 있을 거라고 본다.

 

여기서 짧게 변명을 해 보자면, '개발자는 시간 관계상이란 이유 때문에라도 다들 구글링 해서 코드 갖다 붙여서 적절히 조합해서 쓰지, 스스로 코딩 하는 경우는 없다' 라는 말을 믿었던 점 이었다고 할까.

 

할말은 많지만 여기까지. 자, 이제 이 관문을 해결 해보자.

 

우선, react 부터 javascript 로 가보겠다. react 의 경우, 파일구조를 참고 해 보도록 하자.

파일 구조 – React

그리고, react 를 잘 다루기 위한 팁 페이지다. 아래글은 필자가 처한 상황과 정확히 맞아 떨어지는 경우이다.

 

React Best Practices – Tips for Writing Better React Code in 2022

음, 근데 충격적이게도 잘 안다고 생각했던 자바스크립트에서 뭔가 불안함이 느껴진다.

querySelector 부터 보기만 하면 제법 용도를 검색해서 그에 맞게 연결 하는 건 가능한데...뭘까?

 

내가 정말 1년 넘게 준비 하면서 코드 한줄 작성 조차 할 줄 모르는 걸까?

그리고 놀랍게도, react 보다도 javascript component 구성이 잘 안되고 있었다!

 

그럼 대책이 필요하다.

이것만 해 낸다면, 문제해결 연습문제 풀이에서 계속 막히는 문제도 해결 되리라 본다.

---

이론 점검.

• what is "state"?
• ups and downs of class and functional components
• what are component re-renderings and how do they work?
• how to trigger re-renderings
• different component lifecycles and how to interact with them
• Virtual DOM
• Benefits of CSR (Client Side Rendering) and SSR (Server Side Rendering) in general and in React
• Controlled vs. Uncontrolled Components
• State Lifting
• at least one global state management technology (Context API, Redux/Toolkit, Recoil)
• Component Patterns (especially how to choose the right pattern)

컴포넌트 작성에 앞서, 다음을 점검해보자.

• use functional components (like arrow-functions)
• don't use inline-styles
• maintain a proper import structure (third-party imports first --> internal imports below)
• format your code before committing

그렇다면 이제 각 기의 다른 패턴의 컴포넌트들을 알아보자. (2번 링크 참고)

---

이 과정을, 궁극적으로는 custom component 과정이라고 한다.

Implement a Custom Component in JavaScript