react 컴포넌트 작성규칙

MyComponent.js

다음과 같은 컴포넌트를 통해 컴포넌트 작성시 권장되는 것들을 알아보려 합니다.

MyComponent.propTypes = {
    //...
}

export default function MyComponent ({prop1,prop2}) {

}

const OBJ = [
    { name : 1, location : 'Korea', color : 'white' },
    { name : 2, location: 'Seoul', color: 'red'}
    //...
]
const URL = '/api/location'
function getLocation ({name,location}) {

}

이 코드를 하나씩 뜯어보자면

1.컴포넌트의 타입을 파일 최상단에 명시하자(타입스크립트라면 interface이용)
MyComponent.propTypes = {
    //...
}

2.prop대신 destructuring을 이용해 속성값을 받고,컴포넌트 함수 이름을 명시하자
export default function MyComponent ({prop1,prop2}) {

}


3.외부 변수,함수는 대문자로 컴포넌트 내의 변수,함수와 구분하고, 컴포넌트보다 중요도가 떨어지므로 컴포넌트 다음에 작성하자

4.커다란 크기의 객체는 컴포넌트 내부에서 작성시,
   컴포넌트 렌더링마다 생성되므로 낭비를 막기 위해 외부에서 작성해서 쓰자
   
const OBJ = [
    { name : 1, location : 'Korea', color : 'white' },
    { name : 2, location: 'Seoul', color: 'red'}
    //...
]
const URL = '/api/location'
function getLocation ({name,location}) {

}

5.연관된 코드끼리 모아서 작성->가독성 증가 및 customHook작성에 좋다

group.js

import React,{useState,useEffect} from 'react';

export default function Profile ({userId}) {
    const [user,setUser] = useState(null);
    useEffect(()=>{
        getUserApi(userId).then(data=>setUser(data))
    },[userId])

    const [width,setWidth] = useState(window.innerWidth);
    useEffect(() => {
        const onResize = () =>{setWidth(window.innerWidth)};
        window.addEventListener('resize',onResize); 
        console.log(`Effect 1 ${width}`)
        return () => {
            window.removeEventListener('resize',onResize)
            console.log(`Effect 2 ${width}`);
        }
    },[width])    

}

custom Hook으로 전환하여 가독성 증가

group.js

import React from 'react';
import useUser from './useUser;
import useInnerWidth from './useInnerWidth';

export default function Profile({userId}) {
	const user = useUser(userId);
    const width = useInnerWidth()
}

userUser.js

import React,{useState,useEffect} from 'react';

export default function useUser (userId) {
    const [user,setUser] = useState(null);
    useEffect(()=>{
        getUserApi(userId).then(data=>setUser(data))
    },[userId])
    return user;
}

const USER1 = {name:'React',age:33};
const USER2 = {name:'Vue',age:56};

function getUserApi (userId) {
    console.log(userId)
    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve(userId%2 ? USER2 : USER1)
        },500)
    })
}

userInnerWidth.js

import React,{useState,useEffect} from 'react';

export default function useInnerWitdh () {
    const [width,setWidth] = useState(window.innerWidth);
    useEffect(() => {
        const onResize = () =>{setWidth(window.innerWidth)};
        window.addEventListener('resize',onResize); 
        console.log(`Effect 1 ${width}`)
        return () => {
            window.removeEventListener('resize',onResize)
            console.log(`Effect 2 ${width}`);
        }
    },[width])    
    return width;
}