본문 바로가기

📂 기술 면접/Library4

Virtual DOM이란? 그리고 사용 시 장점은? 👩🏻‍💻 Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요? 💁🏻‍♀️ 요약하자면 , React의 가상 DOM은 실제 DOM과 유사한 내용을 담고 있는 복사본이며, 이를 활용하면 렌더링을 최적화할 수 있습니다. 가상 DOM을 먼저 설명하자면, React는 변경 이전과 변경 이후의 두 개의 가상 DOM을 유지합니다. 첫 번째 가상 DOM은 변경 이전의 내용을, 두 번째 가상 DOM은 변경 이후에 보여질 내용을 담고 있습니다. 변경된 내용이 화면에 새롭게 그려지기 전, 즉 실제 DOM이 변경되기 이전에 React는 두 개의 가상 DOM을 비교하여 어떤 부분이 변경되었는지 효율적으로 찾아내는 작업(또는 Diffing)을 수행합니다. 이때, React는 부모 요소의 타입이 변경되면 .. 2023. 6. 8.

useEffect의 dependency array에 대해서 설명해 주세요. 👩🏻‍💻 useEffect의 dependency array에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , useEffect란, 컴포넌트 내에서 사이드 이펙트를 실행할 수 있게 하는 훅입니다. useEffect는 첫 번째 인자로 콜백함수를 받고, 두 번째 인자로 배열을 받는데, 이 배열을 dependency array 라고 합니다. dependency array란 무엇인가요? 종속성 배열이라 부르는 이유는 useEffect의 실행이 화면에 처음 렌더링 될 때 그리고 종속성 배열의 value 값이 바뀔 때마다 실행되기 때문입니다. 만약 빈 배열이 전달된다면 첫 렌더링될 때만 실행됩니다. useEffect에 dependency array를 주지 않으면, 상태가 변경될 때마다 컴포넌트가 리렌더링이 됩니다. .. 2023. 4. 10.

React 컴포넌트의 key 속성에 대해 설명해 주세요. 👩🏻‍💻 React 컴포넌트의 key 속성에 대해 설명해 주세요. React에서 리스트 형태로 컴포넌트를 렌더링 할 때, key 값을 넣어달라는 console 에러가 자주 뜨는데요. 이때 이 key 값이 어떠한 역할을 할까요? 💁🏻‍♀️ 요약하자면 , key는 React가 어떤 항목을 변경하거나 추가할지 또는 삭제할지 구별하도록 돕는 역할을 합니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. key 속성은 같은 컴포넌트를 여러 번 렌더링할 때, 다른 컴포넌트임을 구분하기 위해 사용하는 속성인데요. 예를 들어, 10개의 트윗 중 하나의 트윗만 변경되었을 때 해당 트윗만 재렌더링하고, 다른 9개의 트윗은 그대로 둘 수 있습니다. 이렇게 key 속성을 활용하.. 2023. 4. 10.

React의 props와 state에 대해 설명해 주세요. 👩🏻‍💻 React에서 props와 state의 차이점은 무엇인가요? 💁🏻‍♀️ 요약하자면 , props와 state는 모두 JavaScript의 객체이며 두 객체 모두 렌더링 후 결과물에 영향을 주는 정보들을 가지고 있지만, 한 가지 차이가 있습니다. props는 외부로부터 전달받은 값으로 변할 수 없는 값인 반면, state는 함수 컴포넌트 내부에서 변화하는 값입니다. 각 특징으로는, (1) props - React에서 컴포넌트는 부모 컴포넌트로부터 props를 받고 이 props는 상속받는 컴포넌트 내에서 수정이 불가합니다. - 데이터의 뿌리가 자기 자신이 아닌, 즉 외부로부터 전달받기에 함부로 변하지 않는 값인 읽기 전용 값입니다. (2) state - 자기 자신의 컴포넌트에서 만들어 낸 데이터이.. 2023. 4. 4.

이전 1 다음

티스토리툴바