プリンコード会議

万博非反応国産

1.構成部品の定義

次のように構成部品を定義します.

import React from 'react'

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

export default FunctionComponent

2.関数の定義

匿名関数は矢印関数として定義され、ネーミング関数は関数キーワードとして定義されます.

// 익명함수(아래 두 함수는 같은 함수)
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)、関数、支柱、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. ページコンポーネント名

の他のコンポーネントと区別するために、指定されたページフォルダに含まれるページコンポーネント名は____Pageです.

// pages/home/HomePage.js

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

export default HomePage

4.String->"(一重引用符)の使用

String型変数またはスタイルシート属性で

を使用

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

... 

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

5.インデント

の新しいブロックを作成するたびに、2つのスペースが残ります.

Vscode左下ギア->設定->エディタ:Tab Size

6.コメント

行コメント(//)

を使用

他のチームメンバーの理解を助けるために、論理的な簡単な説明を作成します.