プリンコード会議

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.ネーミング

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/home/HomePage.js

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

export default HomePage

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

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

... 

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

5.インデント

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

6.コメント