📑 개요 어딜 가도 동기 비동기는 빠지질 않는 문제구나! 가보자궁...🤔 🦎 React의 State란? 컴포넌트 내부에서 관리되는 데이터로 컴포넌트의 상태를 저장하고 관리하는데 사용된다. State는 주로 동적인 데이터를 다룰 때 사용되며, State가 변경될 때 React는 자동으로 컴포넌트를 재렌더링하고 변경된 상태를 화면에 반영한다. - 왜 state라는 변수를 사용하죠? const, let, var과 같은 것을 안 쓰고 왜 굳이 state를 쓰는가 궁금한 사람이 있을 것이다. state는 일반 변수와 달리, 컴포넌트 렌더링에 영향을 주는 객체로, 컴포넌트 안에서 관리된다. 단, state를 직접 수정하면 React가 render 함수를 호출하지 않아 렌더링이 일어나지 않으므로, setState(u..
렌더링
📑 개요 사실 그냥 이전 포스팅에서 리액트 설명할 때 가상돔 간단히 쓰면 되겠지~ 했는데 작성하다보니 가상 돔은 이렇게 간단히 끝낼 게 아닌 거 같은데...... 싶어서 이전 포스팅의 보충 포스팅 느낌이다... 가상 DOM 이라는 처음 개념 잡기가 좀 어렵다... 내가 가상 돔을 처음 접한 게 react는 아니고 vue를 배울 때였는데 옆에 앉은 친구랑 이게... 뭔데... 굳이 왜 있어야 하는데...? 하고 강사님께 계속 물어봤었음. 근데 한 번 이런건가...하고 추상적이나마 이해하니 쉽게 잊혀지는 개념은 또 아니다. 그럼 각설하고 가상 돔 알아보러...!😂 나! 는! 즐! 겁! 다! 🌲 DOM (Document Object Model) - DOM이란? React의 작동 원리를 알기에 앞서 일단 DOM..
📑 개요 이것을 알기 위해선 일단 HTML 렌더링과 돔을 알아야 할 것 같은데...🤔 자세히 들어가면 엄청 길어질 것 같으니 자세한 부분은 일단 넘어가고 렌더링 과정부터 시작해서 설명하기로! 🕙 브라우저의 렌더링 과정 렌더링 과정은 브라우저의 렌더링 엔진이 담당하고 있으며, 사용자가 HTML, CSS, JavaScript 등을 작성하면 브라우저는 코드를 해석하고 렌더링 과정을 거쳐 최종적인 화면을 생선한다. JavaScript는 주로 DOM을 변경하거나 이벤트를 처리하여 사용자와 상호작용하는 부분에서 중요한 역할을 한다. 1. DOM 트리 생성 → 2. CSSOM 트리 생성 → 3. 렌더트리 생성 → 4. 레이아웃 → 5. 페인팅 → 6. 합성 문서 객체 모델(DOM) 생성: 브라우저는 HTML 문서를 ..
