리액트의 상태관리
안녕하세요 왕초보 이지민입니다..
리액트에 대해 아시나요? 상태관리에 대해 아시나요? 저는 모든게 처음인데요..
따라서 예제 코드나 심화적인 내용보다는 개념적인 부분에 집중해 공유해보려고 합니다! 제가 찾아보며 새롭게 알게 된 내용을 위주로 작성하였습니다.
리액트의 상태관리
상태란?
상태(state)란 컴포넌트의 데이터를 의미하며, 해당 데이터는 시간이 지남에 따라 변할 수 습니다.
리액트에서 이벤트에 의해 변경되는 도엊ㄱ인 값이며 웹 애플리케이션을 렌더하는데 영향을 미칠 수 있다고 합니다.
상태의 종류
상태는 크게 전역 상태와 컴포넌트 간 상태, 지역 상태의 세 가지로 나눌 수 있습니다.
전역상태 (Global State)
전역상태는 프로젝트 전체에 영향을 끼치는 상태를 의미합니다. Props Drilling 방식을 통해 부모에서 자식으로 데이터를 전달하는데요, 해당 방식에 대해서는 아래에서 더 자세히 살펴보기로 합니다.
컴포넌트 간 상태 (Cross Component State)
여러가지 컴포넌트에서 관리되는 상태를 의미합니다. 프로젝트 곳곳에서 쓰이는 모달이며, Props Drilling을 필요로 합니다.
지역상태 (Local State)
특정 컴포넌트 안에서만 관리되는 상태이며, 다른 컴포넌트들과 데이터를 공유하지 않습니다.
상태관리를 해야하는 이유
상태와 상태관리에 대해서 알아보았으니, 상태관리의 필요성에 대해서 알아봅시다 상태관리는 왜 필요할까요?
상태 관리를 통해서 애플리케이션의 다양한 부분이 서로 일관되게 데이터를 공유하고 사용자의 상호작용에 반응할 수 있게 됩니다. 그렇기 때문에 상태관리는 애플리케이션의 동작을 결정하고 사용자의 인터페이스를 동적으로 업데이트하는데 필수적인 역할을 합니다.
따라서 효과적인 상태 관리를 한다면, 리액트 애플리케이션의 성능과 유지보수성을 크게 향상시킬 수 있습니다.
수행하는 작업의 상태 추적 용이성
상태관리 없이 진행된다면 사용자가 애플리케이션 내에서 수행하는 작업의 상태를 추적하는 것이 매우 어렵기 때문에 복잡한 시스템을 다룰 때에는 상태관리가 필수적으로 필요합니다. (ex. Props Drilling이 많아질 경우 Props의 출처를 찾기 어려움)
예측 가능성과 유지 보수성
프로그램이 어떻게 구동될지 예측 가능하고, 코드를 추후에 유지보수하는 데에 있어서 긍정적인 효과를 줍니다.
여러 컴포넌트 간의 데이터 공유 용이성
효과적인 상태관리는 중복 코드를 방지하고 코드의 재사용성을 증가시킵니다.
Props Drilling
Props Drilling이란?
앞서 간단하게 언급했던 Props Drilling은 React 애플리케이션에서 데이터를 전달하기 위해 필요한 과정을 설명하는 용어입니다. 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미하는데요, 여기서 중간 컴포넌트는 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 필요하지만 해당 값을 직접 사용하지 않는 경우에도 프로퍼티를 받고 전달해야 한다고 합니다.
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="App">
<FirstComponent content="Who needs me?" />
</div>
);
}
function FirstComponent({ content }) {
return (
<div>
<h3>I am the first component</h3>;
<SecondComponent content={content} />|
</div>
);
}
function SecondComponent({ content }) {
return (
<div>
<h3>I am the second component</h3>;
<ThirdComponent content={content} />
</div>
);
}
function ThirdComponent({ content }) {
return (
<div>
<h3>I am the third component</h3>;
<ComponentNeedingProps content={content} />
</div>
);
}
function ComponentNeedingProps({ content }) {
return <h3>{content}</h3>;
}위에 예제 코드를 가져와보았는데요, componentNeedingProps 컴포넌트에서 해당 컴포넌트를 사용하기 위해 content를 전달하는 과정이며, App > first > second > componentNeedingProps 순서입니다.
Props Drilling의 장점
Props Drilling 방식은 명시적인 값을 사용하고 추적 및 코드 변경 파악이 용이하다는 장점을 갖고 있습니다.
명시적인 값의 사용
해당 방식을 통해 값을 전달하면 어디서 데이터가 사용되는지 명확하게 보여주기 때문에 코드의 의도를 명확하게 파악할 수 있다고 합니다.
값 추적 용이성
값이 어떤 컴포넌트를 거쳐 전달되는지 알 수 있으므로 버그를 디버깅하거나 코드를 변경할 때 더욱 편리하다고 합니다.
코드 변경 파악 용이성
코드 변경이 애플리케이션의 다른 부분에 어떤 영향을 주는지 파악하는 것이 용이하며, 변경사항에 따른 영향을 사전에 예측하고 관리할 수 있는 이점이 있습니다.
장점이 명확하지만, Props 전달이 많은 과정을 거치게 된다면 코드를 읽을 때 해당 Props를 추적하기 힘들다는 문제가 있다고 합니다. 이를 해결하는 방법에 대해서 알아봅시다.
Props Drilling 해결 방법
전역 상태 관리 라이브러리 사용
redux, Mobx, recoil 등을 사용하여 해당 값이 필요한 컴포넌트에 직접 불러서 사용할 수 있다고 합니다. 이를 통해 Props Drilling을 피하고 상태를 전역적으로 공유할 수 있습니다.
Children Props
Children Props를 활용하여 데이터를 부모 컴포넌트에서 자식 컴포넌트로 전달할 수 있다고 합니다.
Custom Hooks
Custom Hooks를 사용하여 관련된 로직을 재사용 가능한 함수로 추상화할 수 있다고 합니다. 이를 통해 Props Drilling을 해소하고 데이터 전달을 보다 간편하게 할 수 있습니다.
마무리
상태관리에 대한 전반적인 개념과 필요성, 그리고 Props Drilling이 갖는 명확한 장단점에 대해 파악할 수 있었습니다. Props Drilling을 해결할 수 있는 방식에는 더 많은 방도들이 존재하고 있다고 알고 있는데, 리액트 과제를 수행하며 차차 해당 내용까지도 이해하고 공유할 수 있기를 기대하고 있습니다아
출처
https://velog.io/@rachel28/Prop-Drilling
https://f-lab.kr/insight/importance-of-state-management-in-react
