How to Improve Your ReactJS Code - Tips for Code Readability and Performance

<10 ways to improve your ReactJS code>

1. Use Constants : 상수 사용하기

자바스크립트에서는, const 키워드를 통해 상수를 선언할 수 있다.

이것은, 같은 값을 재선언해주는 것을 방지해준다.

그래서 상수는 API keys나, 다른 비슷한 values를 저장하는데 유용하다.
(API keys, URLs, Content)

모든 리액트 프로젝트에서, strings(content)을 하드코딩하는 건 지양해야한다/피해야한다.

이렇게 하면 UI, data, content를 서로 구분해줘서 프로젝트를 좀 더 유지보수성, 가독성, 확장성을 더 좋게 해준다.

많은 사이트들이 다양한 언어를 지원한다. 그래서 각각의 언어에 맞는 상수 파일이 있을 것이다.

상수 파일을 만드는 방법:

상수는 단순히 keys & values가 있는 자바스크립트 객체이다. 우리는 객체의 내용에 맞게 이름을 선언한다.

메세지를 외부로 export하기 전에 Object.freeze()하면 좋다.

// constants.js or en.js
const MESSAGES = { 
    'HEADING': 'welcome to the website",
    'ENTER_YOUR_NAME': 'Enter user name',
    'HOME': [{
        'HEADING': 'welcome to the home'
     }]
}

Object.freeze(MESSAGES);

export default MESSAGES;

2. Use Helpers / Utils

왜 helpers & utils를 써야할까?

1. 더 깔끔한 컴포넌트와 코드를 만들 수 있다.  

2. 쉽게 확장할 수 있다. 

3. 유지 보수하고 디버깅하기 좋다. 

4. 재사용성이 좋다. 

// dateUtils.js : Moved the formatDate to a seprate util file to have reusability

export function formatDate(date) {
    const options = { year: 'numeric', month: 'long', day: 'numeric' };
    return new Date(date).toLocaleDateString(undefined, options);
}

3. Learn How to Use Props

리액트에서는 컴포넌트끼리 소통(?)할 때 props를 사용한다.

본인이 코드를 짤 때, 하나의 스타일만 사용하는 것이 중요하다.

How to destructure props in component arguments

개발자들은 첫 라인에서부터 컴포넌트 내에서 어떤 props가 쓰였는지 알 수 있다.

그리고 props키워드를 반복할 필요가 없다.

• props를 반복할 필요가 없다
• 가독성이 좋다 : 첫 라인에서 구조분해를 하면서 가독성과 명확성이 좋아진다.

const Input = ({ type, placeholder, name, changeHandler }) => {
    return <input 
    type={type} 
    placeholder={placeholder} 
    name={name} 
    className="block p-2 my-2 text-black" 
    onChange={changeHandler}/>
}

4. Have One File for Each Components: 각 컴포넌트마다 하나의 파일을 갖는다.

리액트에선 각 컴포넌트마다 하나의 파일을 갖는 건 중요하다.

이건 코드가 더 깔끔하고 유지보수하기 좋게 만들어준다.

그리고 single responsibility principle 에 해당하기도 한다.

5. Don't Use Inline Functions: 인라인 함수를 지양한다.

• 안 좋은 예시

    // Don't do this:
import React, { useState } from 'react';

function CounterInline() {  
const \[count, setCount\] = useState(0);

const handleIncrement = () => {  
setCount(count + 1);  
};

return (



Count: {count}


Increment


);  
}

export default CounterInline;

• 좋은 예시

// Do this instead:  
import React, { useState } from 'react';

// Standalone function for incrementing  
function incrementCount(currentCount, setCount) {  
setCount(currentCount + 1);  
}

const CounterStandalone = () => {  
const \[count, setCount\] = useState(0);

return (



Count: {count}


<button onClick={() => incrementCount(count, setCount)}>Increment


);  
}

export default CounterStandalone;

6. Implement a 404 Component and Route; 404컴포넌트나 라우팅을 만든다.

<route path="\*" component={} />

7. Fetch Data Progressively : 순서대로 데이터를 가져온다 ✔️

8. Use Unique Values for Key Attributes

주의! index는 데이터가 정적일때만 사용하세요.

// List.jsx  
import React from 'react';

const List = ({ items }) => (

return(

{items.map((item, index) => (

-   {item}

))}

)  
);

export default List;

9. Use Types

10. Use the lazy() and Suspense() Functions

리액트가 동작하는 방식이 코드를 클라이언트쪽에서 전부 다운받는다.

const LazyComponent = lazy(() => import('./LazyComponent'));

let the routes get loaded when they're needed

lazy()를 쓰는 건 컴포넌트를 비동기적으로 가져오는 것이기 때문에, Suspense()도 같이 써줘야 한다.

<Suspense fallback={

Loading...

}>  
// The LazyComponent will only be loaded when needed

 

 

---

원문

https://www.freecodecamp.org/news/improve-reactjs-code/?ref=dailydev