Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요
Redux란?
- 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리
- 리덕스는 쉽게 설명하면 상태 관리의 로직을 컴포넌트 밖에서 처리 하는 것이다.
- 리덕스를 사용하면 스토어라는 개체 내부에 상태를 담게 된다.
- 리덕스는 이전상태와 새로운상태의 메모리 주소를 비교하여 주소가 같으면 아무런 변경이 없다고 판단하여 동작하지 않습니다. 그래서 새로운상태는 이전상태를 복사한 새로운 상태를 반환해야 변경을 감지하기 됩니다.
- redux에서는 action -> dispatch -> reducer -> store 순서로 데이터가 단방향으로 흐름
Redux의 흐름
- 리덕스를 사용하면 스토어에서 모든 상태 관리가 일어난다. 상태에 어떤 변화를 일으켜야 할 때는 액션(Action) 이라는 것을 스토어에 전달한다. 액션은 객체 형태로 되어 있으며, 상태를 변화시킬 때 이 객체를 참조하여 변화를 일으킨다. 액션을 전달하는 과정은 디스패치(dispatch)라고 한다.
- 스토어가 액션을 받으면 리듀서(Reducer)가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야 할지 정한다. 액션을 처리하면 새 상태를 스토어에 저장한다.
- 스토어 안에 있는 상태가 바뀌면 스토어를 구독하고 있는 컴포넌트에 바로 전달한다. 부모 컴포넌트로 props를 전달하는 작업은 생략하며, 리덕스에 연결하는 함수를 사용하여 컴포넌트를 스토어에 구독시킨다.
Redux의 3가지 원칙
1. 진실은 하나의 근원으로부터
- 스토어는 언제나 단 한개입니다. 스토어를 여러 개 생성해서 상태를 관리하면 안된다. 그 대신 리듀서를 여러 개를 만들어서 관리 할 수 있습니다.
2.상태는 읽기 전용이다
- 상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법뿐입니다.
3.변화는 순수 함수로 작성되어야한다
- 액션에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 순수 리듀서를 작성해야합니다.
Redux, MobX, ContextAPI, Recoil
Redux
- Redux는 데이터의 흐름이 단방형으로 흐르는 구조입니다.
- Redux 라이브러리의 경우 store에 모든 상태를 저장하는 중앙집중방식입니다.
MobX
- MobX는 store가 여러개가 될 수 있는데, 이는 분리가 용이해 편리할 수 도 있는 반면 상태 변경 시 다수의 store가 영향을 받을 수 있습니다.
- Redux와 다르게 store의 데이터를 action 발행 없이 업데이트할 수 있는데 이는 구현은 쉽고 용이하나 테스트나 유지보수의 측면에서 문제를 일으킬 수 있습니다.
ContextAPI
- Context API는 리액트가 자체적으로 가지고 있으며, 정적인 데이터 위주로 처리하거나 업데이트가 자주 발생하지 않을 때 사용하기 적합합니다.
- 복잡한 업데이트를 처리 할 때에는 비효율적인데 Provider로 감싸진 부분의 업데이트가 되지 않은 state에도 리렌더링이 발생하기 때문입니다.
Recoil
- Recoil은 Atom과 Selector로 이루어져 있습니다.
- Atom은 상태의 단위로, 유니크한 키값으로 구분된다.
- 해당 Atom을 구독하고 있으면 해당 컴포넌트들만 선택적으로 리렌더링이 됩니다.
- Atom의 상태변화는 순수함수를 통해 일어나는데 이를 Selector라고 합니다.
- Selector는 비동기 처리 뿐만 아니라 데이터 캐싱 기능도 제공하기 때문에 비동기 데이터를 다루기에 용이하다.
HTML 의 inline 요소와 block 요소의 차이점을 설명해주세요. 예시도 들어주세요
block 요소
- 요소 안 내용 길이에 상관없이 요소 자체가 한 줄 전체를 차지하는 요소입니다.
- width, height, margin, padding 값이 먹힙니다.
- 블록 요소 다음 줄 바꿈이 이루어 집니다.
inline 요소
- 요소 안 내용 길이에 좌우, 해당 요소 안 내용 길이 만큼만 너비 차지하는 요소 입니다.
- width, height 값이 먹히지 않으며, display:inline-block을 줘야 먹힙니다.
- 줄 바꿈이 없이 우측으로 바로 이어서 표시가 됩니다.
차이점
- 블록요소는 줄바꿈이 가능해 새로운 라인에서 시작하지만 인라인 요소는 줄바꿈이 일어나지 않아 새로운 라인에서 시작하지 않고 어디에서나 시작할 수 있습니다.
- 블록요소는 width, height 값 설정 가능, 인라인요소는 불가능
- 블록요소는 인라인과블록 요소를 컨텐츠로 가질수 있지만 인라인 요소는 블럭 요소를 컨텐츠로 가질 수 없습니다!
- 블록요소의 대표적인 요소는 div,p,h1~h6등이 있고 인라인 요소의 대표적인 요소는 span,a 가 있습니다.
have a nice day