코딩연습장

출처 : 리덕스 흐름 이해하기 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이..

const [state, setState] = useState(initialState); useState라는 함수가 배열을 반환하고, 이것을 구조분해문법으로 꺼내놓은 모습. state를 변수로, setState로 state를 수정할수 있음. state가 원시데이터타입이 아닌 객체 데이터타입일 시 불변성을 유지해주어야함. 기존에 우리는 setState를 사용해서 값을 변경했다. setState(num +1) 하지만 이 안에 함수형으로 집어 넣을 수도 있다. setState((currentNum)=> {return currentNum +1) }; 뭐가다른데? 먼저 말하자면 일반업데이트방식은 batch로 처리되고, 함수형 업데이트 방식은 순차적으로 처리된다. // src/App.js import { useSt..

styled-components의 GlobalStyles 이란 무엇이고, 어떻게 사용해야 할까? 1강에서 사용한 styled컴포넌트는 특정 컴포넌트에서 사용하는 스타일에만 적용하는 방식이었다. // BlogPost.js import styled from "styled-components"; function BlogPost({ title, children }) { return ( {title} {children} ); } const Title = styled.h2` font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5; font-size: 1.5rem; margin: 0; margin-bottom: 8px; `; const Content = st..

여태까지 css를 넣기위해 css-in-JS방식을 사용했다. css-in-JS란 자바스크립트 코드로 CSS코드를 작성하여 컴포넌트를 꾸미는 방식이다. 컴포넌트를 만들고 컴포넌트를 꾸미기위해 css파일을 만들고 import하고... tag마다 className을 넣어 CSS코드를 반복 작성해야하는 불편함이 있었다. 이번에는 styled-component 패키지를 사용하여 CSS-in0JS방식으로 컴포넌트를 꾸밀수 있게 할 것이다. VScode 플러그인, 패키지 설치 yarn add styled-components styled-components 사용하기 // src/App.js import React from "react"; // styled-components에서 styled 라는 키워드를 import ..