Daehyunii's Dev-blog

함수형 컴포넌트와 클래스형 컴포넌트의 차이점 1. 클래스형 컴포넌트의 경우 state 기능, 라이프 사이클 기능의 사용 및 임의 메서드 정의가 가능하다. 2. 함수 컴포넌트의 경우 클래스형 컴포넌트에 비해 메모리 자원을 덜 사용한다.(유의미한 차이는 아니라고 함) 3. 함수 컴포넌트를 사용하는 것이 배포할 때 결과물의 파일 크기가 더 작다.(유의미한 차이는 아니라고 함) 4. 함수 컴포넌트의 경우에는 클래스형 컴포넌트에서의 라이프 사이클 기능 대신 Hooks를 통해 해결 가능하다. props 기본값 설정: defaultProps 부모 컴포넌트로 부터 prop을 전달 받지 않은 경우에 defaultProps를 설정할 수 있다. const MyComponent = (props) => { return 안녕하세..

리다기를 읽기 시작했다. 오늘부터 리액트를 다루는 기술을 읽기 시작했다. 기존에 리액트를 접한 경험이 없었기 때문에, 데브코스에서 리액트를 본격적으로 다루기 전에 기본적인 내용을 학습하는것이 좋다는 판단이 들어 인프런에서 '제로초' 리액트 강의를 들었고 지금은 데브코스를 통해서 리액트 강의를 들으며 공부하고 개별적으로 '리액트를 다루는 기술'을 같이 읽기 시작했다. 오늘은 리액트의 특징과 JSX 기본적인 문법들에 대해서 공부했다. 2022.12.20 - [📚 Language & CS knowledge/React] - JSX란? JSX란? JSX란? 자바스크립트의 확장 문법이며 XML과 매우 유사하다. 우선 JSX는 브라우저에서 실행되기 전 번들링되는 과정에서 바벨을 통해 일반 자바스크립트 형태의 코드로 ..

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..

컴포넌트 스타일링 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 새로운 리액트 앱을 만..

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