Daehyunii's Dev-blog

JSX란? 자바스크립트의 확장 문법이며 XML과 매우 유사하다. 우선 JSX는 브라우저에서 실행되기 전 번들링되는 과정에서 바벨을 통해 일반 자바스크립트 형태의 코드로 변환된다. 다음 예제를 살펴보자. JSX function App() { return ( Hello react ) } 변환 function App() { return React.createElement("div", null, "Hello", React.createElement("b", null, "react")) } 이 처럼 JSX를 통해서 우리는 JavaScript로 작성해야 하는 코드들을 간략하고 시각적으로도 보기 좋게 표현할 수 있다. 한 마디로 JSX는 보기 쉽고 우리에게 익숙한 형태로 작성된다. 또한 JSX 문법을 활용하면 컴포넌트..

컴포넌트 스타일링 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가지 이다. 그렇다면..

웹이란? 'World Wide Web'의 줄임말로, 인터넷 위에서 동작하는 서비스입니다. 📚유래 1989년 '팀 버너스 리'에 의해서 붙여진 이름이 현재까지 사용되고 있는 웹은 정보들이 서로 연결되어 있는 형태가 실이 엉켜 있는 거미줄 모양과 유사해 거미줄을 의미하는 'Web'이라는 단어를 그대로 사용했다고 합니다. 웹은 사용자들이 정보를 나누는 정보의 공간을 제공해 줍니다. 웹은 하이퍼텍스트 구조를 활용해서 인터넷상의 방대한 양의 정보를 서로 연결해 줍니다. 웹은 탄생 이래로 여러 단계를 거쳐 발전해 왔습니다. 가장 초기 단계인 웹 1.0, 그리고 우리가 가장 익숙하게 사용하고 있는 웹2.0 그리고 이제는 웹3.0으로 나아가고 있습니다. (웹 뒤에 있는 숫자는 웹의 발전 단계를 의미합니다.) 웹 1.0..

변수 선언의 실행 시점과 변수 호이스팅 자바스크립트 엔진은 변수 선언을 다음과 같은 2단계에 거쳐 수행합니다. 선언 단계 : 변수 이름을 등록(실행 컨텍스트의 렉시컬 환경)해서 자바스크립트 엔진에 변수의 존재를 알립니다. 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 합니다. (const 제외) console.log(score); // undefined var score = 'Hello World' console.log(score); // 'Hello World' var hoisting = '선언문이 스코프의 선두로 끌어 올려진 것처럼 동작하는 것을 자바스크립트만의 고유한 특징인 호이스팅 이라고 합니다' var 키워드로 선언한 변수의 특징 1. 변..