[기술 면접 스터디-10일차] Redux 상태 관리의 주요 개념들과 연결 관계 / HTML 의 inline 요소와 block 요소의 차이점

1. Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요

💡 Redux(리덕스)란 JavaScript(자바스트립트) 상태관리 라이브러리입니다.
Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있으며, Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다.

Store: Redux의 상태를 저장하는 객체입니다. 애플리케이션에서 발생하는 모든 상태 변화는 이 Store에서 관리됩니다.
Action: 상태를 변화시키기 위한 객체입니다. 액션은 type과 payload라는 두 가지 속성을 가지며, type은 액션의 종류를 나타내는 문자열입니다. 필요에 따라 payload 속성으로 액션에 필요한 데이터를 포함합니다.
Reducer: Action 객체를 받아서 새로운 상태를 반환하는 함수입니다. 이 때, Reducer는 순수함수여야 합니다. 외부 요인으로 인해 기대한 값이 아닌 사이드 이펙트가 없어야하기 때문입니다.
Dispatch:  Action을 Store에 전달하는 함수입니다. 디스패치 함수를 호출하여 액션을 전달하면, 리듀서 함수가 액션을 처리하여 새로운 상태를 반환합니다.
Selector : Selector는 상태에서 필요한 값을 추출하는 함수입니다. Selector는 상태를 직접 참조하지 않고, Store의 getState() 메서드를 사용하여 상태를 가져옵니다. Selector는 일반적으로 mapStateToProps 함수 내에서 사용됩니다.

다른 상태관리 도구와 비교하면, MobX나 Vuex 등의 상태관리 도구도 비슷한 개념을 가지고 있습니다. 그러나 Redux는 단방향 데이터 흐름을 따르는 것이 특징입니다. 즉, 액션 -> 리듀서 -> 스토어 -> 뷰로 데이터가 흐르는 것입니다. 이를 통해, 앱의 상태를 예측 가능하고 일관성 있게 관리할 수 있습니다.

또한, Redux는 saga나 thunk와 같은 미들웨어(Middleware)라는 개념을 사용하여 액션과 리듀서 사이에 추가적인 기능을 수행할 수 있습니다. 예를 들어, 액션을 비동기적으로 처리하거나, 액션의 로깅 등의 기능을 수행할 수 있습니다.

Redux(리덕스)란? (상태 관리 라이브러리) - 하나몬

Redux의 흐름과 예제

Redux의 특징으로, 중앙 집중식 Storage와 상태 업데이트를 위한Reducer를 사용하고, 단방향 데이터 흐름을 따른다는 점을 들 수 있습니다. 단방향 데이터 흐름을 따르기에, Reducer 등의 단위 테스트가 비교적 쉽다는 장점이 있습니다.

단점은 우선, 간단한 웹앱을 만들 때에도 Action, Reducer, Action Creator 등의 코드를 모두 작성해야 하기에 간단한 웹앱을 만들 때에는 귀찮게 느껴질 수도 있습니다. 또한, 처음 상태 관리 개념을 접한다면 Redux가 굉장히 버겁게 느껴질 수도 있습니다.

게다가 Recoil, MobX와는 달리 State가 변경 될 때 Component를 업데이트 해 주는 반응형 메커니즘이 기본적으로 탑재되지 않았기에, React의 자체 메커티즘을 활용하거나 추가적인 외부 라이브러리를 사용해야 합니다.(useSelector와 useDispatch, recoil에서는 )

React 상태관리 최강자는?

 

+ Dux pattern이란 무엇인가?

+ 사용해본 상태관리 툴과 사용해본 후 느낀 장단점을 비교해서 설명해 주세요

Recoil은 Redux와 비교하였을 때 보일러 플레이트를 크게 줄여 간편하게 상태 관리를 할 수 있고, React와 호환성이 높아 컴포넌트의 상태 변경에 따라 리렌더링, 자동 업데이트가 가능 합니다. 

 

 

2. HTML 의 inline 요소와 block 요소의 차이점을 설명해주세요. 예시도 들어주세요

💡 block요소는 넓이와 높이값을 설정할 수 있고, 기본적으로 사용 가능한 전체 너비를 차지하고, 줄바꿈이 일어납니다. 블록 요소 안에는 또 다른 블록 요소를 포함할 수 있고, 텍스트와 인라인 요소를 포함할 수 있습니다. 대표적으로는 div, p, h1~h6, ul, ol, li 등이 있습니다.

inline요소는 컨텐츠 만큼의 크기를 차지하기 때문에 width와 height 속성을 지정해도 무시됩니다. 줄바꿈이 일어나지 않지 않기 때문에 바로 우측으로 이어서 정렬됩니다. 인라인 요소 안에는 인라인 요소와 텍스트를 포함할 수 있습니다. 인라인 요소 안에서 블록 요소를 사용하는 것은 시맨틱한 마크업과 스타일링 관점에서 고려해야 할 사항이 있기 때문에 일반적으로 사용하지는 않습니다. margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.이러한 inline요소의 특징들 때문에 필요에 따라 display:block이나 inline-block 같은 속성을 사용해 요소를 변경시킬 수 있습니다. 대표적으로는 span, a, b, input, select, button 등이 있습니다.
. 

<a><h1>이렇게는 불가능</h1></a>
<h1><a>이렇게는 가능</a></h1>

- block요소 종류

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video

- inline요소 종류

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var

 

+ inline-block의 특징

inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다. 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되지만, block 엘리먼트처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능합니다. 다시 말해서, 내부적으로는 block 엘리먼트의 규칙을 따르면서 외부적으로 inline 엘리먼트의 규칙을 따릅니다. inline-block으로 표시되는 대표적인 예시는 <img>, <span>, <button>, <input>, <label>, <textarea>, <select>, <a> 등입니다.(inline-block을 inline이라고 부르기도 하는 것 같다)

 

+ img 태그는 inline-block으로 지금까지 알고있었는데, 브라우저는 inline이라고 한다... 이에 대한 혼란과 의견들

inline태그이나, inline-block처럼 동작하는 것이 맞는 것 같다.

img 태그의 inline vs inline-block::CSS 레퍼런스

 

Is <img> element block level or inline level?