키티의 코딩공부

컴포넌트 연습하기 Text //Text.js import "./Text.css"; import PropTypes from "prop-types"; const Text = ({ children, size, paragraph, block, strong, underline, delete: del, color, mark, code, ...props }) => { const Tag = block ? "div" : paragraph ? "p" : "span"; const fontStyle = { fontWeight: strong && "bold", fontSize: typeof size === "number" && size, textDecoration: underline && "underline", color, }..

컴포넌트 스타일링 1. 스타일 시트를 이용하는 방법 (CSS 파일을 통한 스타일링) 2. Inline Style을 이용하는 방법 (태그 자체에 스타일을 적용하는 방법) //index.js import "./Box.css" const Box = ({ bgColor }) => { return } export default Box; 3. CSS in JS 방법 (emotion과 같은 CSS 라이브러리를 이용하는 방법) => emotion Emotion 은 JS 로 css 스타일을 작성하도록 설계된 라이브러리 npm i @emotion/react 설치 npm i -D @emotion/babel-plugin 바벨플러그인 설치 create-react-app 에서 사용하기 pragma : 컴파일러에게 명령, /** ..

React 반응형 프로그래밍 (엑셀) 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산이 수행된다. 컴포넌트의 조합으로 view를 구성한다. 컴포넌트 : 재사용이 가능한 독립적인 객체. 런타임 시점에 사용. virtual dom(가상돔) : 필요한 부분만 한 번에 렌더링한다. => 성능보다는 개발을 편하게 처음에는 컴포넌트만 열심히 생각하자. 컴포넌트 구조, 아키텍처, 아름다운 코드는 잠깐 잊고 눈에 보이는 UI를 컴포넌트로 구현해보자. 그러면서 UI를 점차 추상적으로 바라보는 방법을 익히자. create-react-app 리액트로 app을 만들 수 있는 가장 빠른 방법 웹팩 등을 통한 기초 빌드 설정을 직접하지 않아도 돼서 편하다. JSX React는 JSX라는 문법을 채택하여 사용 JSX는 ht..