2024-05-23 React의 상태관리

목차

• 상황
• 해결 방법

상황

React는 변수를 state로 정의하고 값이 계속 바뀔 때마다 그 부분만 화면을 재 렌더링 해주기 때문에 사용성도 좋고 빠르다고 이해했다.

그런데 이 상태가 너무 자주 변경되면 상태가 바뀔 때마다 전체를 재 렌더링하기 때문에 성능 저하가 올 수 있고 렌더링이 씹힐 수 있다.

// Button.jsx(자식 컴포넌트)

// TODO: FilterButtons 컴포넌트를 작성하세요. 필터링 옵션을 선택하는 버튼들을 포함해야 합니다.
function FilterButtons(/* 필요한 props를 여기에 전달하세요 */ {
  initialStudents, filteredStudents, setFilteredStudents
}) {
  const filterByAge = (minAge) => {
    setFilteredStudents(filteredStudents.filter((student) => student.age >= minAge));
  };
  const filterByGrade = (grade) => {
    setFilteredStudents(filteredStudents.filter((student) => student.grade === grade))
  };
  const resetFilter = () => {
    setFilteredStudents(initialStudents);
  };

  return (
    <div>
      {/* 여기에 필터링 버튼들을 완성하세요. */}
      <button onClick={()=>filterByAge(18)}>18세 이상</button>
      <button onClick={()=>filterByGrade('A')}>A등급</button>
      <button onClick={resetFilter}>필터 초기화</button>
    </div>
  );
}

export default FilterButtons;

// App.jsx (부모 컴포넌트)

function App() {
  const initialStudents = [
    { name: "Alice", age: 17, grade: "A" },
    { name: "Bob", age: 18, grade: "B" },
    { name: "Charlie", age: 16, grade: "C" },
    { name: "Diana", age: 19, grade: "D" },
  ];

  const [filteredStudents, setFilteredStudents] = useState(initialStudents);

부모 컴포넌트에서 filteredStudents로 상태로 정의하였는데 이 배열을 직접적으로 filter 등을 돌리게 되면 성능저하가 오게 되고, 렌더링이 씹힐 수 있다.

해결 방법

filteredStudents에 filter 등을 돌려서 계속 상태를 바꾸는 것이 아니라, initialStudents라는 최초의 배열의 상태를 수정하는 것이 좋다.

  const filterByAge = (minAge) => {
    setFilteredStudents(initialStudents.filter((student) => student.age >= minAge));
  };
  const filterByGrade = (grade) => {
    setFilteredStudents(initialStudents.filter((student) => student.grade === grade))
  };
  const resetFilter = () => {
    setFilteredStudents(initialStudents);
  };