개발새발로그

컴포넌트란 무엇일까? 컴포넌트 : 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위 하나의 페이지를 구현할 때 여러개의 컴포넌트를 활용하여 만들면 재사용이 가능하다는 장점을 갖는다. 여러 페이지에 필요한 헤더를 컴포넌트 폴더에 생성했다. import React from "react" import { Row, Col } from "reactstrap" import { css } from "@emotion/react" const HeaderCss = css` text-align: center; div { background-color: rgba(116, 172, 62, 0.12); border: 1px solid rgba(30, 20, 13, 0.2); } `..

React 개발 시 bootstrap과 같은 오픈 소스 프레임워크와 함께 많이 사용되는 것이 'Material UI'이다. 기본적인 컴포넌트를 쉽게 사용할 수 있다는 장점을 갖는다. 오늘은 여러 컴포넌트 중 버튼에 대해 작성하려고 한다. Material UI 의 Button을 사용하기 위해서는 아래의 단계를 거쳐야 한다. 1. 터미널에서 아래와 같은 명령어를 통해 material-ui를 install한다. npm install @material-ui/core 2. Button을 사용할 페이지에 임포트한다. import React from "react"; import Button from "@material-ui/core/Button"; 3. Button을 사용하여 retrun을 구현한다. import "..

React.memo는 무엇일까? : 고차 컴포넌트(Higher Order Component)를 말하며 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용하는 작업을 수행하는 것 React.memo는 props의 변화에만 영향을 준다. 페이지의 Header를 components폴더에 분리하여 작성하였는데 의도와는 다르게 page가 서버와의 통신 작업을 수행하는 횟수만큼 Header를 불러오는 것을 발견했다. const Header = props => { const item = props.sharedItem console.log(item) return ( inthyes ) } export default Header 한 페이지에 접근하였는데 5번이나 헤더가 출력을 찍어낸다. 성능을 운운할 개발 단계가..