코드 작성 규칙 ( 최신화 02-15 )

내가 짜고 싶은 코드를 짧게 말해보라고 하면, 읽기 쉬운 코드다. 

막 있어보이는 코드를 짜는 것이 아니라, 쉽고 간결한 코드를 짜고 싶다. 

그런데 컴포넌트를 만들다 보면 컴포넌트 별로 훅을 쓰는 위치도 다르고, 변수 상수 선언해서 쓰는 위치도 제각각이다. 

그래서 스스로의 규칙을 한번 만들어볼까 한다.

 

 

---

 

1. var는 쓰지 않는다. 쓸모없는 리소스 낭비가 크며, 코드를 컨트롤하기 쉽지 않을 것 같다.

 

2. 변수를 되도록이면 쓰지말자. 보안 쪽은 내가 모르는 쪽인데 안그래도 타입 문제가 있는 언어라 최대한 작성하면서라도 은연에 노력해야한다.

 

3. 이건 개인적인 건데, 컴포넌트를 작성할때 이렇게 써야겠다.

 - state 훅

 - 변수/상수

 - 함수

 - 사이드 이펙트 훅

 그리고 프로젝트를 시작하기 전에 이 프로젝트에서 지향하는 코드스타일을 메모로 남겨놓자. 

 깃의 readme에라도.

 

4. 개연성있는 컴포넌트 / 변수 이름을 쓰자. 내가 내 코드를 보면 뭐에 쓰려는 이름인지 파악이 어려울 때가 있다. 

 

5. 내가 사용하는 라이브러리에 대해서 잘 숙지해서 다음에 더 쉽게 쓸 수 있도록 요약이라도 남겨놓자.  

 

6. 복잡한 코드를 짤 때 말로 한번 되뇌어보자. 한번에 설명이 잘 되는가?

 

7. 데이터가 어떻게 컴포넌트 사이를 왔다갔다 하는지 정확하게 매순간 파악하고 있어야한다

 

 

---

리액트 네이티브

state

1. 상태를 관리할때는 위에서 뿌려줘야한다는 것을 생각하고 짜자. 

2. 상태를 남발하지 않기 위해서는 한번 쓴 것을 폭포수로 내리면서 관리할 수 있어야한다. 물론 상태관리 라이브러리 쓰면 또 다른이야기겠지만.. 위로 갈수록 편해진다.

styleSheet

1. 컨테이너의 명명 순서는 다음으로 한다.

 container , subContainer, upperContainer-lowerContainer, itemContainer

 

2. 컨테이너 - 컨테이너 안의 뷰 - 뷰를 구성하는 요소들

ex)

container:{},

upperContainer:{},

lowerContainer:{},

itemContainer:{},

// 

inputTextView:{},

profileView:{},

//

iconList:{}

 

3. 같은 컴포넌트에서 styleSheet을 정의할때 다음과 같은 순서로 명명하자

 styles, subStyles

 

 

4. styleSheet 안에서 디자인 객체를 서술할때 다음과 같은 순서로 쓰자.

flex요소들

레이아웃에 영향을 미치는 요소들 ( width, height, margin, padding.... )

자잘한 것들 ( radius, ... )

 

5. width를 최상위에서 미리 정의하자. 그리고 하위 구성요소에서는 %단위로 스타일링한다

은연 중에 여러 기기에 대응할 수 있다.