프론트엔드/React
-
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. 데이터 생성 페이지..