24/1/12 기술면접

1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?
   • 답변
   • state props LifeCycle dom redux react-query
   • 리액트는 SPA(싱글 페이지 어플리케이션)이니까 스테이트 변화를 주면 그에따라 변화를 읽고 화면을 리랜더링 시켜주기위해서 상태관리는 해야합니다.
     
     
   • 지역적으로 한파일 안에서의 state관리만 할꺼면 useState나 useRef정도 더넘어서 useReducer 정도만 이용해도 충분합니다.
     
     
   • 만약 부모컴포넌트나 자식컴포넌트가 있는데 그들에게 상태변화를 연결해주고 싶으면 최상단 부모태그에 상태관리를 위한 useState같은것들을 주고 그에 따른 필요한 로직들을 props로 전달하면 됩니다.
     
     
   • LifeCycle? -  라이프 사이클은 컴포넌트가 mount될때 유지되면서 update될때 unmount 될때까지라고 보는데 저는 현재 역량으로 mount 될때는 useEffect를 이용해서 주로 처리하고  unmount될때는 useEffect의 리턴 함수를 설정해서 관리하는 식으로 하고 있습니다. 중간단계는 뭐 온클릭이든 온체인지든 여러 이벤트를 만들수 있겠죠
     
     
   • dom ? - 다큐먼트 오브젝트 모델 웹의 구조 뼈대라고 생각합니다.html파일에서는 각 태그들이 모여있는 형태가 dom이 아닐까요?  바닐라 자바스크립트 일때는 이 dom을 querySeletor 와 같은 방식으로 직접 지정해서 조작했습니다. dom 의 특정 태그를 지정하여 재할당을 하는 방식으로 조작했는데 react로 넘어와서는 실제 dom에 접근하는게 아니라 dom과 똑같이 생긴 가상dom을 조작함으로서 쓸데없는 초기render를 막고 ux가 좋아졌습니다.
     
     
   • redux - 전역상태관리 라이브러리중 하나죠 보통 리덕스툴킷을 저는 쓰는데 지역적인 스테이트 관리의 한계인 국한적으로만 상태변화를 일으키고 감지하는것을 넘어서 가상돔안에서 서로간의 거리감이 먼 컴포넌트간에의 정보전달을 위해 잘사용하고 있습니다. state의 변화를 저장해주고 그 변화를 전역적으로 원하는 컴포넌트에 전달해주는 아주 유용한 라이브러리죠
     
     
   • reactQuery - thunk도 써봤는데 신박하기는 한데 비동기 통신과 전역상태관리까지 동시해 하려니까 로직만 길고 어렵고 하는데  reactQuery에 익숙해 지니까 신세계더라고요 Thunk 갖다 버려!!!!  전역상태관리는 캐시에 저장시켜서 알아서 해주고 비동기통신도 척척 잘해주고 비동기 통신에 대한 response처리 방식까지 다양해서 정말 유용하더라고요
2. Redux가 무엇인가요, 왜 Redux를 사용하시나요?
   • 답변 -위에 얘기했는데요? 왜 또 물어보시죠? 전역적으로 state관리 하고 싶다고요 뿌엥
     
     
   • SPA Component - MPA의 단점인 끊임없는 새로고침 반복되는 mount를 없애고 single page에서 바뀌는 부분만 샥샥 하고 리랜더링 해주는 개꿀 application임다.
     
     
   • 상태관리 Library - 전 이제 너무 익숙해져버린 redux-toolkit(RTK)를 사용합니다. 우리 새 팀장님은 ZUSTAND인가를 만져보고 있다고 하시고 RECOIL이라는 것도 있는데 굉장히 쉽다네요. 일단 익숙해져 버린 툴킷 계속 쓸것 같은데 딱히 쓰지않을 큰 단점도 못느끼겠고 나중에 다른것도 익혀볼 생각입니다.
3. Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요
   • 답변
   • Zustand : 타입스크립트 지원 간단한 구조 - 오호 이거 타입스크립트 지원해줘요? 몰랐네 근데 툴킷써도 타입스크립트 쓰는데 문제 없던데요? 
     
     
   • Recoil : 비동기 상태관리 경량화 - 비동기 상태관리 경량화라 암튼 가벼워졌다는건데 안써봐서 모르겠슴다. 나중에 써봐야겠네 
4. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.
   • 답변 - 리얼돔은 HTML의 태그들이 이루는 구조들이고 리얼돔을 조작하면 새로 마운트 되서 전체 화면이 싹다 초기랜더 되버리기 때문에 비용이 큽니다 ux도 당연히 좋지않고 느리죠, 버츄얼돔은 리액트에서 쓰고 있는 방식인데 실제 바뀌는 컴포넌트만 리랜더링 시키기 때문에 빠르고 비용이덜들기떄문에  ux가 좋아지죠
     
     
   • memory 트리구조- 와 나 진짜 이런말 처음 들어요 이게 머선 소리지? 
     메모리를 트리구조로 나눠서 저장하는 방식이래요
     1.코드 세그먼트 - 루트 메모리로써 프로그램 명령어가 저장되는 공간이래요. 
     2.데이터 세그먼트 - 정적 변수와 전역 변수가 저장되는 공간이래요. 정적변수는 고정된 변수라는 말같고
     근데 변수가 변하는 실수의 줄임말인데 정적변수가 맞는 말임? 걍 상수라고 해야되는거 아님?
     아니면 정적으로 변한다는 말인가? 뭐지? 
     전역변수는 말그대로 전역으로 쓰는 변수들을 말하는거 같아요
     3.힙 - 힙하네 ㅋㅋㅋ 동적으로 할당된 메모리가 저장되는 영역 동적 메모리 할당과 해제가 가능하대요
     4,스택 - 지역변수 , 함수호출정보 ,복귀주소등이 저장되는 영역이래요 스택프레임 이건 뭐지? 단어는 멋있구먼
       함수가 실행되면 스택프레임이 생성되고 함수가 종료되면 스택프레임이 해체 됩니다.
     
     
   • 코드세그먼트가 부모인 루트노드이고 데이터세그먼트 힙 스택이 자식노드래요
   • rendering 추상화 - 이것도 버츄얼 돔과 관련되 있습니다. react와 같은 라이브러리는 실제dom이 아닌 
     가상돔을 조작하는데 이를 dom 조작을 추상화 한다고 말합니다.
5. useRef에 대해 설명해주세요.
   • 답변 - 저 이거 요새 자주 쓰고 있어요 useState에서 리랜더링 시켜주는 기능을 빼면useRef입니다.
     또 특정태그의 ref속성에 useRef를 할당한 변수명을 넣어서 그 특정태그를 참조할수 있어요
     useRef의 초기 스테이트의 current 속성에 바꿔줄 로직을 넣어서 참조하고 있는 태그를 바꿔주는 거죠
     useRef는 리랜더링이 되어도 state를 기억하고 있기 때문에 let이나 const처럼 데이터를 잃지 않죠
     쓸데없이 리랜더링은 시키고 싶지 않지만 state를 기억하고 싶을때 사용합니다.
     그런데 화면에 적용될려면 리랜더링이 필요하기때문에 보통 useState와 같이쓰는거 같습니다.
     
     
   • react hook 저장공간 - 말그대로 저장공간역할이죠 useRef는,
   • DOM 참조 - 설명드린대로 dom요소중 특정태그를 참조할수 있게 합니다.
   여기서 문득 드는생각이 useRef는 지역적으로 사용한단 말이죠? 그렇다면 전역적으로 쓰이는 useRef
   같은게 필요할까라는 생각이 드네요 지금 타이핑 하면서 
   흐음 필요 없을것 같슴다 왜냐면 툴킷에 usedispatch를 쓰면 그냥 state기억하고 있는데 그로 인한 랜더링 원치않으면
   useSelector 안쓰면 그뿐