React의 상태관리 방법 => Redux
리액트의 상태관리에는 context API를 통한 방법 및 MobX, Reux등의 라이브러리를 사용하는 방법이 있습니다.
그 중 가장 많이 사용되는 Redux는 전역 상태를 생성하고 관리하며, 상태관리 라이브러리 중 가장 압도적으로 많이 사용됩니다.
Redux
컴포넌트의 상태 관련 로직을 따로 분리시켜 효과적으로 관리 할 수 있고, 상태를 공유할 때도 다른 컴포넌트를 거치지 않고 store를 통해 전달이 가능해서 편리합니다. 또한 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있습니다. 리덕스에서 데이터를 가공하기 위해선 액션이라는 것을 만들어야 합니다. 그 액션의 이름을 type이라고 하고, 그 액션을 디스패치 해야만 store에 있는 데이터가 바뀝니다. 또한 그 액션들이 어떻게 동작해야하는지 구현을 해서 저장해 두는 곳을 리듀서라고 합니다.
📍 클래스형 컴포넌트 vs 함수형 컴포넌트
클래스형 컴포넌트의 경우 state의 사용이 가능하여 상태 저장이 가능하고, 리액트 라이프 사이클 메서드를 사용할 수 있다. 함수가 아닌 클래스이기 때문에 return문이 없고 render()함수가 필수적으로 있어야 JSX 반환이 가능합니다.
함수형 컴포넌트는 클래스보다 선언하기 좀 더 편하고, 함수는 한번 실행되고 나면 메모리상에서 사라지기 때문에 메모리 자원을 덜 사용하는 것이 장점입니다. 함수형 컴포넌트에서는 hook을 사용할 수 있고, return문을 사용합니다.
📍 props와 state
모두 리액트 컴포넌트에서 다루는 데이터로 그 중 props는 부모 컴포넌트에서 받아온 데이터입니다. 리액트는 부모에서 자식으로만 데이터가 흐르는 단방향 형식으로, 이미 상속된 props는 수정이 불가능합니다.
반면 state는 해당 컴포넌트 내부에서 선언되기 때문에 수정이 가능합니다.
state는 컴포넌트 내부에서 변경 가능한 데이터를 저장하는데 사용되고, props는 컴포넌트 간에 데이터를 전달하는데 사용됩니다.
useRef
- 값 저장 시 현재 저장하고 싶은 값을 re-rendering없이 저장할 수 있다. (react life-cycle과 분리되어 있다고 생각하면 됨)
- 컴포넌트의 속성만 조회&수정
