리액트의 기초

항해2주차~

 

DOM:

html 단위 하나 하나를 객체로 생각하는 모델. 예를 들어, 'div'라는 객체는 텍스트 노드 ,자식 노드 등등, 하위의 어떤 값을 가지고 있는 것

DOM=트리구조

DOM 자체로 연산하기엔 시간이 많이 걸리기 때문에

기존 dom과 어떤 행동을 새로 그린 dom을 비교해서 바뀐 부분만 갈아끼워주는 방향으로 진행된다.

 

라이프사이클 생성 수정 삭제

 수정은 사용자의 행동으로 데이터 바뀌거나, 부모 컴포넌트가 렌더링 할 때 업데이트

props가 바뀔 때

state가 바뀔 때

부모 컴포넌트 업데이트

제거: 페이지 이동, 사용자의 행동으로 인해 컴포넌트 화면에서 사라짐

constructor(): 생성자

render(): 보여주는 곳

componentDidMount(): 생성하는 곳

componentDidUpdate():수정하는 곳

componentWillUnmount(): 삭제하는 곳

 

컴포넌트

함수형: 리액트에서 밀어 주고 있는 것

클래스형: 클래스형 잘 안씀

쉽게 말하자면 하나의 화면을 조각 낸 것

 

styled-components;

class 이름 짓기에서 해방

컴포넌트에 스타일을 적기 때문에, 간단하고 직관적임

const Button  = styled.div`

css

`

라우팅

spa: 서버에서 주는 html이 1개 뿐인 어플리케이션, 전통적인 웹사이트는 이동할 때마다 서버에서 html, css, js 를 내려준다면 spa는 딱 한번만 정적자원을 받아옴

index.js

BrowserRouter

Route path = " " 

exact 특정 라우터 주소 확인하기

링크 컴포넌트는 html 중 a 태그와 비슷한 역할을 한다.. 리액트 내에서 페이지 전환을 도와준다 

우리가 만든 메뉴처럼 route 바깥에 있는 돔요소는 페이지가 전환되어도 그대로 유지된다.

Link 컴포넌트 클릭하지 않고 페이지를 전환가능하다.

useHIstroy 훅을 사용해서 꼭 props에서 받아오지 않아도, 페이지를 전환할 수 있다.

action const LOAD = "bucket/LOAD";

initialState const initialState = {

list: ["영화관 가기", "매일 책읽기", "수영 배우기"]

}

action creator 액션 생성 함수 작성

export const loadBucket = (bucket) => {

return {type: LOAD, bucket};

}';

reducer 리듀서 작성 load 기본값, create 새로 받아온 값

export default function reducer(state = initialState, action = {}) { switch (action.type) { // do reducer stuff case "bucket/LOAD": return state; case "bucket/CREATE": const new_bucket_list = [...state.list, action.bucket]; return { list: new_bucket_list }; default: return state; } }

 

store: //configStore.js

import { createStore, combineReducers } from "redux";

import bucket from "./modules/bucket";

const rootReducer = combineReducers({ bucket });

const store = createStore(rootReducer); export default store;

서버리스: 서버를 신경쓸 필요 없게

이미 누군가가 구축해둔 서버의 일부분을 이용하는 것

 

 

리덕스:  리액트를 상태 관리를 하는 것

리액트는 데이터의 단뱡향성 때문에 데이터를 주고 받는 것이 시간이 많이 걸리기 때문에

리덕스를 통해 효율적으로 상태 관리를 할 수 있다.

리덕스 store를 component에 연결

component에서 상태변화 action 부른다

reducer를 통해서 새로운 상태 값

새 상태 값을 store에 저장

component 새로운 상태값 받아옴