본문 바로가기

React

 (10)
Redux로 React의 Props drilling 해결하기 *목차 - 소개 - 예제 - 요구사항에 따른 Props drilling 발생 - redux 설치 - redux 적용 예제 * React, React hook에 대한 사전 지식이 필요합니다. React란? * 바쁘신 분들을 위한 3줄 요약 1. React는 Meta(Facebook)에서 만든 Javascript 라이브러리이다. 2. JSX 문법을 지원하여 html tag를 마치 프로그래밍 하듯이 작성할 수 있다. 3. Hook, 가상 DOM을 통해 Web applicatio tyoon9781.tistory.com React Hook 알아보기 * 목차 - Intro - Hook이란? - React 18에서 제공하는 Hook의 종류 - 마치며 Intro * react18.2.0 version를 기준으로 설명합..
React Hook - useEffect * 목차 - Intro - Example - Extension 1. Dependencies - Extension 2. Connecting to an external system - Extension 3. Controlling a non-React widget - 마치며 * Hook의 기본개념을 알고 싶으시다면 React 소개부터 보시길 바랍니다 React란? * 바쁘신 분들을 위한 3줄 요약 1. React는 Meta(Facebook)에서 만든 Javascript 라이브러리이다. 2. JSX 문법을 지원하여 html tag를 마치 프로그래밍 하듯이 작성할 수 있다. 3. Hook, 가상 DOM을 통해 Web applicatio tyoon9781.tistory.com Intro value의 life cyc..
React Hook - useReducer * 목차 - Intro - Example - Extension 1. useState vs useReducer - 마치며 * React Hook useState를 알고있다는 전제 하에 글이 진행됩니다. useState 개념이 잡혀있지 않으신 분들은 이 글을 먼저 읽어주세요 React Hook - useState * 목차 - Intro - Example - Extension 1. functional update - Extension 2. object update - Extension 3. create initial state by function - Extension 4. Resetting state with a key - 마치며 * 혹시 React Hook 자체가 개념이 잡혀있지 않으신 tyoon9781...
React Hook - useState * 목차 - Intro - Example - Extension 1. functional update - Extension 2. object update - Extension 3. create initial state by function - Extension 4. Resetting state with a key - 마치며 * 혹시 React Hook 자체가 개념이 잡혀있지 않으신 분들은 이 글을 먼저 읽어주세요 React Hook 알아보기 * 목차 - Intro - Hook이란? - React 18에서 제공하는 Hook의 종류 - 마치며 Intro * react18.2.0 version를 기준으로 설명합니다. React의 특징으로는 3가지를 뽑을 수 있습니다. jsx 문법 Hook 가상 DOM 이 3가지..
React Hook 알아보기 * 목차 - Intro - Hook이란? - React 18에서 제공하는 Hook의 종류 - 마치며 Intro * react18.2.0 version를 기준으로 설명합니다. React의 특징으로는 3가지를 뽑을 수 있습니다. jsx 문법 Hook 가상 DOM 이 3가지에 대해서는 기본적으로 알고 있다고 생각하고 글을 작성하도록 하겠습니다. 만약 이 3가지의 개념이 없으신 분들은 먼저 이 글을 읽어보시길 바랍니다. React란? * 바쁘신 분들을 위한 3줄 요약 1. React는 Meta(Facebook)에서 만든 Javascript 라이브러리이다. 2. JSX 문법을 지원하여 html tag를 마치 프로그래밍 하듯이 작성할 수 있다. 3. Hook, 가상 DOM을 통해 Web applicatio tyoo..
Material UI - Tutorial Material UI는 구글의 Metarial Design을 구현하는 React UI Component Library입니다. React에서 UI Library로 antd와 같이 상위권에 존재하는 Library입니다. 이번 실습은 yarn + vite + React + Material UI로 진행해보도록 하겠습니다. 1. 환경 구성 yarn을 설치해 주도록 합시다. 환경은 아래와 같이 진행합니다. React - EC2에서 React 환경 구축하기 (2023년 version) * 목차 1. node.js, npm 설치 2. yarn, vite 설치 3. ec2 network 설정 예전에는 React 시작하려면 npm create-react-app이 대부분이었는데 webpack의 속도 issue와 vite와 ..
'React' must be in scope when using JSX 이건 보통 ESLint가 탐지한 결과물입니다. 실행에는 아무런 문제가 없을 가능성이 있습니다. 원인은 jsx file에 React가 선언이 되지 않아서 생긴 문제입니다. 이 현상을 해결하려면 import React from 'react'를 하시면 됩니다. 만약 React를 추가하지 않고 빨간 줄을 없애고 싶으신 분들은 .eslintrc.cjs의 rules에 예외처리를 하시면 됩니다. 그러면 React를 선언하지 않고도 빨간 줄의 경고를 보지 않아도 됩니다.
React - vscode에서 React개발을 위한 Prettier, ESLint설정 * 바쁘신 분들을 위한 Quick setting - package.json : 입력 후 yarn, npm install을 실행시켜야 합니다. { "name": "react_practice", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "lint": "eslint ." }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.0.28", "@types/react-dom": "^1..
React - EC2에서 React 환경 구축하기 * 목차 1. node.js, npm 설치 2. yarn, vite 설치 3. ec2 network 설정 예전에는 React 시작하려면 npm create-react-app이 대부분이었는데 webpack의 속도 issue와 vite와 같이 훌륭한 Build 도구가 있어서 요즘은 또 트렌드가 다릅니다. 요즘 트렌드에 맞춰서 환경구성하는 방법을 소개합니다. *환경 - Instance : AWS EC2 - OS : ubuntu 22.04 LTS - Terminal : bash - 언어 : javascript (Typescript는 다음 기회에...) - 패키지 관리 : yarn - build tool : vite - frontend : react18 0. EC2 instance 구축하기 인스턴스 구축은 다른 ..
React란? * 바쁘신 분들을 위한 3줄 요약 1. React는 Meta(Facebook)에서 만든 Javascript 라이브러리이다. 2. JSX 문법을 지원하여 html tag를 마치 프로그래밍 하듯이 작성할 수 있다. 3. Hook, 가상 DOM을 통해 Web application을 효율적으로 개발, 관리, rendering 할 수 있다. * 목차 1. 소개 (Introduce) 2. 언어 (Language) 3. Hook 4. 가상 돔 (Virtual DOM) 소개 (Introduce) React(React.js 또는 ReactJS)는 Component 기반으로 User interface를 구축하기 위한 Frontent Javascript 라이브러리입니다. 이 설명이 어려우신 분들은, "React란 웹페이지를..

티스토리툴바