element4 React - Element 단위 이해하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 화면을 표시하는 가장 작은 단위라고 하는 Element 에 대해 알아보도록 하겠습니다. Component 를 넘어가기 이전에, Element 를 가볍게 이해하고 넘어가는 페이지로 이해해주시면 좋겠습니다. ========= HTML 삽입 미리보기할 수 없는 소스 ========= HTML 삽입 미리보기할 수 없는 소스 React 공식 문서에서도 Element 는 "React App 의 가장 작은 단위" 라고 정의하고 있습니다. 즉 React 에서 코드를 작성할 때, 코드의 가장 작은 구성요소가 Element 라는 의미를 갖습니다. 기존의 JavaScript 에서 사용한 "DOM" 객체의 Element 와는 달리 React Element 는 ".. 2023. 2. 23. React - JSX 문법 기초 이해하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 를 사용하기 위해 기본적으로 이해해야하는 JSX 문법의 대한 기초적 사항을 학습하려고 합니다. 시작해보도록 하겠습니다. ============== HTML 삽입 미리보기할 수 없는 소스 ============== HTML 삽입 미리보기할 수 없는 소스 JSX 는, JavaScript XML의 약자로, JavaScript 의 기존 문법에서, 확장된 문법입니다. React 에서의 JSX 는 본질적으로 Component 를 이용해서 UI(User Interface) 를 rendering 하는 로직과 연결된다는 사실을 이해하고, 받아들여야 합니다. 이 로직에는 Event 가 처리되는 방식, 시간이나 이벤트 발동에 따라 State 가 바뀌는 방식, 이를 .. 2023. 2. 23. HTML HTML 기본 개념 정리 및 가이드 - Inline Element 안녕하세요. Hynn 입니다. 이번 포스팅에서는 Block Element 에 이어, In-Line Element 를 정리해보도록 하겠습니다. In-Line Element 의 경우 활용도에 따라 불가피하게 추가적인 Display Porperty 설정을 해야 의도한 대로 작성이 되는 경우가 존재하며, 기본적으로는 Display Porperty 에서 어떠한 성질을 가지고 있는 Element 인지를 이해해야 올바른 작성이 가능합니다. In-Line 속성을 가진 HTML Element 는 이후에 다루게 될 CSS에서 Width(넓이), Height(높이) 를 설정할 수 없습니다. 이를 위해 Display Porperty 설정을 추가로 해야하는데, 본 포스팅에서 같이 다루어보도록 하겠습니다. ============.. 2022. 10. 21. HTML HTML 기본 개념 정리 및 가이드 - Block Element 안녕하세요. Hynn 입니다. 이 글에서는 이전 포스팅에서 설명한 Block과 Inline의 개념을 바탕으로 둔 각각의 Element 를 정리하고, Element 별 주로 사용되는 형태에 대해서 설명하도록 하겠습니다. Block Element 이전 포스팅에서 설명했듯이 한 줄 영역 전체를 차지하는 Block 형태의 Element를 먼저 정리하도록 하겠습니다. 이 Porperty 유형 별의 Element 를 이해하지 않고 사용한다면 HTML로 구현하는 웹 사이트의 영역 정리가 불가할 수 밖에 없기 때문에 사용자는 이를 반드시 인지하고 작성을 해야 올바른 웹 페이지를 구현할 수 있습니다. Block 속성을 가진 HTML Element 는 이후에 다루게 될 CSS에서 Width(넓이), Height(높이) 를.. 2022. 10. 21. 이전 1 다음
