본문 바로가기

Frontend145

React에서 Web Component 사용하기 Web component는 캡슐화된 컴포넌트를 만들어 재사용이 가능할 수 있게 하는 JavaScript의 표준으로, 모든 프레임워크에서 공통으로 사용이 가능하다는 장점이 있다. 그래서 프레임워크/라이브러리의 교차 사용이 자주 발생하는 곳에서는 프레임워크 기반의 컴포넌트보다 JavaScript의 웹 컴포넌트를 사용하여 재사용성을 증가시킬 수 있다.  Web Component 사용하기Web Component 파일의 경우에는 폴더를 별도로 만들어서 관리해야 한다. public 안에 폴더를 별도로 생성해서 관리하는 경우고 있고, util / lib 이라는 폴더를 따로 생성하여 관리하는 경우 등이 있다.  1. Web Component 생성  >window.customElements.define("custom-t.. 2024. 8. 30.
React: portal에 대해서 Portal은 부모컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법이라고 소개한다. 즉, React 컴포넌트에서 DOM 트리 상에서의 위치를 변경할 수 있도록 하는 기능이다. 모달, 알림, 드롭다운 메뉴 등과 같은 컴포넌트를 독립적인 위치에서 렌더링 할 수 있으며 독립된 스타일링을 유지할 수 있다. 하지만 많이 사용하게 되면 코드의 난독화 및 성능 저하가 발생할 수도 있다.ReactDom.createPortal(child, container) - child : 엘리먼트, 문자열 혹은 fragment와 같은 렌더링 할 수 있는 React 자식요소- container : DOM 엘리먼트 Portal을 사용해 모달창 만들기1. index.html에 모달 컴포넌트를 렌더링 할 DOM.. 2024. 8. 29.
React : useRef에 대해서 useRef는 리액트 훅의 한 종류로, DOM 요소에 직접적으로 접근을 해서 불필요한 재렌더링을 방지하는 역할을 한다. 과도한 useRef 사용은 성능 저하가 발생할 수 있어, 보통 직접적으로 DOM 조작이 필요하거나 렌더링과 무관하게 상태를 저장할 필요가 있을 때 사용하는 것이 바람직하다. import { useRef } from 'react';const Ref변수명 = useRef(초기값);- 초기값 : useRef 객체의 current 속성 초기 설정값이다.Ref변수명.currentuseRef는 단일 프로퍼티(current 프로퍼티)를 가진 객체를 반환한다. 이 속성에 해당 useRef 접근하여 값을 조회 및 수정할 수 있다. useRef를 사용한 값 참조useState와 useRef를 비교해보았다.. 2024. 8. 29.
React: 컴포넌트에 CSS 적용하기 React에서 CSS를 적용하는 방법은 인라인 스타일 적용, CSS 파일 작성 후에 해당 컴포넌트에 파일을 import 하는 경우 그리고 CSS-module을 사용하는 방법이다.  인라인 스타일 인라인 스타일의 경우 가장 간단하고 쉬운 방법이다. HTML의 인라인 스타일처럼 스타일을 적용할 대상에 직접 작성하는 방법이다. CSS와 몇 가지 다른 점이 있다면, style 속성값에 일반 문자열이 아닌 객체가 할당되어야 하며 CSS속성명이 CamelCase로 작성되어야 한다. (background-color -> backgroundColor)  아래 예제처럼 인라인에 바로 작성할 수도 있고, style을 따로 변수를 선언 후 객체를 만들어 스타일에 적용할 수 있다.function App() { const s.. 2024. 8. 28.
React : props에 대해 알아보자 props은 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터이다. 객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있다. props는 객체로 자식 컴포넌트에서 'props.이름'으로 접근이 가능하다. 자식 컴포넌트에서 props는 읽기 전용으로 props자체를 수정할 수 없다. 부모 컴포넌트에서 props를 변경하면 해당 props를 사용하고 있던 자식 컴포넌트는 리렌더링이 된다.  props 사용하기부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 데이터가 문자열일 경우는 큰따옴표("")를 이용해서 전달이 가능하고 문자열 외의 값을 전달할 때는 중괄호({})를 이용한다.부모컴포넌트 : 자식컴포넌트 :distructuring없이 props를 사용할 경우 함수에 props를 .. 2024. 8. 26.
React : 컴포넌트(Component)란 ? JavaScript에서 기능을 캡슐화 시켜서 재사용이 가능한 하나의 커스텀 엘리먼트를 생성하여 웹에서 활용할 수 있도록 하는 웹 컴포넌트에 대해 공부한 적이 있다. React의 컴포넌트는 사용자 인터페이스를 구성하는 독립적이고 재사용이 가능한  React의 기본 단위이다. 임의의 데이터(props)를 입력 받은 후 정해진 출력을 시행한다. 컴포넌트 작성법컴포넌트 이름은 항상 대문자로 시작한다. (React는 소문자로 시작하는 컴포넌트를 DOM태그로 취급)PascalCase로 작성한다. 컴포넌트 사용 시에 한 개의 파일에는 가급적 하나의 컴포넌트를 넣어 사용한다.파일의 이름과 컴포넌트 이름을 동기화 시키는 것을 권장한다.src에 components 폴더를 생성한다. components에 컴포넌트 파일을 생.. 2024. 8. 26.

티스토리툴바