FrontEnd/React
-
React HooksFrontEnd/React 2023. 11. 11. 11:00
React Hooks는 ReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기능입니다. 주로 Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해 개발되었습니다. React Hooks는 Functional Component를 사용합니다. Class Component VS Functional Componenet Class Component Functional Component 더 많은 기능 제공 더 적은 기능 제공(리액트의 생명주기를 사용하지 못함) 더 긴 코드 양 짧은 코드 양 더 복잡한 코드 더 심플한 코드 더딘 성능 더 빠른 성능 import React, { Component } from 'react' export d..
-
React ToDo AppFrontEnd/React 2023. 11. 10. 21:30
Overview 이번 포스팅부터는 React App을 제작하고 최적화하면서 React 개념들을 정리합니다. 초기 React App에서 변경 부분들을 Git Commit 단위로 보시면 됩니다. 다음은 클래스형 컴포넌트 기반의 단순한 React ToDo App 입니다. 할 일 목록 추가, 삭제 및 완료된 일 표시가 가능합니다. 전체 소스코드 import React, { Component } from "react"; import "./App.css"; export default class App extends Component { btnStyle = { color: "#fff", border: "none", padding: "5px 9px", borderRadius: "50%", cursor: "pointer..
-
React 개발 환경 설정FrontEnd/React 2023. 11. 1. 23:00
Node.js Node.js란 Chrome V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임입니다. 즉, 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있습니다. https://nodejs.org/en 프로그램 다운로드 후 설치합니다. 설치 완료 후 터미널에서 node -v 입력하여 정상적으로 설치 되었는지 확인합니다. Visual Studio Code Visual Studio Code는 Microsoft에서 오픈소스로 개발하고 있는 소스 코드 편집기입니다. https://code.visualstudio.com/ 프로그램 다운로드 후 설치합니다. React Create-React-App을 이용해서 리액트를 설치합니다. 이렇게 하면 Babel이나 Webpack 설정이 이미 다 되어..
-
ReactFrontEnd/React 2023. 11. 1. 21:00
React React는 UI를 렌더링 하는 데 관여하는 라이브러리입니다. 그리고 화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용하며, 상태 관리를 위해서는 redux, mobx 등 여러 모듈을 사용하며, 빌드를 위해서는 webpack, npm 등등, 테스팅을 위해서는 Eslint, Mocha 등을 이용합니다. 컴포넌트(Component) React는 여러 컴포넌트를 이용해서 웹 앱을 개발하게 됩니다. 컴포넌트란 React로 만들어진 앱을 이루는 최소한의 단위입니다. 즉, React는 여러 컴포넌트 조각으로 되어 있습니다. 컴포넌트 종류 클래스형 컴포넌트(Class Components) class App extends Component { render() { return hi. ; } }..