Today I Learn # 35
개발/공부 진행 및 완료상황, 무엇을 더 하면 좋을지
React-redux 공부중!
오늘 새로 배운 내용
styled component 만들기
yarn add styled-components
import styled from "styled-components";
const StBox = styled.div``;
(styled. 뒤에는 html의 태그)
React Hooks (useState)
useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줍니다.
const [state, setState] = useState(initialState);
함수형 업데이트 방식
// 기존에 우리가 사용하던 방식
setState(number + 1);
// 함수형 업데이트
setState(() => {});
setNumber(number + 1); // 첫번째 줄
setNumber(number + 1); // 두번쨰 줄
setNumber(number + 1); // 세번째 줄
=> +1씩 증가
setNumber((previousState) => previousState + 1);
setNumber((previousState) => previousState + 1);
setNumber((previousState) => previousState + 1);
=> +3씩 증가
why? 일반 업데이트 방식은 버튼을 클릭했을 때 첫번째 줄 ~ 세번째 줄의 있는 setNumber가 각각 실행되는 것이 아니라, 배치(batch)로 처리합니다. 즉 우리가 onClick을 했을 때 setNumber 라는 명령을 세번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행
반면에 함수형 업데이트 방식은 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행시킵니다. 0에 1더하고, 그 다음 1에 1을 더하고, 2에 1을 더해서 3이라는 결과가 우리 눈에 보이는 것
<useEffect>
useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
즉 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다거나 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶을때 useEffect를 사용
import React, { useEffect } from "react"; 붙여줘야함
<의존성 배열>
“이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 것
// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
// 실행하고 싶은 함수
}, [의존성배열])
의존성 배열에 빈 배열 [ ] 을 넣은 경우
-> useEffect를 사용하는데, 어떤 함수를 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을 [ ] 빈 상태로 넣으면 됩니다.
의존성 배열에 값이 있는 경우 ex) value를 넣었을 때
-> value는 state이고 우리가 input을 입력할 때마다 그 값이 변하게 되니 useEffect도 계속 실행
<클린업>
떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행
ex)
// src/App.js
import React, { useEffect } from "react";
const App = () => {
useEffect(()=>{
// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.
return ()=>{
// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수를 넣어주세요.
}
}, [])
return <div>hello react!</div>
};
export default App;
< Redux >
전역 상태관리 라이브러리(중앙 state 관리소를 사용할 수 있게 도와주는 패키지)
리덕스를 사용하면State를 공유하고자 할때 부-모 관계가 아니여도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 됩니다. 그리고 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 됩니다
Local state (지역상태)
컴포넌트에서 useState를 이용해서 생성한 state
Global state (전역상태)
리덕스에서 생성한 State
컴포넌트에서 생성x, 중앙화 된 특별한 곳에서 State들이 생성 즉 중앙 state 관리소
중앙 State관리소에서 State를 생성하고, 만약 어떤 컴포넌트에서 State가 필요하다면 컴포넌트가 어디에 위치하고 있든 상관없이 State를 불러와서 사용 할 수 있게 됩니다(전역 상태 관리)
< 리덕스 설정 >
리덕스 설치
yarn add redux
yarn add react-redux
-> yarn add redux reect-redux 로 한번에 써도됨
폴더구조생성
1. `src` 폴더 안에 `redux` 폴더를 생성
2. `redux` 폴더 안에 `config`, `modules` 폴더를 생성
3. `config` 폴더 안에 `configStore.js`파일을 생성합니다.
- `redux` : 리덕스와 관련된 코드를 모두 모아 놓을 폴더 입니다.
- `config` : 리덕스 설정과 관련된 파일들을 놓을 폴더 입니다.
- `configStore` : “중앙 state 관리소" 인 Store를 만드는 설정 코드들이 있는 파일 입니다.
- `modules` : 우리가 만들 State들의 그룹이라고 생각하면 됩니다.
모듈의 구성요소
(1) initialState === 초기 상태값
예)
// 초기값이 0
const initialState = 0;
// 초기값이 0이 있는 배열
const initialState = [0];
// 초기값이 number = 0, name = '석구'인 객체
const initialState = {
number: 0,
name: '석구'
};
(2) Reducer === 변화를 일으키는 함수
예)
// 리듀서
const counter = (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
};
(3) 카운터 모듈을 스토어에 연결하기
configStore.js로 이동해서 아래 코드를 추가
import counter from "../modules/counter"; 추가하고
combineReducers안에 counter: counter, 추가하면됨
< 스토어와 모듈 연결 확인하기 >
(1) useSelector = 스토어 조회
// 1. store에서 꺼낸 값을 할당 할 변수를 선언합니다.
const number =
// 2. useSelector()를 변수에 할당해줍니다.
const number = useSelector()
// 3. useSelector의 인자에 화살표 함수를 넣어줍니다.
const number = useSelector( ()=>{} )
// 4. 화살표 함수의 인자에서 값을 꺼내 return 합니다.
// 우리가 useSelector를 처음 사용해보는 것이니, state가 어떤 것인지 콘솔로 확인해볼까요?
const number = useSelector((state) => {
console.log(state)
return state
});
컴포넌트에서 스토어를 조회할 때
react-redux`에서 제공하는 `useSelector` 라는 훅을 사용
<Action Creator>
- 액션객체를 만드는 함수를 `Action Creator`(액션 크리에이터)라고 한다.
- `Action Creator`는 모듈 파일안에서 생성된다.
- 액션객체의 type value로 상수로 생성해서 관리한다.
Action creator을 사용하는 이유
1. 휴먼에러 (오타) 방지
2. 유지보수의 효율성 증가
3. 코드 가독성
회고
- React-redux 강의를 다시 들으면서 복습중.. 계속해서 새로운걸 익혀야되서 빡세다... 하나씩 쌓여가는걸까 하나씩 들어왔다 나가는걸까.. ㅋㅋㅋ
To-Do List
- React 심화강의듣기