Script

Action Creator Action Creator란? 만약 우리가 액션객체의 value를 변경할 일이 있다고 가정해보자. 이를 수동으로 일일히 바꿔주게 된다면 어떨까. 하면 되지 라고 생각한다면, 수정해주어야 할 부분이 100군데라도 그렇게 생각할 수 있을까. 이를 해결해 주는 것이 Action Creator이다. Action Creator 만들기 // src/redux/modules/counter.js const PLUS_ONE = "PLUS_ONE"; // value는 상수로 생성 // 액션객체를 반환하는 함수 생성 // export 가 붙는 이유는 plusOne()는 밖으로 나가서 사용될 예정이기 때문이다. export const plusOne = () => { return { type: PLU..

카운터 모듈의 state 수정 기능 만들기 (+1 기능 구현하기) counter 모듈의 state 값을 변경하려면? 우리가 Redux를 배우기 전에는 setState를 이용해서 +1를 해주었을 것이다. Redux를 배우고 나서는 말했듯이 이 setState에 해당하는 것이 모듈의 리듀서 부분에서 일어난다. 그 순서를 우선 살펴보자. 리듀서에게 보낼 number를 +1 하라는 "명령"을 만든다. 명령을 보낸다. 리듀서에서 명령을 받아 number +1을 한다. 리듀서에게 보낼 "명령" 만들기 위와 같이 리듀서에게 numer에 +1을 하라는 명령을 만들어야 한다. 우리는 이를 액션 객체라고 부른다. ( 이런 상황에 맞는 액션을 취해줘 라고 전달하는 의미) 액션 객체는 반드시 type 이라는 key를 가져야 ..

1.리덕스가 필요한 이유 컴포넌트에서 컴포넌트로 state를 보내기 위해서는 반드시 부모 자식 관계가 되어야 한다는 점 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내려면 반드시 사이에 부모 컴포넌트가 있어야 하는 점 앞서 진행한 과제로 인해서 뼈저리게 느꼈다. 부모 컴포넌트에서 자식컴포넌트로 밖에 값을 보내지 못하는점. 진짜 셀수가 없다. 이미 지난 주 과제하면서 많이 느꼈다. Redux는 위 단점들을 모두 상쇄시킨다. 2. Global state와 Local state Local state란? 컴포넌트 내에서 useState를 이용해서 생성한 state이다. 좁은 범위 안에서 생성된 state라고 생각하면 된다. Global state란? state들을 관리하는 중앙 state 관리소 라고 할 수 있는..

1.useEffect useEffect란? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 에를 들어 어떤 컴포넌트가 화면에 보여졌을 때 무언가를 실행하고 싶다면? 혹은 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? 이떄 useEffect를 사용한다. ++useEffect도 useState와 마찬가지로 훅이기 때문에 import해서 사용한다. useEffect 사용 // src/App.js import React, { useEffect } from "react"; const App = () => { useEffect(() => { // 이 부분이 실행된다. console.log("hello useEffect"); }); retu..

1. UseState useState는 지난주에 지겹도록 사용한 바 있다. const [state, setState] = useState(initialState); 복습차 한번 짚고 넘어가보자. 위 코드는 state라는 변수에 초기값으로 initialState가 들어있는 상태이다. 여기서 setState의 값을 전달받게 되면, state의 초기값은 사라지고 setState 값이 들어가게 된다. 또한 state가 원시 데이터 타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줄 필요가 있다고도 살펴봤다. 2.함수형 업데이트 setState를 사용하는 방식 중 함수형으로 값을 업데이트 하는 것을 뜻한다. // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 se..

1. styled-components란? styled-components는 우리가 리액트에서 CSS -in - JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지이다. 앞서 배운 class Name을 설정하여 스타일링 하는 것 보다 더 편하고 더 용이하다는 장점이 있다. 2. styled-components 준비 VScode 플러그인 설치 vscode의 플러그인 페이지에서 vscode-styled-components를 검색하여 설치해주도록 하자. 이 플러그인을 설치해야만 styled-components 안에서 스타일 코드를 편하게 작성할 수 있다. yarn에서 styled-components 설치 yarn add styled-components 3. styled-components 사용하기 사용예시 /..