🌐 React Best Practice

대세 프론트 라이브러리인 리엑트로 개발을 하기에 앞서 가급적이면 꼭 지켜야할 부분을들 정리하였습니다. 습관적으로 아래 내용들은 반드시 숙지합시다!

함수형 컴포넌트와 훅을 사용

React 함수 컴포넌트와 훅은 클래스에 비해 더 간결하고 읽기 쉬운 코드를 생성하므로 더 자주 사용해야 합니다.

상태사용 피하기

React 애플리케이션을 빌드할 때 상태를 많이 사용할수록 앱 전체에서 더 많은 데이터를 추적해야 하므로 상태를 최대한 사용하지 마십시오.
상태 사용을 최소화하는 한 가지 방법은 필요할 때만 선언하는 것입니다.
예를 들어 API에서 사용자 데이터를 가져오는 경우 개별 속성을 저장하는 대신 전체 사용자 개체를 상태에 저장합니다.

//개별 속성 상태
const [username, setusername] = useState('');
const [password, setpassword] = useState('');
 
//전체 사용자 개체
const [user, setuser] = useState({});

동일한 구성요소와 관련된 파일을 하나의 폴더에 정리

Navbar 구성 요소를 생성하는 경우 Navbar 구성 요소 자체, 스타일 시트, 구성 요소에 사용된 기타 JavaSript 및 자산 파일을 포함하는 navbar라는 폴더를 생성합니다.

인덱스 키를 Props Key로 사용하지 않기

아래와 같이 인덱스 키를 사용하면 때때로 작동하지만 인덱스를 키로 사용하면 특히 목록이 변경될 것으로 예상되는 경우 문제가 발생할 수 있습니다.

//인덱스 키를 사용 (X)
const Items = () => {
  const arr = ['item1', 'item2', 'item3', 'item4', 'item5'];
  return (
    <>
      {arr.map((elem, index) => {
        <li key={index}>{elem}</li>;
      })}
    </>
  );
};

가능한 경우 div 대신 조각을 선택하십시오.

<div>를 사용하면 DOM 크기가 증가합니다. 특히 태그 또는 DOM 노드가 많을수록 웹사이트에 더 많은 메모리가 필요하고 브라우저가 웹사이트를 로드하는 데 더 많은 전력을 사용하기 때문에 대규모 프로젝트에서 더욱 그렇습니다. 이로 인해 페이지 속도가 느려지고 잠재적으로 사용자 경험이 저하될 수 있습니다.
불필요한 <div> 태그를 제거하는 한 가지 예는 단일 요소를 반환할 때 태그를 사용하지 않는 것입니다.

const Button = () => {
  return <button>Display</button>;
};

명명 규칙 준수

구성 요소 이름을 지정할 때 항상 PascalCase를 사용하여 구성 요소가 아닌 다른 JSX 파일과 구별해야 합니다. (예: TextField, NavMenu 및 SuccessButton)
handleInput() 또는 showElement()와 같은 React 구성 요소 내부에 선언된 함수에는 camelCase를 사용하십시오.

반복적인 코드 피하기

중복된 코드를 작성하고 있다는 것을 알게 되면 재사용할 수 있는 구성 요소로 변환하십시오.

Props에 객체 구조화 사용

props 객체를 전달하는 대신 객체 구조화를 사용하여 props 이름을 전달하십시오. 이렇게 하면 사용할 때마다 props 객체를 참조할 필요가 없습니다.

//props 그대로 사용
const Button = (props) => {
 return <button>{props.text}</button>;
};
 
//객체 구조화 사용
const Button = ({text}) => {
 return <button>{text}</button>;
};

맵을 사용하여 동적으로 배열 렌더링

map()을 사용하여 반복되는 HTML 블록을 동적으로 렌더링합니다. 예를 들어 map()을 사용하여 <li> 태그의 항목 목록을 렌더링할 수 있습니다.

const Items = () => {
  const arr = ['item1', 'item2', 'item3', 'item4', 'item5'];
  return (
    <>
      {arr.map((elem, index) => {
        <li key={elem + index}>{elem}</li>;
      })}
    </>
  );
};

각 React 구성 요소에 대한 테스트 작성

생성한 구성 요소에 대한 테스트를 작성하면 오류 가능성이 줄어듭니다. 테스트를 통해 구성 요소가 예상대로 작동하는지 확인합니다. React의 가장 일반적인 테스트 프레임워크 중 하나는 Jest이며 테스트를 실행할 수 있는 환경을 제공합니다.

React Is a Powerful Tool, But You Must Follow Certain Practices

React는 사용 방법 측면에서 다소 유연하지만 특정 사례를 따르면 경험을 최대한 활용하는 데 도움이 됩니다.