Dev/Frontend
Flexbox Layout
Flexbox Layout Flexbox Layout은 CSS3 웹 레이아웃 모델로 화면크기에 따라 container안의 element를 배치하는 효율적인 방법을 제공합니다. Flex Container display flex를 이용하기 위해서는 display속성을 flex로 설정하여야 합니다. .container { display: flex; } flex-direction flex-direction 속성은 flex item의 방향을 결정합니다. .container { flex-direction: row | row-reverse | column | column-reverse; } flex-wrap flex item은 기본적으로 한 줄에 모두 위치하도록 되어있습니다. flex-wrap을 이용하여 여러 줄로 ..
[React] Hook
Hook Hook은 React 16.8버전에 새로 추가되었습니다. Hook은 함수 컴포넌트에서 React 상태와 생명주기 기능을 연동 할 수 있게 해주는 함수입니다. Hook을 이용하여 Class 작성없이 함수형 컴포넌트에서도 상태를 관리할 수 있습니다. useState useState는 함수형 컴포넌트에서 가변적인 상태를 지닐 수 있도록 해주는 Hook입니다. import React, { useState } from "react"; const example = () => { const [value, setValue] = useState(0); const [text, setText] = useState("text"); return ( {value} setValue(value + 1)}>Click me )..