이번 회고 키워드
- Virtual DOM
- props
- state
Virtual DOM
가상돔은 배우기 전부터 많이 들어봤고 면접에서도 많이 나오는 개념이며
여러모로 알아둬야 한다고 알고 있었다.
그리고 잘 이해가 가지 않을 수 있다고 해서
긴장하면서 강의를 봤었는데 생각보다 은근 별거 아닌 친구였다..!
오히려 처음에 그냥 DOM을 접했을 때 구체적으로 뭘 뜻하는지 아리송했는데
가상돔의 개념을 꼼꼼히 듣고 보니 돔이 어떤 건지 좀 더 와닿게 되었다.
가상돔은 말 그대로 실제 돔은 아니며
돔은 크고 무겁기 때문에 요소 하나하나 변경시키는 게 아니라
변화가 있는 엘리먼트를 탐지한 다음 바뀌는 엘리먼트들만 모아서
한번에 돔에 적용시키는 효율적이고 똑똑한 시스템
내가 간단하게 이해한 내용은 이렇다.
공부하다보면 조금 더 전문적이고 구체적으로 설명할 수 있겠지만
지금은 어떤 건진 알고 있다고 생각한다!
props
props (property)는 상위 컴포넌트가 하위 컴포넌트에
값을 전달할 때 사용하는 속성으로
부모에서 자식 컴포넌트로 밖에 전달이 되지않아 손자까지 주려면
자식을 거쳐가야하고 아래에서 위로 전달도 어렵다.
그렇게 필요없는 전달과정을 prop drilling 현상이라고 한다.
이 현상이 길어지고 깊이가 깊어지면 어디서 온 props인지 알기어렵고,
오류가 생겼을 때 어떤 컴포넌트에서 생긴 것인지 따라가기가 힘들다는
큰 문제점이 있다.
그래서 데이터를 전역으로 관리할 수 있는
react context API가 생겼고 useContext hook으로 쉽게 관리할 수 있다.
createContext로 전역 데이터를 만들고
props를 내려줄 필요없이 useContext로 가져와서 사용하면 된다.
state
state는 단어의 뜻도 그렇고 상태라는 게 추상적인 의미로 다가와서
조금 어렵고 거리도 멀게 느껴져서 정확히 이해하는 데 힘들었다.
그런데 useState를 사용하면서 사용법도 쉽게 익혀져서
상태도 몇번 변화시켜보고 눈으로 보니 조금 익숙해짐!!
그러나 ㅎㅎㅎ
redux를 만나고,, 다시 멀어졌다고 한다,,
redux는 다룰 때 중간 절차가 많다보니까
그냥 외워야해서 최대한 많이보고 익혔다고 생각했는데
또 해본 것 이상으로 응용하려고 하니 아예 손이 안떨어지는 마법에 걸려서
답답하고 하루반나절을 날리고 힘드러따 ㅠ
그 때문인지 갑자기 state가 정확히 어떤걸 말하는지
상태가 뭔지 모르겠고 정신이 혼미해지는 불상사가 생겨서
잠시 중단하고 useState를 써서 응급대처를 했더라는...
다시 redux를 차근차근 보면서 내가 배운 기능 외에 다양한 응용법을 익혀야겠다.
난 응용에 너무 약하다는 걸 다시 깨닫게 된 순간이었다.
useState로 쉽게 해놨던 걸 redux로 바꿔보는
별거 아니면서 개인적으로는 크나큰 숙제를 짊어지고 있는 상황이라
마음이 무겁지만 오늘 하루 리프레시하고 다시 열심히 해봐야겠다 ^---^
