반응형

Front-End/React 6

[React] 리액트 redux 예제를 통해 알아보기

① React redux 란 ? Flux 개념을 바탕으로 하여 State 관리 라이브러리이다. 그래서 React는 컴포넌트에서 관리를 하지만 Redux 라이브러리를 사용하게 된다면 store에서 상태를 관리를 해주기 때문에 React Component에서 보여주기만 하는 용도로 사용이 되고 있다. ② redux 장점 웹 사이트 상태관리를 고민할 필요가 없다. state에서 쉽게 저장하고 불러올 수 있다. 읽기 전용으로만 취급하기 때문에 이전 상태로 돌아가고 싶다면 덮어쓰면 된다. 상태 변경을 전송할 수 있도록 자바스크립트 객체로 구성을 강제로 부여한다. ③ redux 단점 강제하는 방식때문에 반대로 코드가 복잡해 질 수 있어서 개발자에게 제약이 발생한다. ④ redux 예제 ※ 1. 우선 라이브러리를 다..

Front-End/React 2021.06.20

[React] 리액트 코드분할 이유 및 예제

① React 코드 분할을 하는 이유는? 사용자가 웹 페이지를 접속을 하여 main.js 파일이 로드가 된다면 프로젝트 파일이 크면 클수록 로드하는 시간이 많이 걸리고 퀼리티가 저해될 수 있기 때문이다. 그래서 main.js를 여러 파일로 나누어서 용량을 줄일려고 코드 분할을 한다. ② 코드 분할의 방법은? bundler가 설치되어야 한다. 여기서 bundler는 파일을 하나로 병합한 번들 된 파일을 웹 페이지를 포함해 한번에 전체 앱을 로드시켜준다. ③ bundler 예제 App.js import Top from './components/Top'; import Bottom from './components/Bottom'; import './App.css'; import { useState } from ..

Front-End/React 2021.06.19

[React] 리액트 JSX 문법정리 및 const, let, var 차이를 알아보자

JSX 문법 정리 ① return에는 하나의 엘레멘트만 담을 수 있다. ② const, let, var 1. const : 한번 선언된 상수는 다시 재정의 할 수 없다. const good='good'; hello='change good'; // 오류 const good ='good!'; { const good = 'inner good!'; console.log(good); // inner good! } console.log(good); // good! 괄호안에 good을 선언하였고 const의 scope은 괄호 블록 안에 있기 때문에 괄호를 벗어나 바깥에 good 상수를 선언할 수 있다. 2. let : 선언해도 값이 재정의가 가능하다. let good ='first good'; // first goo..

Front-End/React 2021.06.16

[React] 리액트 회원가입 및 로그인 컴포넌트 구성

[React] 리액트 설치방법 및 사용방법을 알아보자 ① Node.js 다운로드 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ② VScode 다운로드 Visual Studio Code - Code Editing. Redefined Visual Studio Code is.. soulno.tistory.com 설치와 사용방법을 어느정도 알았다면 ① React 이름규칙 이름 규칙 : CM + 태그명 이름 규칙 : Join + CM + 태그명 이름 규칙 : Join + CM + 태그명 + ? ② CMButton.js import React from 'react'; import styled fr..

Front-End/React 2021.06.16

[React] 리액트 설치방법 및 사용방법을 알아보자

① Node.js 다운로드 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org ② VScode 다운로드 Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstu..

Front-End/React 2021.06.14
반응형