🌐 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 대신 조각을 선택하십시오.

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

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

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

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