코딩연습장

리덕스깔기 yarn add redux react-redux 스타일드컴포넌트깔기 yarn add styled-components 리액트라우터돔 깔기 yarn add react-router-dom 폴더설정 (https://codingpracticenote.tistory.com/89) 라우터 돔 했던 거 파일배치 configStore설정 //src/redux/config/configStore.js import { createStore } from "redux"; import { combineReducers } from "redux"; /* 1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 리덕스를..

여태까진 +1, -1을 하는 기능을 만들었습니다. 그런데 1로 숫자가 정해진 것이 아니라 원하는 숫자만큼을 더하거나 빼는 기능을 만드려면 어떻게 해야할까요? 우리가 이전까지 만든 기능은 리듀서에게 더해 라고만 말을 했을뿐입니다. 1이라는 임의적 숫자를 더해서 리듀서에게 액션객체를 보냈죠. 하지만 이제 N을 더해 라고 N을 같이 리듀서에서 보내야합니다. 지금까지는 ~을 이라는 목적어가 없었다면, 이제 그 목적어가 생긴것이고 목적어도 액션객체에 담아 같이 보내줘야 할 것입니다. 이렇게 액션객체에 담아 보내주는 그 것을 우리는 payload라고 합니다. 만약 10을 더해라는 것을 리듀서에게 보내고 싶으면 액션객체에 payload를 같이 담아주는 것입니다. payload를 이용해서 기능 구현 작업순서 사용자가 ..

만약 우리가 저번에 작성했던 action type들의 value를 변경하려면 어떡할까요? PLUS_ONE, MINUS_ONE이라는 밸류대신 이 액션객체가 counter 모듈안에있다는 것을 강조하기위해 counter/PLUS_ONE, counter/MINUS_ONE이라는 value로 각각 바꾸고 싶다면? 리듀서, App.js의 dispatch부분 총 4곳을 변경해야합니다. 그런데 4군데가 아닌 100군데를 변경해야한다면? 곤란할 겁니다. // 추가된 코드 👇 - 액션 value를 상수들로 만들어 줍니다. 보통 이렇게 한곳에 모여있습니다. const PLUS_ONE = "PLUS_ONE"; const MINUS_ONE = "MINUS_ONE"; // 추가된 코드 👇 - Action Creator를 만들어 줍..

출처 : 리덕스 흐름 이해하기 1. View에서 액션이 일어난다. 2. dispatch에서 action이 일어난다. 3. action에 의한 reducer함수가 실행되기 전에 middleware가 작동한다. 4. middleware에서 명령내린 일을 수행하고 난 뒤, reducer함수를 실행한다. (3, 4번은 아직 몰라도 됨!) 5. reducer의 실행결과 store에 새로운 값을 저장한다. 6. store의 state에 subscribe하고 있던 UI에 변경된 값을 준다. 리덕스에서 값의 수정은 리듀서에서 일어난다. 만약 counter모듈에있는 number에 +1을 하고 싶다면 어떻게 해야할까? 1. 리듀서에게 보낼 number을 +1하라는 명령을 만든다. 2. 명령을 보낸다. 3. 리듀서에서 명령..

redux : 리덕스와 관련된 코드를 모아놓을 폴더 config : 리덕스 설정과 관련된 파일들을 놓을 폴더 configStore : '중앙 State 관리소'인 Store을 만드는 설정 코드들이 있는 파일 modules : 우리가 만들 State들의 그룹이다. 예를들어 투두리스트를 만들면 투두리스트에 필요한 State들이 모두 모여있을 todos.js를 생성하는데, 이 todos.js파일이 곧 하나의 모듈이 된다. // src/modules/counter.js // 초기 상태값 const initialState = { number: 0, }; // 리듀서 const counter = (state = initialState, action) => { switch (action.type) { default:..

yarn add redux react-redux redux, react-redux 두개 깐다는 뜻 redux : redux react-redux : react와 redux를 연결시켜주는 패키지 설정코드 //src/redux/config/configStore.js import { createStore } from "redux"; import { combineReducers } from "redux"; /* 1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요. */ /* 2. combineReducers() 리덕스는 ..

어떤 컴포넌트에서 State를 생성하고 다른 컴포넌트로 보낼때 우리는 props를 통해 부모 -> 자식으로 보내줍니다. 위 사진과같이 단지 옮겨주고 싶을 뿐인데 그 사이 컴포넌트를 거쳐 옮겨야하는 불편함이 있습니다. 또한 반드시 부 -> 자 순으로만 props를 옮길 수 있었습니다. 그런 불편함을 겪지 않기위해 redux와 같은 전역상태관리 프로그램을 사용합니다. 리덕스를 사용하면 State를 공유하고자할 때 부-자 관계가 아니어도 되고, 중간에 의미없는 이동도 필요 없습니다. Global State(전역상태)와 Local State(지역상태) 지역상태란? : 컴포넌트에서 useState를 사용해 생성한 State이다. 전역상태란? : Global State는 컴포넌트에서 생성되지 않고, 중앙화된 특별한..

StrictMode는 개발환경에서만 활성화되고, 프로덕션빌드에는 영향을 끼치지않는다. application내 어디에서든 strict모드를 활성화할 수 있다. import React from 'react'; function ExampleApplication() { return ( ); } 위 코드에서 Header과 Footer은 Strict모드 검사가 이루어지지않고 ComponentOne, ComponentTwo만 받고, 그 둘의 자손까지 모두 검사가 이루어진다. StrictMode는 아래와 같은 부분에서 도움이 된다 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 레거시 문자열 ref 사용에 대한 경고 권장되지 않는 findDOMNode 사용에 대한 경고 예상치 못한 부작용 검사 레거시 context A..

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용한다. import React, { useEffect } from "react"; 리액트 내장기능이어서 따로 설치하지않고 import만 상단에 작성하면 된다. // src/App.js import React, { useEffect } from "react"; const App = () => { useEffect(() => { // 이 부분이 실행된다. console.log("hello useEffect"); }); return Home; }..

불변성을 지켜야하도록 만들어진 이유 1. 불변성을 지켜주면 이전 할당되었던 메모리 값이 그대로 있기 때문에 특정 행동을 취소하고 재실행하는걸 단순하게 구현할 수 있기 때문에 2. 참조하고 있는 객체의 주소가 변경된 것을 감지하는 것이 변화를 감지하는데 가장 확실한 방법이기 때문에 3. 순수 컴포넌트는 입력된 값을 받아 그대로 출력한다. 이경우 데이터값은 변경되지 않았지만 새로운 객체가 생성되기 때문에 리렌더링을 하는 시기를 결정할 수 있다. 4. 원본데이터가 변경될 경우 이 원본을 참조하는 다른 객체에서 오류가 발생할 수 있기 때문에 5. 객체의 참조 주소값의 변경유무만 확인하여 계산 리소스를 줄여 효율적으로 상태를 업데이트 할 수 있기 때문에 useState의 방식이 두가지인 이유 즉 batching이..