공부기록용

🔴Payload 🔴Ducks 패턴 Payload action객체를 리듀서에게 보낸다. 그 action에는 type를 통해 동작을, payload를 통해서는 어떤걸 보낼지 보낸다. 모듈을 만들 때, 빈 페이지에 만들어야 할 것을 리스트업 하고 작성하도록 해보기 // src/redux/modules/counter.js // Action Value // Action Creator // Initial State // Reducer // export default reducer​ export const plusOne = function(){ return{ type: PLUS_ONE, } } export const minusOne = function(){ return{ type: MINUS_ONE, } } > ty..

🔴Action creator를 사용하는 이유 🔴action value 🔴action creators 💫Action creator를 사용하는 이유 휴먼에러 (오타) 방지 액션객체의 type value를 상수로 만들어놓았기 때문에, 개발툴에서 자동완성등의 보조 기능을 지원받을 수 있습니다. 그래서 의도치 않은 휴먼에러(오타)를 없앨 수 있어요. 유지보수의 효율성 증가 우리가 만든 Action Creator가 만약 100군데에서 쓰이고 있는 상태에서 혹여나 그것을 바꾸어야 하는 상황이 오더라도 단 한번의 수정으로 100군데에 모든 수정사항을 반영할 수 있습니다. 코드 가독성 모듈 파일에서 Action Creator가 일목요연하게 정리가 되어있으면, 내가 아닌 다른 개발자가 보았을 때 해당 모듈이 가지고 있는 ..

🔴모듈 🔴useSelector 🔴usedispatch 모듈 모듈이란, State의 그룹 counter.js_즉, state라는 뜻이지 // src/modules/counter.js // 초기 상태값 const initialState = { number: 0, }; // 리듀서 const counter = (state = initialState, action) => { switch (action.type) { default: return state; } }; // 모듈파일에서는 리듀서를 export default 한다. export default counter; initialState === 초기 상태값 어떤 State의 초기값을 정해주는 것 // 초기 상태값 const initialState = { nu..

Redux “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리) 리덕스는 중앙 State 관리소를 가지고 있으며, 모든 State는 이곳에서 생성된다. 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문에 전역 상태관리 라이브러리 라고 많이 표현한다. 중앙데이터 관리소에서 전역속성으로써 component에 접근 및 제어, 관리를 할 수 있게 도와주는 라이브러리이다. useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다. 리덕스 설치 yarn add redux react-redux # 아래와 같은 의미 yarn add redux yarn add react-redux..

🔴DOM 🔴Virtual DOM 가상돔 리액트(react.js)나, 뷰(Vue.js)는 가상돔(Virtual DOM)을 사용해서 원하는 화면을 브라우저에 그려준다. 자체적으로 상당히 효율적인 알고리즘을 사용해서 그려주기 때문에 그 속도가 상당하다. DOM(Document Object Model) 페이지를 문서(document)라고 하구요. 페이지를 이루는 컴포넌트를 엘리먼트(element)라고한다. DOM은 이 엘리먼트를 tree 형태(= DOM TREE)로 표현한 것이다. 트리의 요소 하나하나를 ‘노드’라고 하며, 각각의 ‘노드’는 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API를 제공한다. 💫 API - HTML 요소에 접근해서 수정할 수 있는 함수로 이해하기 가상DOM(Virtual D..

LifeCycle - 클래스형 컴포넌트에서의 라이프사이클 이해하기(우리는 클래스형 컴포넌트가 아닌 함수형 컴포넌트를 사용) 생명주기(LifeCycle) 리액트 컴포넌트는 각각 [Mount] → [Update] → [Unmount]의 과정을 거친다. 리액트 생명주기(라이프사이클)란, 컴포넌트 중심 라이브러리의 집합체라고 보시면 된다. 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드 들이 있다. Mount 컴포넌트가 생성될 때를 말한다. constructor 컴포넌트가 맨 처음 만들어 질 때 호출 생성자_역할이 필요한 경우 여기에 적어준다. getDerivedStateFromProps 부모 컴포넌트로부터 props를 전달받을 때, state에 값을 일치시키는 역할을 하는 메서드 마운트..