프론트엔드
-
08. Redux(리덕스)프론트엔드/React 2020. 2. 4. 16:37
# What? 이게 뭔데? - 상태관리 라이브러리 * 용어 - Dispatch(디스패치): 액션을 발생 시킴 - Action(액션): 상태에 어떤 변화를 일으킴 - Reducer(리듀서): 현재의 상태와, 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환 - Store(스토어): 현재의 앱 상태와, 리듀서를 담고 있고, 추가적으로 상태관리를 돕는 내장 함수들이 내재되어있음 => 디스패치로 액션을 일으키면 리듀서가 전달 받은 후 새로운 상태를 만들어내어 스토어에 저장되어있는 상태값을 업데이트 # Why? 이걸 왜 쓰는데? - 어떤 컴포넌트에서든(전역적으로) 사용하고싶은 state가 있다면 Redux(리덕스)라는 state 관리 라이브러리를 사용. ex. 유저 정보 # How? 어떻게 쓰는데? * 초기..
-
07. 리액트 라우터(React Router)프론트엔드/React 2020. 2. 4. 15:16
# What? 이게 뭔데? - 리액트 라우팅 라이브러리 # Why? 이걸 왜 쓰는데? - 리액트로 만든 Single Page Application에서 새로고침 없이 페이지간 이동을 하려면 이게 필요함. # How? 어떻게 쓰는데? $ npm install react-router-dom 1. BrowserRouter - 페이지 전환을 할 영역 겉을 BrowserRouter로 감싸야함 (BrowserRouter로 감싸진 영역 내에서만 Link, Route 등을 쓸 수 있음) @ App.js import React from 'react'; import {BrowserRouter} from "react-router-dom"; function App() { return ( {/* 여기에 페이지들 들어갈 예정 */..
-
06. API 통신프론트엔드/React 2020. 1. 25. 01:00
# What? 이게 뭔데? - Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. => 백엔드랑 소통하는 통신소라 생각하면 편함. 프론트 : 백엔드야 사용자가 할일 저장하고싶다고 나한테 이런 데이터를 입력해줬어 백엔드 : 어어 그래 데이터에 문제 있는지 살펴보고 문제 없으면 데이터베이스에 저장할게. 문제 없네? 저장했어 이게 저장한 데이터야 프론트 : 어 고마워 나도 사용자한테 저장 잘됐다고 알려주고, 할일 목록에 할일 추가해놓을게 이런 대화를 API를 통해서 함. # Why? 왜 쓰는데? - 왜 이런 소통을 API를 통해서 하나..
-
05. Event프론트엔드/React 2020. 1. 23. 22:32
# What? 이게 뭔데? - 마우스 클릭, 키보드 입력 등의 사용자 인터랙션 # Why? 이걸 왜 쓰는데? 사용자가 삭제 버튼을 눌렀을 때, 회원가입 내용을 입력한다던지 등 사용자의 행동에 반응해야할 때 사용. # How? 어떻게 쓰는데? - on이벤트명={실행할 함수} const increase = () => { alert("인간적으로 증가했다 치자"); }; 증가 * 자주 사용되는 이벤트 종류 1. onClick - 마우스 클릭 2. onSubmit - 입력폼(form) 제출 3. onChange - input, select의 입력값 변화 # Practice 연습 1. +, - 버튼을 눌러 age값 변경해보기 @ Example.js import React, {Component, useState, u..
-
04. 상태관리(state)프론트엔드/React 2020. 1. 23. 18:55
# What? 뭔데 이게? - 컴포넌트가 갖는 상태 # Why? 왜 배우는데? - 데이터 변경됨에 따라 컴포넌트 모습이 변하길 원한다면 state를 사용해야함. (in-diary.com 일기장 생성을 예시로 보여드리자) # How? 어떻게 쓰는데? - state 변수를 선언하고, 변경하기 * 배열값 초기화 쉽게 하는 방법 알고가기 - 바나나, 사과, 블루베리의 당도를 담고 있는 배열이 있고 이 당도들을 각각의 과일 변수에 나눠 담고 싶을 때. 1) 기존 방식 let sweats = [50, 30, 100]; // 바나나, 사과, 블루베리순으로 당도값이 담겨 있다고 가정 let banana = sweats[0]; let apple = sweats[1]; let blueberry = sweats[2]; 2)..
-
03. props프론트엔드/React 2020. 1. 17. 14:14
# What? props가 뭔데? - 부모 컴포넌트로부터 받은 데이터 # Why? 이걸 왜 써? - 부모 컴포넌트로부터 받은 데이터를 토대로 컴포넌트를 만들어야할 때가 있음. . # How? 어떻게 쓰는데? @ 부모컴포넌트 import React from 'react'; import 자식컴포넌트 from './자식컴포넌트'; function 부모컴포넌트() { let 전달해줄 변수 = "test"; return ( // 전달해줄 변수명이 pageName이라 해도, 전달받을때 쓸 변수명을 test라 지으면 // 자식컴포넌트에서는 해당 변수를 test라는 변수명으로 사용하게됨 // 보통 똑같이 지음 ); } export default 부모컴포넌트; @ 자식컴포넌트 import React, {Fragment}..
-
02. 컴포넌트프론트엔드/React 2020. 1. 17. 11:41
# What? 그래서 이게 뭔데? - 데이터를 input으로 받고, 데이터들을 이용하여 UI를 어떻게 보일지 정의한 Element를 output으로 내뱉는 함수 (그냥 하나의 부품이라 생각하면 됨) # Why? 이걸 왜 쓰는데? - 컴포넌트 기반으로 요소들을 부품화하여 조립하는 식으로 코딩을 하면 유지보수에 용이 # How? 어떻게 쓰는데? 1. 컴포넌트 생성해보기 import React from "react"; // 최신문법버전 const [컴포넌트명] = () => { return ( ); }; export default [컴포넌트명]; // 기존문법버전 function [컴포넌트명](){ return ( ); }; export default [컴포넌트명]; - 예전에는 용도에 따라 함수형 컴포넌트로..
-
01. 리액트프론트엔드/React 2020. 1. 14. 21:52
# What? 그래서 리액트가 뭔데? 페이스북에서 제공하는 프론트엔드 라이브러리 # Why? 이걸 왜 쓰는데? 1. 유지보수 용이 컴포넌트 기반 개발을 하기때문에 요소들을 부품화하여 재활용하고, 재조합하기 좋음. -> 재활용을 잘하면 1) 같은 요소 재코딩 x 2) 수정할 컴포넌트만 수정(해당 컴포넌트를 쓴 페이지들을 다 고쳐줄 필요 x) 2. 효율적인 리렌더링 데이터 변경 -> 전체 UI를 가상 DOM(페이지 view단 소스들)에 리렌더링 -> 기존 DOM과 비교해 바뀐 부분만 실제 DOM에 적용(전체 리렌더링 X, 부분 리렌더링 O) 기존 방식(Multi Page Application) 개선된 방식(Single Page Application) 새로운 데이터 생성, 삭제, 수정 1. 데이터 생성 페이지..