다같이 머리 뭉쳐서 풀던 알고리즘 주차도 끝났고 사람들이랑도 백엔드 / 프론트엔드 나눠져서 각자의 길을 가게되는 첫 시작이 된 주차였다👧🏽👦🏽
프론트엔드 기본주차
-1주차: React 개발 환경을 구성하는 방법, JSX, Component
-2주차: Component 가지고 놀기, event listener, react hook
-3주차: Redux, React-router
-4주차: keyframe, firebase, firebase + React
-5주차: React 꼼수, AWS S3로 배포하기
1주안에 5주차 까지의 강의를 다 듣기도, 물론 내 것으로 만들기에는 너무 많은 내용에 모르는거 한보따리였다...🤷🏽♂️🤦🏽♂️
다른사람들은 왜이렇게 빨리 듣고 이해도 빠른거죠...?
이번 기본주차 동안 내 발목을 가장 오래 잡고 아직도 잡는?
Redux에 관해 정말 간단히 정리를 해보자!
리덕스를 사용할때 그냥 묻따 말고 리덕스 패키지를 설치해준다!
yarn add redux react-redux
리덕스란... 어떤 컴포넌트든 어디든 전역 상태관리를 해주는 라이브러리이다!
State
상태값(데이터값)을 State 라고 한다!!Action
상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 발생하는 거!
{type: 'CHANGE_STATE', data: {...}}ActionCreator
액션생성 함수라고도 부르며 액션을 만들기 위해 사용한다!
//이름 그대로 함수예요!
const changeState = (new_data) => {
// 액션을 리턴합니다! (액션 생성 함수니까요. 제가 너무 당연한 이야기를 했나요? :))
return {
type: 'CHANGE_STATE',
data: new_data
}
}Reducer
리덕스에 저장된 상태(데이터)를 변경하는 함수이다.
액션 생성 함수를 부르고 ->액션을 만들면 ->리듀서가 현재 상태(데이터)와 액션 객체를 받아서 -> 새로운 데이터를 만들고 -> 리턴!Store
리덕스를 적용하기 위해 만든거!! 리듀서들을 모아둔다!Dispatch
액션을 발생 시키는 역할!
dispatch(action); 
- (1) 리덕스 Store를 Component에 연결한다.
- (2) Component에서 상태 변화가 필요할 때 Action을 부른다.
- (3) Reducer를 통해서 새로운 상태 값을 만들고,
- (4) 새 상태값을 Store에 저장한다.
- (5) Component는 새로운 상태값을 받아온다. (props를 통해 받아오니까, 다시 랜더링 되겠쥬?)
리엑트 두두등장