Curt Poem

프론트 엔드 공부와 지식 나눔을 위한 블로그

컴포넌트 3

웹 컴포넌트로 재사용 가능한 커스텀 HTML 엘리먼트를 생성하기

웹 컴포넌트는 HTML, CSS, 자바스크립트를 활용하여 재사용 가능하고 캡슐화된 웹 요소를 만드는 도구입니다. 웹 컴포넌트는 표준 웹 기술을 사용하여 구현하기 때문에 웹 프레임워크나 라이브러리에 의존하지 않고 개발할 수 있습니다. 덕분에 다양한 환경에서 사용될 수 있고, 개발자가 선택할 수 있는 유연성을 제공합니다.웹 컴포넌트웹 컴포넌트는 React나 Vue에서 말하는 컴포넌트와 같은 것을 가르킵니다. 즉 재사용이 가능한 코드를 의미합니다. 웹 컴포넌트를 사용하면 다른 컴포넌트를 사용하는 것과 똑같은 이점을 가질 수 있습니다. 웹 개발자들이 쉽게 코드를 재사용하여 생산성을 높이고 동일한 디자인 요소를 가진 코드를 컴포넌트로 만들어 일관된 사용자 인터페이스를 구현할 수 있게 하는 것이 바로 웹 컴포넌트 ..

개발/JavaScript 2024.05.29

Prop으로 컴포넌트에 데이터 전달하기(+ 특별한 'children' props)

컴포넌트를 사용하는 것 여러 이점 중 하나는 바로 재사용이 가능하다는 점입니다. 만약 페이지에 내용은 다르지만 같은 구조와 기능을 가진 것을 여러 번 표시해야한다면 컴포넌트를 사용하는 것이 하나의 해결책이 됩니다. 실제로는 단 한 번만 사용하는 컴포넌트를 만들 때도 많지만, 이론적으로 컴포넌트들은 얼마든지 재사용이 가능합니다. 매개 변수(Parameter)를 받아 같은 계산을 실행하는 함수처럼 컴포넌트는 데이터를 받아 같은 과정을 거쳐 결과를 보여줍니다. 여기서 우리가 넘겨주는 데이터가 바로 Prop(Property, 속성)입니다. Prop Prop은 '속성'이라는 의미를 가지며 데이터를 컴포넌트로 전달하고 그 컴포넌트에서 받은 데이터를 사용할 수 있게 합니다. 컴포넌트를 여러 번 재사용하기 위해 속성을..

리액트의 특징 그리고 가상 돔(Virtual DOM)

리액트 리액트(React)는 페이스북에서 개발된 JavaScript 라이브러리로, 사용자 인터페이스를 만들기 위한 것입니다. 주로 SPA(Single Page Application, 단일 페이지 애플리케이션)을 구축하는 데 사용되며, 재사용 가능한 UI 컴포넌트를 효과적으로 관리할 수 있도록 도와줍니다. 또한 리액트는 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화하고, 데이터가 변경될 때 효율적으로 업데이트를 처리합니다. SPA와 가상 DOM 및 DOM에 관해서 간략하게 소개드리자면, SPA는 페이지의 이동없이 동적으로 페이지의 콘텐츠를 업데이트하는 웹 애플리케이션입니다. 그리고 가상 DOM은 실제 DOM을 효율적으로 업데이트하여 성능을 향상시키는 기술입니다. Vue.js와 같은 다른 자바..