Daehyunii's Dev-blog

컴포넌트 스타일링 1. 스타일시트 적용 외부 CSS파일을 import하여 사용하는 방법이다. 2. Inline style 적용 동적으로 스타일을 결정하는 경우에 요소의 속성으로 style을 주는 방법이다. 3. CSS in JS 적용 여러 라이브러리가 있는데 강의에서는 emotion이라는 라이브러리를 사용했다. yarn add @emotion/react @emotion/styled @emotion/styled styled API for emotion. Latest version: 11.10.6, last published: a month ago. Start using @emotion/styled in your project by running `npm i @emotion/styled`. There are..

App.js import { useState } from "react"; import Board from "./components/Board"; import Pagination from "./components/Pagination"; function App() { const [page, setPage] = useState(0); const articles = new Array(100).fill().map((_, i) => { return { id: i, title: `${i}번 게시물`, }; }); const limit = 6; const offset = page * limit; return ( ); } export default App; Pagination.js import { useState } f..

React란? 1. React 소개 리액트는 라이브러리이다. 리액트를 구성하는 기능들은 최소한의 노력으로 최대의 효율을 내기 위함이다. 2. React 특징 Reactive Programming이다. React는 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산이 수행된다. MVC에서 리액트는 V만 관리한다. 여기서 View는 컴포넌트이다. 컴포넌트는 재사용이 가능한 독립적인 객체이며 런타임 시점에 사용된다. 컴포넌트는 트리 구조로 나타낼 수 있다. 컴포넌트 조합으로 View를 구성한다. Virtual DOM이다. 필요한 부분만 한 번에 렌더링한다. 성능보다는 개발을 쉽게 하기 위해 사용되었다. 2. create-react-app, JSX 2.1 create-react-app 새로운 리액트 앱을 만..

PureComponent shouldComponentUpdate를 구현해 놓은 컴포넌트다. pureComponent의 첫 번째 기능은 state의 변경이 있는 경우에 자동으로 true, false를 계산하여 반환한다. 이를 통해 state의 변화가 있는 경우에만 리렌더링 되도록 최적화 할 수 있다. 다음 코드를 살펴보자. import React, { Component } from "react"; class Test extends Component { state = { counter: 0, }; onClick = () => { this.setState({}); }; render() { return ( 클릭 ); } } export default Test; PureComponent가 아닌 Component로..

shouldComponentUpdate 라이프 사이클 메서드 렌더링시 state, props의 변경이 있는 경우에만 렌더링 될 수 있도록하는 최적화에 유용한 메서드이다. 아래의 코드를 보면 click버튼이 있는 하나의 테스트용 컴포넌트이다. click 이벤트를 넣어줬지만 click을 여러번 누르더라도 계속해서 동일하게 빈 객체로 setState하기 때문에 state는 변경되지 않는다. 즉 여러번의 click에도 state는 바뀌는 것이 없다. 리액트의 핵심은 '상태가 변화하면 새롭게 그린다!' 라고 볼 수 있다. 리액트에서 리렌더링이 발생하는 이유는 크게 3가지 이다. state가 변하거나, props가 변하거나, 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 같이 리렌더링되는 경우 3가지 이다. 그렇다면..