솔미는 성장중

State의 깊은 중첩을 지양해야 하는 이유는 무엇일까요? 첫 번째로, 중첩된 객체의 state를 변경하기 어렵기 때문입니다. 중첩된 부분만 업데이트하기 위해선 깊은 복사를 수행해야 하고, 이는 복잡성을 증가시켜 코드의 가독성을 떨어뜨립니다. 두 번째로, 깊은 중첩된 state는 재사용이 어렵기에 다른 컴포넌트에서 필요한 부분만 추출하기 어렵습니다. 마지막으로 깊은 중첩된 State를 가진 컴포넌트는 State가 업데이트될 때마다 전체 컴포넌트가 리렌더링될 가능성이 높아집니다. 이는 성능 저하로 이어질 수 있으며, 불필요한 리렌더링을 발생시킬 수 있습니다. 따라서 가독성, 유지보수성, 성능 측면에서 state의 중첩을 최소화하는 것이 좋습니다. 브라우저의 렌더링 과정에 대해 간략히 설명해주세요. 가상 돔..

1. DOM tree 생성 개발자가 작성한 HTML을 브라우저가 전달받으면, 브라우저의 렌더엔진이 이를 파싱 DOM node로 이루어진 트리 생성 2. Render tree 생성 CSS파일과 각 엘리먼트의 inline 스타일을 파싱하고, 스타일 정보를 추가하여 렌더트리 생성 3. Layout 각 노드들은 스크린의 좌표가 주어지고 정확히 어디에 위치해야할지 정해짐 4. Painting 모든 요소들에 색을 입히는 과정 , UI렌더링 예전에는 서버에서 데이터와 함께 완전한 페이지를 렌더해주는 SSR(server side rendering) 방식을 많이 사용했음. SPA의 등장과 함께 CSR(client side rendering)방식이 많이 사용되면서 DOM 업데이트가 복잡하게 발생하는 어플리케이션들이 많아졌..

🎃 Immer가 무엇이며, Immer를 사용하지 않고 불변성을 유지하는 다른 방법은 무엇인가요? 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용해 불변성을 유지하며 업데이트할 수 있게 해주는 라이브러리입니다. immer는 객체를 직접 변경하지 않고 original data(base_)를 그대로 두고, copy data(copy_)를 생성하고 변경하는 동작을 진행합니다. (immer의 produce 함수가 불변성 유지 작업을 대신해주면서 새로운 상태를 생성해주므로, 불변성을 유지하며 원하는 값만 업데이트할 수 있습니다.) 변경한 객체는 modified flag를 true로 바꿔 root tree에서 leaf tree까지 순회할 수 있도록 합니다.변경이 완료된 뒤 modifed flag를 확인해서 변경된 ..

UI를 요청하고 제공하는 3단계 1. 렌더링 촉발 - 렌더링이 일어나는 이유 : 1. 컴포넌트의 첫 렌더링일 때 : 2. 컴포넌트의 state가 업데이트된 경우 2. 컴포넌트 렌더링 - React에서 컴포넌트를 호출한다 : 1. 컴포넌트의 첫 렌더링일 때 ▶ 루트 컴포넌트 호출 : 2. 컴포넌트의 state가 업데이트된 경우 ▶ state 업데이트에 의해 렌더링이 발동된 함수 컴포넌트 호출 ▶ 함수가 새로운 JSX스냅샷 반환 ▶ 반환된 스냅샷과 일치하도록 화면을 업데이트 - 중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 재귀적으로 과정 반복 - 렌더링 시 주의사항 : 동일한 입력에는 동일한 출력이! : 이전 state를 변경하면 안된다! 3. DOM에 커밋 ..

리액트에서 JSX문법이 어떻게 사용되나요? JSX(javascript XMl)문법은 js 코드 내에서 UI요소를 작성할 때 사용되는 확장 문법입니다. 바벨을 통해 일반 js 형태의 코드로 변환되기 때문에 브라우저에서 실행될 수 있습니다. 또한 JSX로 작성된 코드는 React DOM에서 렌더링하기 전에 모두 이스케이프 됩니다. 이 때문에 명시적으로 작성되지 않은 내용은 애플리케이션에 주입되지 않으며, 모든 항목은 렌더링 전에 문자열로 변환됩니다. 이러면 JS코드로 해석되지 않으므로 개발자가 명시적으로 보안 조취를 취하지 않아도 어느정도 크로스 사이트 스크립팅(Cross-site scripting XSS, 타인이 웹페이지에 악성 스크립트를 삽입할 수 있는 취약점) 공격을 방지하는 데 도움을 줍니다. (예시..