푸딩 코딩 컨벤션

Seoyeon Kim·2021년 6월 29일

Fooding

목록 보기

1/22

expo가 아닌 react native 사용

1. 컴포넌트 정의

아래와 같이 Create-React-App 템플릿에 있는 방식으로 컴포넌트를 정의한다.

import React from 'react'

function FunctionComponent({props}) {
  ...
}

export default FunctionComponent

2. 함수 정의

익명 함수는 화살표 함수로, 이름이 있는 함수는 function 키워드로 정의한다.

// 익명함수(아래 두 함수는 같은 함수)
const sum = (a, b) => {
	return a + b;
} 
// const sum = function(a, b) {
//	return a + b;
//} 

// 이름있는 함수
function myFunc (a, b){
 	return a + b;
}

3. 네이밍

PascalCase : React Component
camelCase : 변수(const), 함수, props, hook(State, Effect)
이름이 길어지더라도 줄임말 대신 풀어서 쓰기 (ex. buttonImage(o) / btnImg(x) )

import React, { useEffect } from 'react'
import {View, Text, StyleSheet} from 'react-native'

function CodingConvention(){ //React Component
  const [count, setCount] = useState(0) //변수, 함수, State hook
  useEffect (() => { //Effect hook
	...
  })

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button onClick={()=> setCount(count + 1)}> //props(onClick)
        Click
      </Button>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      alignItems: 'center',
  },
})

export default CodingConvention

3-1. 폴더 이름

폴더 이름은 소문자로 작성한다.

3-2. 페이지 컴포넌트 이름

다른 컴포넌트들과 구분짓기 위해 pages 폴더에 포함된 페이지 컴포넌트 이름은 ____Page 라고 지정한다.

// pages/home/HomePage.js

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

4. String -> ' '(single quotation mark) 사용

String형 변수나 StyleSheet 속성에서 사용

const [string, setString] = useState('helloWorld')

... 

const styles = StyleSheet.create({
  container: {
      flex: 1,
      alignItems: 'center',
  },
})