본문 바로가기

FrontEnd

 (16)
[React] 처음 만나는 리액트 훅 리액트 훅을 알아보기 전에 Clock 컴포넌트 코드를 추가하자.  Clock 컴포넌트는 Date 타입의 today속성을 통해 자바스크립트가 기본으로 제공하는 날짜와 시간을 얻어온다.import type {FC} from 'react'import {Div, Title, Subtitle} from '../components'export type ClockProps = { today: Date}const Clock: FC = ({today}) => { return ( {today.toLocaleTimeString()} {today.toLocaleDateString()} )}export default Clock   리액트 훅이란?   리액트 프레임워크가 2019년 2월 16..
[React] daisyui CSS 컴포넌트 이해하기 CSS 컴포넌트란?  원하는 HTML요소의 스타일링을 쉽게 할 수 있는 CSS 클래스를 'CSS 컴포넌트' 라고 하며 이를 제공하는 테일윈드CSS, daisyui 등을 CSS 프레임워크(혹은 CSS라이브러리)라고 한다.  색상 테마  웹 페이지에서 가장 많이 사용되는 색상을 주 색상(primary color)라고 한다.  웹 페이지 성격에 따라 주 색상이 다를 수 있으며 주색상과 함께 사용되는 보조 색상(secoundary-color)가 있다.     또한 필요에 따라 좀 더 다양한 색상을 사용할 수도 있다.  이런 테마 색상들을 '색상 테마 라고 한다.  Button 컴포넌트 구현하기  daisyui button CSS 컴포넌트의 형태를 react를 통해 간결하게 사용할 수 있음을 알 수 있다.// 컴..
[React] 플렉스 레이아웃 이해하기 플렉스박스 레이아웃이란?  플렉스박스 레이아웃(flexbox layout)이란 flex 컨테이너가 될 요소에 display:flex 설정 후 그 안에 자식 콘텐츠 아이템을 배치하는 것을 의미한다.  플렉스 컨테이너는 콘텐츠 아이템의 inline과 block의 성질을 완전히 무시한다.  테일윈드CSS에서는 flex 클래스를 지원한다.  flex-direction 스타일 속성  CSS에서는 flex-direction 속성을 제공하며 display 설정값이 flex일 경우에만 사용할 수 있다.  flexdirection의 설정값은 row, row-reverse, column, column-reverse 등이 있으며 기본값은 row이다.  테일윈드CSS는 flex-direction 설정값에 대응하는 클래스를 제..
[React] 테일윈드CSS 리액트 프로젝트 만들기 PostCSS가 탄생한 배경 CSS개발은 역사적으로 브라우저 호환성과 벤더 접두사 같은 문제로 어려움을 많이 겪어왔으며, 이런 어려움을  극복하기 위해 루비 언어로 만든 Sass/SCSS라는 스타일 언어가 생겨나기도 했다.   Sass/SCSS는 for 반복문과 같은 프로그래밍 언어를 일부 지원했고, 벤더 접두사 문제를 해결해 주는 autoprefixer 플러그인도 제공해 지금도 큰 인기를 끌고 있다.  부트스트랩을 비롯해 널리 알려진 CSS 프레임워크는 대부분 Sass/SCSS로 만들어져 있다.  다른 언어들도 계속 발전하듯이 CSS분야에서도 '모듈화된 CSS'라는 가치를 내걸어 PostCSS라는 이름의 새로운 스타일  언어와 이를 동작하게 하는 프로그램이 탄생하였다.  PostCSS는 다양한 플러그인..
[React] 리액트 컴포넌트의 CSS 스타일링 컴포넌트 스타일링 컴포넌트 스타일링이란, React 컴포넌트의 UI(사용자 인터페이스)에 적용할 CSS를 정의하는 방법을 의미한다.React는 컴포넌트 기반 라이브러리이므로, 각 컴포넌트마다 고유한 스타일을 적용할 수 있다.  부트스트랩 사용해 보기  부트스트랩(Bootstrap)은 웹 개발에서 널리 사용되는 프론트엔드 프레임워크이다.  주로 웹 사이트의 디자인과 반응형 웹   (Responsive Web)을 쉽게 구현할 수 있도록 돕는 도구이다.  여러가지 UI 구성 요소(예: 버튼, 네비게이션 바, 가드 등)와 반응형   그리드 시스템을 제공한다. 부트스트랩을 사용해 리액트 컴포넌트를 사용하기 위해 부트스트랩 홈페이지의 CDN links의 CSS경로를 복사한다.  그 후 public 디렉터리의 ind..
[React] 이벤트 속성 이해하기 이벤트란? UI에서 버튼을 누르거나 텍스트를 입력하는 등의 행위가 일어날 때 이벤트(event)가 발생했다고 한다.  Event 타입/** 이름이 click(type 속성 값이 click')인 Event 객체를 생성하는 예 */new Event('click', {bubbles : true })     웹 브라우저의 자바스크립트 엔진은 Event 타입을 제공한다.type : 이벤트 이름으로 대소문자를 구분하지 않는다.isTrusted : 이벤트가 웹 브라우저에서 발생(true) / 프로그래밍에서 발생(false)를 판단한다.target : 이벤트가 처음 발생한 HTML 요소이다.currentTarget : 이벤트 버블링과 관계없이 현재 이벤트가 설정된 요소를 반환한다.bubbles : 이벤트가 DOM을 타..
[React] key와 children 속성 이해하기 Key 속성 설정하기  모든 리액트 컴포넌트는 key와 ref라는 속성을 포함하고 있다.  그리고 children이라는 속성을 선택적으로 포함한다.  리액트 프레임워크는 와 같은 리액트 컴포넌트뿐만 아니라 사용자 컴포넌트에도 key 속성을 제공한다.  Key 속성은 같은 이름의 컴포넌트가 여러 개일 때 이들을 구분하려고 리액트 프레임워크가 만든 속성이다.export default function App() { const texts = [hello, world] return {texts}}   해당 경고 메시지는 각각의 요소 2개에 중복되지 않는 키 값을 설정해주면 해결할 수 있다. export default function App() { const texts = [hello, world] retu..
[React] 컴포넌트 이해하기 컴포넌트란?  컴포넌트는 스몰토크(Smalltalk)에서 유래한 매우 오래된 용어이며 화면 UI를 처리하는 클래스를 의미한다.  리액트는 컴포넌트(component) 기반의 구조를 띄는 특징을 갖고있다.  모든 페이지가 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러개의 컴포넌트의 조합으로 구성될 수 있다.    16.8버전 이후 리액트 훅(react hooks)이라는 새로운 매커니즘을 고안해 객체지향 언어에서 의미하는 클래스가 아닌 단순한 함수 형태로도 컴포넌트를 구현할 수 있게 되었다. (함수 컴포넌트, 리액트 훅의 사용을 권장한다)  리액트 컴포넌트와 사용자 컴포넌트  리액트 컴포넌트라는 용어는 리액트가 제공하는 리액트 컴포넌트와 사용자가 구현하는 사용자 컴포넌트라는 2가지 의미를 포함한다..

티스토리툴바