React 리팩토링 - props를 state처리하지 않기

Before

문제점

1. 불필요한 useState 사용 - name은 부모로부터 제공되는 props입니다. 변경될 일이 없으므로 상태 관리가 필요하지 않습니다.

2. 중복된 상태 관리 - props 자체를 관리하는 useState는 불필요한 복잡성을 늘립니다.

3. 직관적이지 않음 - state와 props 사이의 관계를 혼동할 수 있습니다.

import React, { useState } from 'react';

function Greeting({ name }) {
  // props를 useState로 저장
  const [greetingName, setGreetingName] = useState(name);

  return <h1>Hello, {greetingName}!</h1>;
}

export default Greeting;

 

After

1. props를 바로 사용 - name과 count는 그대로 반환에 사용합니다.

2. const 상태 사용 - message는 렌더링마다 새로 계산되는 고유한 값입니다. 별도의 상태 관리 필요 없이, 매 렌더링 시 적절한 값을 제공합니다.

3. 간결하고 명확한 로직 - 복잡하지 않은 props는 상태로 변환할 필요 없이 즉시 활용하는 편이 더 직관적입니다.

import React from 'react';

function Greeting({ name, count }) {
  // props에서 렌더링 때마다 새 값을 계산
  const message = `Hello, ${name}! This is greeting #${count}.`;

  return <h1>{message}</h1>;
}

export default Greeting;

 

 

적용한 원칙

✔️ Avoid useState with props

props를 useState에 넣지 않으면 불필요한 상태를 제거할 수 있고, React 상태 관리 규칙을 지킬 수 있습니다.

 

✔️ Direct usage in return

props는 대부분 수정되지 않으므로 바로 JSX에 활용하는 것이 적합합니다.

 

✔️Use const for static variables

컴포넌트 내에서 렌더링 때마다 고유한 값이 필요한 경우 const를 사용해 상태 관리 없이 처리할 수 있습니다. 예컨대 특정 데이터 계산 로직을 useState 대신 const로 구현합니다.

 

요약

1. props는 필요할 때 즉시 사용하라. 불필요한 상태 관리는 제거한다.
2. 렌더링별 고유 값이 필요한 경우 상태보다는 변수를 활용하라.
3. 간결한 코드와 효율성을 동시에 고려하면 유지보수성이 향상된다.