본문 바로가기

컴포넌트

 (4)
[ui] 아코디언 ui 만들기 용도다수의 메뉴 박스처럼 데이터 리스트를 접어서 정리할 때 유용한 ui가 아코디언이다.해당 ui는 react와 reset css, css의 class 기반 스타일링으로 이뤄졌다.아래에 소스코드를 첨부했으니 필요하다면 사용하면 된다. app.tsximport Accordion from "./components/accordion/Accordion";// 아코디언 ui용 임시 데이터const menu = [ { id: "00", label: "에피타이저", }, { id: "01", label: "메인 음식", }, { id: "02", label: "디저트", }, { id: "03", label: "음료", }, { id: "04", l..
[css] ul, ol 태그 공부 (+: custom- ul 만들기) 용도ul과 ol은 문단의 시작점(li 태그)에 1,2,3....n, 혹은 ● 같은 리스트 스타일(marker)을 적용할 수 있는 태그이다. 원리ul과 ol의 marker은 list-style이라는 shorthand 설정으로 한번에 설정가능하고, 이는 list-style-type, list-style-image, list-style-position으로 구성된다. 이 중에서 list-style-type, list-style-image은 marker의 형태를 결정하고 list-style-position은 들여쓰기 모드를 결정한다.  display:list-item li에 marker를 표출하기 위한 display 설정   list-style-type  marker의 형태를 string 형태로 적용한다.미리 준..
[React] 리엑트 디자인 패턴: 컴포넌트와 합성 컴포넌트 컴포넌트란 무엇인가 컴포넌트 커스터마이징과 props 분기처리 문제 컴포넌트 설계 원칙(solid 원칙) 아토믹 디자인 시스템 합성 컴포넌트 컴포넌트란 무엇인가 정의 추상적인 수준에서 컴포넌트는 독립적으로 작동가능한 모듈을 의미한다. 거친 예시로는 html의 각 태그이다. 이들은 각자가 독립적으로 사용가능하다. 정적인 웹이 대세를 이루던 시절(웹 1.0)에는 컴포넌트의 개념 대신, 페이지라는 개념이 주로 사용되었다. 페이지는 서버단에서 모든 데이터를 처리한 후에 전송되었고 추가적인 데이터를 받으려면 다시 페이지를 전송해야 했다. 하지만, ajax가 등장하고 웹 브라우저가 돌아가는 개인 pc의 성능이 좋아지면서 페이지의 주요 요소가 각자의 데이터 패칭과 비즈니스 로직으로 움직일 필요성이 생겨났다.(날씨 컴..
[React] 리엑트 살펴보기3: 컴포넌트와 hooks의 등장배경(클래스 컴포넌트, 함수 컴포넌트) 1. 컴포넌트란 컴포넌트란, 독립적으로 사용가능한 UI단위를 의미한다. 이는 실제 html 요소인 button이나 input이 될수도 있고, 작은 컴포넌트들을 조립한 form 처럼 복합적인 컴포넌트일수도 있다. 리엑트에서 컴포넌트는 data를 다루는 로직 부분과 ui 부분으로 구성된다. 2. 클래스 컴포넌트 vs 함수 컴포넌트 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트로 구분된다. 클래스 컴포넌트 class 문법으로 React.Component를 상속하여 만드는 컴포넌트 생성자 함수에서 this로 state를 초기화한다. 컴포넌트 라이프 사이클별 메소드를 사용할 수 있다.(컴포넌트가 mount, update, unmount 되는 시점에 사이드 이펙트를 할 수 있음) render 메소드를 통해서 JSX를 ..

티스토리툴바