제제링 제제링

action.type의 case이름이 좀더 세분화작업이 필요할때(예를들어 PLUS_ONE이 어떤 state를 제어하는것인지 더 정확하게 해야할때) Store내의 reducer(여기서는 module아래 counter.js파일부분이다)부분을 바꿔주면 된다. action value를 설정하도록 하자. counter.js에서 const PLUS_ONE = "PLUS_ONE";를 만들고 export const PLUS_ONE = "PLUS_ONE"; 시켜준다. App.js로 가서 import {PLUS_ONE} from "./redux/modules/counter" 해서 action value를 가져온다. return아래에 있는 type부분 PLUS_ONE으로 바꿔준다. 이렇게 상수로 설정해서 그 action v..

Dispatch의 역할: Action객체를 가지고 Store에 전달 (그리고 Store에서는 그 Action의 type에 따라서 reducer가 state를 제어한다.) counter를 이용해서 state를 변경해보자 App컴포넌트에서 return부분에 {counter.number}를 띄우고 아래에 온클릭버튼을 만든다. 이 onClick함수안에는 reducer가 받을 수 있는 주문을 넣어야한다. module폴더안에있는 counter.js로 가서 counter함수 안에있는 (action)의 action.type을 설정해준다. const initialState = { number: 0, }; const counter = (state = initialState, action) => { switch (actio..

이번에는 state의 그룹인 modules를 만들어보자. modules폴더안에 counter.js파일을 만든다. 우선 이 파일안에는 counter의 초기상태값이 필요하다. const initialState = { number: 0, }; //리듀서: state에 변화를 일으키는 함수형태 //input: state와 action 이 두개가 들어간다 action은 type과 value를 포함한다. //리듀서 함수안의 action안에있는 type에 따라서 변경하는 작업을 하게된다. const counter = (state = initialState, action) => { switch (action.type) { default: return state; } }; export default counter; co..

yarn create react-app 프로젝트명 으로 만든 프로젝트상태에서 yarn add redux yarn add react-redux 를 해줘야하는데 동시에 설치하기로한다. yarn add redux react-redux 패키지설치가 완료되면 package.json에 설치된걸 확인 할 수있다. 폴더구조를 설정한다 src폴더에 redux/config폴더를 만든다. 그 폴더안에 configStore.js파일을 만든다. redux 폴더아래로 modules폴더를 만든다. redux폴더안에는 redux관련 코드를 모두 모아놓을 것 config폴더안에는 redux설정 관련 파일 전부 모아놓을 것 configStore파일안에는 중앙 state 관리소로써 설정코드들(.js형태로)들어있을 것 modules폴더안에..

리덕스 상태 관리 라이브러리 리덕스가 필요한 이유 useState의 불편함 컴포넌트에서 생성한 state를 다른 컴포넌트를 보낼때 props를 통해서 값을 보내주었다. 중간 컴포넌트가 많을때 부모컴-자식컴으로 하나하나 props를 내려줘야하는 props drilling이라는 현상이 생겼다. 리덕스는 이럴때 중앙 데이터 관리소역할(STORE)을 해서 어떤 컴포넌트든지 이 STORE로 접근을 해서 그 state를 조회하고 갱신하게 한다. 전에 props drilling개선방법으로 useContext를 배웠었다. 그렇지만 이 context API도 마지막에 주의해야할 사항으로 context가 좋다해서 마구잡이로 쓰면 안된다고한다. 이유는 렌더링 문제때문 useContext를 사용할 때, Provider에서 제..

가상돔이란 리액트나 뷰는 가상돔을 사용해서 원하는 화면을 브라우저에 그려준다. 자체적으로 효율적인 알고리즘을 사용해서 그려주므로 속도가 빠르다. 돔이란 Document Object Model 브라우저를 돌아다니다보면 수많은 컴포넌트로 구성된 웹페이지들을 보게된다. 그 페이지를 문서(Documet)라 하고, 페이지를 이루는 컴포넌트를 엘리먼트라고 한다. DOM은 이 엘리먼트를 tree형태로 표현한 것. 트리의 요소 하나하나를 ‘노드’라고 부르고, 각각의 ‘노드’는 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API를 제공한다. (API: HTML 요소에 접근해서 수정할 수 있는 함수) DOM접근방식 // id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘. document.get..

리액트 생명주기 [Mount] -> [Update] -> [Unmount] 컴포넌트 중심 라이브러리의 집합체. 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드들이 있다. 클래스형 컴포넌트에서의 라이프사이클 이해하기 Mount 컴포넌트가 생성될 때 constructor() getDerivedStateFromProps(nextProps, prevState) render() componentDidMount() construtor 컴포넌트가 맨 처음 만들어 질 때 호출 생성자 getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드 마운트 될 때, 업데이트(리렌더링) 될 때도 호출 render 최초 moun..

렌더링 최적화 방법들 React.memo: 컴포넌트 캐싱 useCallback: 함수 캐싱 useMemo: value(함수return값) 캐싱 useMemo 사용방법 // as-is const value = 반환할_함수(); // to-be const value = useMemo(()=> { return 반환할_함수() }, [dependencyArray]); dependency Array의 값이 변경 될 때만 `반환할_함수()`가 호출된다. 그 외의 경우에는 memoization 해놨던 값을 가져오기만 한다. App컴포넌트에 다음과같은 형식을 만든다. 네비게이션바 푸터영역 import React from 'react' import HeavyComponent from './components/HeavyC..