더 나은 코드를 만들기 위한 10가지 React 사례.

1. 기능적 컴포넌트 > 클래스 컴포넌트

기능 구성 요소는 클래스 구성 요소보다 구문이 훨씬 단순하고 읽기 쉽습니다.

현재로서는 클래스 구성 요소로 오류 경계를 만들 수 없지만 원하는 경우 react-error-boundary 과 같은 패키지를 사용할 수도 있습니다.

// 👎 Class components are verbose
class Counter extends React.Component {
  state = {
    counter: 0,
  }

  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState({ counter: this.state.counter + 1 })
  }

  render() {
    return (
      <div>
        <p>counter: {this.state.counter}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    )
  }
}

// 👍 Functional components are easier to read and maintain
function Counter() {
  const [counter, setCounter] = useState(0)

  handleClick = () => setCounter(counter + 1)

  return (
    <div>
      <p>counter: {counter}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  )
}

2. 일관된 스타일링 유지

prettier와 Eslint를 사용하면 많은 시간을 절약할 수 있습니다. 당신이 할 수 있는 또 다른 일은 당신의 컴포넌트가 당신의 메소드나 헬퍼 함수와 어떻게 다른지를 수정하는 것입니다.

당신이 할 수 있는 한 가지는 컴포넌트 내부에서 사용되는 다른 메소드와 함께 컴포넌트 및 화살표 함수에 대한 함수 선언을 사용하는 것입니다. 쉽게 검색하고 읽을 수 있습니다.

3. 기본 내보내기를 사용하지 마십시오

명명된 내보내기를 사용하면 편집기가 자동 완성될 뿐만 아니라 구성 요소 및 변수에 대한 일관된 명명도 얻을 수 있습니다.
저는 개인적으로 export function add(){}를 사용하는 것을 좋아하지 않으며 모든 파일에서 export {add} 원인을 선호합니다.

// 👎  
export default function Counter(){
  return ...
}

// -----------------------//

// 👍
function Counter(){
  return ...
}

export {Counter}

4. export 키워드로 조기 종료

조기 종료는 삼항 연산자나 if-else를 사용하는 것보다 코드를 훨씬 깔끔하게 보이게 합니다.

// 👎  
function Posts(){
  const [posts, setPosts] = useState()
  ///
  return (!posts ? <CreatePost /> : <PostsList />)
}

// -----------------------//

// 👍
function Counter(){
  const [posts, setPosts] = useState()
  ///
  if(!posts) return <CreatePost />

  return <PostsList />
}

5. 중첩 삼항 연산자 피하기

// 👎 Nested ternaries are hard to read 
isLoading ? (
  <Loading />
) : posts.length > 0 ? (
  <PostsList />
) : (
  <CreatePost />
)

// 👍 Place them inside a component on their own
function PostsPage({ isLoading, posts }) {
  if (isLoading) {
    return <Loading />
  }

  if (posts.length > 0) {
    return <PostsList />
  }

  return <CreatePost />
}

there's an Eslint rule for this named as no-nested-ternary

6. 소품 분해

맨 위에 있는 모든 props가 구조화되지 않으면 이 구성 요소가 사용하는 props를 항상 알 수 있으며 코드가 더 깔끔해집니다. 어디에나 return를 쓸 필요가 없습니다.

// 👎 Don't repeat props everywhere in your component
function Input(props) {
  return <input value={props.value} onChange={props.onChange} />
}

// 👍 Destructure and use the values directly
function Component({ value, onChange }) {
  const [state, setState] = useState('')

  return <div>...</div>
}

7. 컴포넌트 안에 컴포넌트를 만들지 마세요

초보자들이 많이 하는 실수입니다. 구성 요소가 다시 렌더링할 때마다 구성 요소 내부의 모든 것이 다시 생성되므로 상위 구성 요소가 다시 렌더링할 때마다 다른 구성 요소 내부에 구성 요소를 생성하면 하위 구성 요소가 불필요하게 마운트 해제된 다음 다시 마운트됩니다.

// run this code and check console logs
function Parent() {
  const [count, setCount] = useState(0);

// 👎 Avoid doing this
  function ChildComponent() {
    useEffect(() => {
      console.log("I am mounted");

      return () => console.log("I am unmounted");
    }, []);

    return "I am child";
  }

  return (
    <div>
      Parent : {count}
      <button onClick={() => setCount((c) => c + 1)}>add </button>
      <br />
      <ChildComponent />
    </div>
  );
}

8. 상태 관리 라이브러리가 필요하지 않을 수 있습니다.

React는 props 및 useState와 같은 상태 관리 API를 제공합니다. 또한 컨텍스트 API를 사용하여 여러 중첩 구성 요소에 액세스할 수 있는 상태를 만들 수 있습니다. 앱이 복잡해질 때만 redux, recoil 또는 기타 상태 관리 라이브러리를 사용하는 것이 좋습니다.

9. 절대 경로 사용

절대 경로를 사용하면 파일을 한 위치에서 다른 위치로 이동할 때 변경해야 하는 항목이 줄어들어 모든 항목을 가져오는 위치를 쉽게 찾을 수 있습니다.
폴더 루트에 useReducer 파일을 만들고 각 디렉토리에 대한 절대 경로를 가질 수 있습니다.

// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"],
      "@/styles/*": ["styles/*"],
      "@/assets/*": ["assets/*"],
      "@/utils/*": ["utils/*"]
    }
  }
}

폴더 루트에 jsconfig 파일을 사용하면 이제 다음과 같은 파일을 가져올 수 있습니다.

// 👎 Don't use relative paths
import {Input} from '../../../components/common/input'

// 👍 Absolute ones don't change
import {Input} from '@/components/common/input'

10. 데이터 가져오기 라이브러리 사용

React 애플리케이션에는 구성 요소에서 데이터를 가져오거나 업데이트하는 독창적인 방법이 제공되지 않으므로 개발자는 결국 데이터를 가져오는 고유한 방법을 구축하게 됩니다.
react-query 과 같은 데이터 가져오기 라이브러리를 사용하면 최소한의 코드로 서버 상태를 쉽게 캐시, 가져오기, 무효화 및 변경할 수 있습니다.