Semantic HTML의 필요성을 예시를 들어 설명해주세요.
태그만 봐도 해당 요소가 어떤 역할을 하는지를 유추할 수 있는 태그를 sematic tag라고 합니다. 기존에는 <div> 태그 안에 id나 class 속성으로 개발자별로 각자 이름을 지정하였기 때문에, 검색엔진이 html 파일을 분석할 때 정확하게 콘텐츠를 식별하기가 힘들었습니다. 그래서 HTML5에서는 정해진 시맨틱 태그를 사용하기로 규약을 정하여 검색 효율성을 높여 SEO를 최적화 할 수 있고, 구조에 대한 정보를 전달할 수 있어 요소에 담긴 콘텐츠도 더 명확하게 전달할 수 있으므로 웹접근성을 높일 수 있습니다.
Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요.
리덕스는 데이터의 흐름이 단방형으로 흐르는 flux패턴 구조로 store에 모든 상태를 저장하는 중앙집중방식입니다.
사용자 입력을 기반으로 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 흐름으로 데이터가 흐릅니다. 각 요소들은 단방향 흐름에 따라 순서대로 역할을 수행하고, View로부터 새로운 데이터 변경이 생기면 처음부터 다시 액션→디스패쳐→스토어→뷰 순으로 실행함으로써 예외 없이 데이터를 처리할 수 있습니다.
Redux는 유지보수라는 장점을 가지고 있지만, 상태의 개수가 적더라도 보일러플레이트 코드가 크다는 단점이 있다.
Recoil
Recoil은 상태의 단위인 Atom과 Selector로 이루어져 있는데,해당 Atom을 구독하고 있으면 해당 컴포넌트들만 선택적으로 리렌더링이 된다.
Atom의 상태변화는 Selector라고 하는 순수함수를 통해 일어나는데, 이는 비동기 처리 뿐만 아니라 데이터 캐싱 기능도 제공하기 때문에 비동기 데이터를 다루기에 용이하지만, 아직 버전이 낮아서 안정성의 측면에서는 좋지 않을 수도 있다.
MobX
MobX는 store가 여러개가 될 수 있는데, 이는 분리가 용이해 편리할 수 도 있는 반면 상태 변경 시 다수의 store가 영향을 받을 수 있다.
또한, Redux와 다르게 store의 데이터를 action 발행 없이 업데이트할 수 있는데 이는 구현은 쉽고 용이하나 테스트나 유지보수의 측면에서 문제를 일으킬 수 있다.
Context API
Context API는 리액트가 자체적으로 가지고 있는 라이브러리로, 정적인 데이터 위주로 처리하거나 업데이트가 자주 발생하지 않을 때 사용하기 적합하다.
하지만, Provider로 감싸진 부분의 업데이트가 되지 않은 state에도 리렌더링이 발생하기 때문에 복잡한 업데이트를 처리 할 때에는 비효율적이다.
