솔미는 성장중

> SPA (single page application) SPA는 HTML5의 History api를 통해 가능하다 > JSX를 사용하지 않을 때 (원래) 리액트에서 화면 그리는 방식 (비효율적) React.createElement API (React.createElement(tag명, null , 내용))를 사용해서 엘리먼트 생성 후 이 엘리먼트를 In-Memory에 저장. -> ReactDOM.render 함수(ReactDOM.render(만든 요소, 그릴 위치))를 사용해 웹 브라우저에 그리기 > 불변성 원시타입은 Call Stack 메모리 공간에 참조 및 값 저장/ 고정된 크기 참조 타입(객체, 배열)은 heap이라는 곳에 값을 저장하고, Call Stack에는 그곳의 주소(Heap 메모리 참조 ..

문제 상황 오히려 컴포넌트를 나눴더니 성능이 떨어진다? 이것은 렌더링이 최적화되어있지 않기 때문이다. props가 변화하는 곳만 렌더링 해주면 되는데 전부 다 렌더링하고 있는 경우 이런 현상이 발생한다. 해결법 React.memo 컴포넌트를 React.memo()로 둘러싸면 컴포넌트를 메모이징한다. props가 바뀌지 않은 컴포넌트는 새롭게 렌더링되지 않고 메모이징 된 내용을 재사용한다. 언제 사용하면 좋을까? - 새로 업데이트를 잘 시키지 않아도 되는 컴포넌트 예시 const List = React.memo(({ posts, testFunction }) => { console.log("List Component"); return ( {posts.map((post) => ( ))} ); }); useCa..

📌 프레임워크 vs 라이브러리 프레임워크 : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것 (Vue.js와 Angular는 프레임워크.) 라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것 프레임워크 ⊃ 라이브러리 여러개 📌 React : 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리 (라우팅(페이지 이동), 상태 관리, 테스트 등은 다른 라이브러리를 사용해서 react에서 가능하게 하는 것이다!) 장점 1. 상대적으로 배우기 쉬운 라이브러리 2. 여러 기능들을 위해 만들어져 있는 라이브러리 환경 3. 많은 기업들의 사용으로 검증됨 📌 React 컴포넌트 리액트로 이루어진 앱을 이루는 최소 단위. 여러 컴포넌트가 모여 웹 앱이 만들어진다. ex) 검색 컴포넌트, 포스트 컴포넌트,..