📑 개요리액트를 처음 써보면 자주 하는 실수가 있다.바로 return의 최상단 태그를 감싸주지 않아 오류가 나는 것......처음 사용할 땐 이것 때문에 자주 버벅였다.어 왜 안되지.. 어라.. 어? 하고 시간 날리다가 깨닫기를 세번 정도 반복하고서야 안 하는 실수... 🧶 React.Fragment는 여러 요소를 그룹화할 때 사용하는 도구이다.JSX에서는 최상단 태그를 통해 하나의 부모 요소로 감싼 후 return을 해줘야 한다.컴포넌트가 렌더링 될 때 효율적인 비교를 위해 실제 DOM 트리는 하나의 구조로 이루어져야 한다.이를 위해 fragment를 사용하여 컴포넌트가 렌더링될 때 실제 DOM에 별도의 노드를 추가하지 않고 여러 요소를 그룹화는 것이다. 참고로 는 의 축약형으로 용도의..
Dom
📑 개요제어 컴포넌트와 비제어 컴포넌트는...정말 말 그대로 제어의 여부라! 특별할 건 없는 거 같다!들어가보자! 🪛 제어 컴포넌트와 비제어 컴포넌트란?- 제어 컴포넌트 (Controlled Components)대부분 상태(state)에 의해 제어되며 입력 요소의 값이 변경될 때마다 상태 업데이트가 발생한다.주로 setState()로 값을 저장하는 방식을 이야기한다. - 비제어 컴포넌트 (Uncontrolled Components)주로 DOM에 의해 직접 제어되며 일반적으로 ref를 사용하여 DOM 요소에 직접 접근하고 입력 요소의 값을 가져오거나 변경한다.기존의 바닐라 JS와 크게 다르지 않은 방식으로 클릭시 요소 내부의 값을 얻어온다. 따라서 setState()가 아닌 ref를 사용해..
📑 개요 사실 그냥 이전 포스팅에서 리액트 설명할 때 가상돔 간단히 쓰면 되겠지~ 했는데 작성하다보니 가상 돔은 이렇게 간단히 끝낼 게 아닌 거 같은데...... 싶어서 이전 포스팅의 보충 포스팅 느낌이다... 가상 DOM 이라는 처음 개념 잡기가 좀 어렵다... 내가 가상 돔을 처음 접한 게 react는 아니고 vue를 배울 때였는데 옆에 앉은 친구랑 이게... 뭔데... 굳이 왜 있어야 하는데...? 하고 강사님께 계속 물어봤었음. 근데 한 번 이런건가...하고 추상적이나마 이해하니 쉽게 잊혀지는 개념은 또 아니다. 그럼 각설하고 가상 돔 알아보러...!😂 나! 는! 즐! 겁! 다! 🌲 DOM (Document Object Model) - DOM이란? React의 작동 원리를 알기에 앞서 일단 DOM..
📑 개요 attribute와 property.. 많이 헷갈릴 개념이다. 가장 중요한 건 무엇이 변하고 무엇이 변하지 않는가라고 생각되고... 이걸 이해하면 대략적으로는 다 이해했다고 생각된다. 약간 어렵긴 한데...! 시작한다. 🧿 Attribute와 Property의 정의와 사용 - HTML의 Attribute HTML 요소의 속성 HTML 마크업에 정의되어 있는것 default 값이 변하지 않음 html 문서에서 시각적이거나 기능적인 효과를 나타낼 때 사용됨 정적인 값으로 html 문서가 로드될 때 초기화 // input -> element // type, value -> attribute // "text", "0" -> value - DOM의 Property JavaScript 객체의 속성 HTML..
📑 개요 이것을 알기 위해선 일단 HTML 렌더링과 돔을 알아야 할 것 같은데...🤔 자세히 들어가면 엄청 길어질 것 같으니 자세한 부분은 일단 넘어가고 렌더링 과정부터 시작해서 설명하기로! 🕙 브라우저의 렌더링 과정 렌더링 과정은 브라우저의 렌더링 엔진이 담당하고 있으며, 사용자가 HTML, CSS, JavaScript 등을 작성하면 브라우저는 코드를 해석하고 렌더링 과정을 거쳐 최종적인 화면을 생선한다. JavaScript는 주로 DOM을 변경하거나 이벤트를 처리하여 사용자와 상호작용하는 부분에서 중요한 역할을 한다. 1. DOM 트리 생성 → 2. CSSOM 트리 생성 → 3. 렌더트리 생성 → 4. 레이아웃 → 5. 페인팅 → 6. 합성 문서 객체 모델(DOM) 생성: 브라우저는 HTML 문서를 ..
