Fact (사실)
- 면접스터디
- 리렌더링과 dom과의 관계
Feeling (느낌)
면접스터디
면접 스터디를 진행했는데 각자 면접에서 받았던 질문이나 답을 얻고 싶은 질문 한 가지를 골라 돌아가며 답하는 과정을 통해 질문에 답을 할 때 몇 가지 피드백이 있었는데
- 무슨 말을 해도 의도가 드러나게끔 이야기하기
- 이 말을 함으로써 어떤 걸 면접관에서 어필하고 싶은지 생각하며 말해보자
- 경험을 위주로 얘기해 보는 것이 좋다
- 보통 이론적인 부분들은 구글링하면 나오는 자료들이 많기 때문에 면접관 입장에선 식상할 수도 있어 거기서 좀 다른 부분을 보여주고자 경험이랑 연결하며 이야기해 보자
- 면접관분들이 그 질문을 하게끔 여지를 주며 나한테 유리하게 이끌어가게끔
- 면접 질문으로 어떤 질문을 받을지 모르기 때문에 모든 질문을 다 준비한다면 너무 광범위하고 시간도 부족하다 자신 있는 부분을 준비해서 그 부분에 대해 계속 이야기가 나오게끔 하자
면접을 준비할 때 받은 피드백들을 지키면서 준비해 봐야겠다
리렌더링과 dom과의 관계
이 부분을 공부하게 된 계기는 면접 질문에서 부모 컴포넌트가 리렌더링이 될 때 자식 컴포넌트도 리렌더링 되나요라는 질문을 dom을 이용하여 설명해 보라는 질문이 있었는데 그 부분에 답을 하지 못해서 이번 기회에 찾아봤다
react 공식 문서의 reconciliation에서 찾아보다가 내가 얻고자 했던 자료들이 없어 아직은 beta 버전인 공식 문서를 찾아봤다 거기서는 예제 코드도 있고 좀 더 상세히 설명을 해줬는데
브라우저는 많은 tree 구조를 사용하여 ui를 모델링 하는데 react 또한 tree 구조를 사용하여 만든 ui를 모델링하고 관리한다 react는 jsx에서 ui 트리를 만든 뒤 react dom은 해당 ui 트리와 일치하도록 브라우저 dom 요소를 업데이트한다
좀 더 읽어보니 내가 원하는 질문에 관한 정보를 얻을 수 있었다. 동일한 위치에서 다른 구성 요소를 렌더링 한다면 전체 하위 트리의 상태가 재 설정되는데 그 말은 컴포넌트가 dom에서 제거가 된다면 아래에 있는 전체 tree도 파괴되기 때문에 부모 컴포넌트가 리렌더링 될 때 자식 컴포넌트도 리렌더링이 된다는 것을 알 수 있었다
이 글을 읽으면 새롭게 알게 된 사실이 있었는데 react state는 component에 존재한다고 생각할 수 있지만 react 내부에 존재하고 react component는 ui 트리 위치에 따라 state와 component를 연결한다 결국 React는 동일한 위치에서 동일한 요소를 렌더링 하는 한 상태를 유지하고 중요한 것은 jsx 마크업이 아닌 ui tree 위치라는 점을 알게 됐다
참고문서
Finding (교훈)
면접 스터디를 진행하며 면접을 준비할 때 더 전략적으로 해야 했다는 생각이 들었고 혼자 준비하는 거보단 확실히 여러 명이서 피드백 받으며 준비를 하는 것이 좋구나라고 느꼈다
react 공식 문서만 보통 봤었는데 이번에 공식 문서 beta에서 생각보다 많은 정보를 얻고 예제 코드가 있어서 좀 더 이해하기 수월했다 앞으론 beta docs도 잘 이용해 봐야겠고 틈틈이 정주행 해봐야겠다
