Silver Library

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

Face the fear, build the future/Revision Sector

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

Silver Archmage 2022. 6. 16. 20:10

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

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

 

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

 

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

 

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

 

파일 구조 – React

A JavaScript library for building user interfaces

ko.reactjs.org

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

 

 

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

Two years ago, I started to learn and use React. And today I'm still using it at my day job as a Software Developer and in my own side projects. During that time I've come across a lot of "typical" issues. So I searched around and found some best practices

www.freecodecamp.org

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

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번 링크 참고)

그리고 나면? 테스트를 해보자.

 

그리고 이론 상 테스트 과정에서 하는 것일 뿐, 하고 평소 튜토리얼에 의존하던 문제가 여기에서 터진것이다.

console.log 좀 찍어 보면서 테스트를 해 봐야 겠다. 언제 부턴가 처음에는 하던 것이, 갑자기 소홀히 하게 되었다.

 

근데 정말 놀랬다. 설마 그토록 바라던 해답이, 컴포넌트 구성 연습이었을 줄이야.


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

 

Implement a Custom Component in JavaScript

 

docs.coveo.com

 

0 Comments
댓글쓰기 폼