1,2탄의 내용은 글쓴이인 제가봐도 당연히 이해가 가지 않을것 같은 부분이 많습니다.
전체적인 동작원리에 대해 정확히 모르는 상태에서
개별 부품에 대한 설명부터 하기때문입니다~
하지만 꼭 필요했던 정보들입니다. 한번 쓰윽 읽고 3탄을 보면 이해하기 쉬울겁니다.
우선 차근히 보다보면 마지막에 전체 원리 설명해줄거임 !
그러면 유레카! 하지 않을까요 ?
꼽으면 마지막부터 읽던가요
이젠 정말 배워봅시다.... Redux 3탄 레츄기릿
시작하기에 앞서서 라이브러리 설치부터 해줍시다.
터미널에서 npm install redux , npm install react redux 갈겨줍니다.
가보쟈이이~~~잇!
1. 리덕스 모듈을 만들어보자!
"src" 디렉터리에 "modules" 라는 하위 디렉터리를 생성하고 그 안으로 들어오십셔!
지금부터 파일을 하나 만들겁니다.
이 파일 안에는 액션타입 , 액션생성 함수 , Reducer 이 3개를 전부 넣을겁니다.
이런 형식을 Ducks 패턴이라고 부른다고 합니다.
액션 생성함수를 만드는것이 필수는 아니지만
만들면 가성비가 지린답니다. 나중에 우리를 무지무지 편하게 해줍니다.
저의 경우에 쇼핑몰 가다잡기 프로젝트를 하고 있었기 때문에
장바구니의 기능에 관련된 State를 Redux로 관리 해보려고 했슴다.
( 장바구니에 데이터 추가 및 삭제 , 구매수량 + - )
1-1. 액션타입 만들기!
별거 없슴다.
액션타입이라는 말 자체의 뜻 그대로
행동할 종류를 정의 한다는 느낌 ? 아무튼 고런 느낌입니다.
위 코드를 보면 내가 만들 기능의 이름들을 지어준 모습입니다~
항상 직관적으로 코드를 짜 주세요~~
맨 위부터 차례대로 [ 데이터 더하기 , 데이터 삭제 , 수량추가 , 수량감소 ] 알아보기 쉽게~
아 그리고 Ducks 패턴을 따를때 는
액션 이름 앞에 접두사 (= 파일명,리듀서명) 를 붙여줍니다.
왜 why?
나중에 모듈 파일이 여러개가 된다고 가정했을 때
다른 모듈 파일에도 똑같은 액션타입이 있을 수도 있잖아여 ?
예를들자면 이런거져
위 모듈에서는 장바구니에 물품을 추가할때를 위한 ADD_DATA 를 만들었는데
다른 모듈에 신상품에 대한 데이터 추가를 위한 ADD_DATA 가 있을 수도 있다는거져
이런저런 중복에서 구분을 하기 위해서 입니다.
모듈을 만들 당시에 물품의 수량 + , - 기능만 있었기 때문에 cartQuan 이라는 접두사를 붙였습니다.
* quantity = 수량 *
(나중에 다 고쳐야져....)
1-2. 액션 생성함수 만들기!
앞서 Redux 1탄에서 action에 대해 이미 설명했던 대로
action은 기본적으로 { type : "어쩌고저쩌고" } 의 형태를 가집니다.
근데 우리 "어쩌고저쩌고" 이 부분은 이미 만들었슴다.
바로 1-1 에서 만든 액션타입이 "어쩌고저쩌고" 부분에 들어갑니다 !
바로 이렇게요 !
ADD_DATA = "cartQuan/ADD_DATA" 이니깐 { type : "어쩌고저쩌고" } 의 형식을 만족하겠네요 ~
끝입니다. 다 만들었어요 !
우리는 액션생성 함수를 사용해서 액션타입을 담은 액션을 Reducer에게 전달 할겁니다.
"어 ? 뒤에 payload : data 이건 뭐에여 ? "
예리하군요 그건바로 추가 데이터 입니다.
이게 중요합니다.
우리가 action을 Reducer에게 전달할 때
action 안에 액션타입 뿐만 아니라 추가로 데이터를 실어서 보낼 수 있습니다.
추가 데이터를 이용해서 Reducer 함수 안에 조금 더 다양한 State변경 로직을 짤 수 있겠네용~
( 우리는 액션생성 함수를 다른 파일로 가져다 사용할것이기 때문에 export를 해줬습니다.)
( Redux 4탄에서 사용할 예정 )
1-3. Reducer 만들기!
이것도 별거 없슴다.
Reducer는 action을 받아 짜여진 로직에 따라 State를 수정한다고 했죠 ?
action 안에는 액션타입과 추가데이터가 있을 수 있구요
그 개념만 가지고 밑에 코드를 차근히 봐봅시다.
소개합니다. Reducer 입니댜~
당황하지 마세요. 뭐가 많아 보이는건 기분 탓 입니다.
위에서 아래로 천천히 풀어 해쳐 보져
첫번째로는 state = initState
두번째로는 action 이군요
" parameter가 state면 state고 initState면 initState지 state = initState 이건 뭐에여..? "
state = initState 이거는 "default parameter" 라는 parameter에서 쓰는 문법입니다.
내가 state라는 parameter 자리에 argument를 주지 않는다면
그 자리에 기본값으로 initState를 argument로 넣어주세요 ~ 라는 뜻입니다.
" initState는 어디있는데요..? "
이 선언으로 만든 State가
useState를 사용해서 만든 State와 똑같은 친구라고 보시면 되겠슴다.
저는 State명을 초기값 이라는 의미로다가 initState라고 작명했습니다.
다음 두번째 Parameter 는 익숙하죠? action입니다.
쫌더 밑에 코드까지 살펴봅시다.
Redux 2탄 - Redux의 규칙에서 설명했듯이
Reducer는 순수함수여야 합니다.
이 규칙을 지키기 위해서
spread operator 라는 스프레드 연산자를 사용했습니다.
( ... ) ← 이 친구가 바로 spread operator 입니다.
네 맞아용 쩜쩜쩜...
쉽게 설명해서 spread operator 는 괄호를 벗겨줍니다!
그리하여 위 코드의 의미는
1. state의 괄호를 벗겨주세요. → ...state
2. 그 값을 다시 [ ] 로 감싸주세요. → [ ...state ]
3. 그리고 copyState라는 변수에 저장해주세요. → let copyState = [ ...state ] ;
입니다~
이렇게하면 initState의 데이터대신
그 데이터를 똑같이 복사한 copyState를 마음껏 수정해버려도 되는것이죠~
이 모든것이 state 데이터의 직접적인 수정을 피하기 위해서,
다시말해 Reducer를 순수함수로 만들기 위함입니다.
자 천천히 보다보니 쉽네유 ~ 마무리 지으러 가보져~
switch 문이 나왔습니다.
평범한 자바스크립트의 문법이니깐 설명은 넘기고 ~
일치비교를 할 변수로 action.type이 나왔네요 ~
유레카! 번뜩한다~ 그죠 ?
이걸 보면 어떤가요 ? 더 느낌이 오시나유?
넘어온 action.type과 일치하는 case가 실행 되겠네요 ~
그리고 잘보시면 모든case와 default 는 State를 return 하고 있는것을 볼 수 있는데요~
아~ 그렇다면 Reducer는 항상 수정이 이뤄지지 않은 초기State OR 수정된 State를 return하는 함수이군요~~~
자 여기까지 Redux module을 만들어 봤습니다~
개념을 총 정리 해보자면 ~
액션타입 , 액션 생성함수 , Reducer 3가지를 작성해서 Redux module을 만드는데~
액션 생성함수로 만들어낸 액션타입과 추가 데이터들을
Reducer가 action이라는 parameter로 받아서~
State의 직접적인 변경없이 복사된State의 값을 변경하여
State를 return 해준다~
어떤가유? Redux 모듈의 대한 설명이였슴다.
이제 뭐가 남았을까유?
사실 음청 많이 남았슴다.
근데 이런 개념을 파악하고 배우게될 다음 내용들은 쉽게 느껴질 것 같네용
저도 결국에는 이해 했으니까요~
다음 Redux 4탄에서는 "Store" 등장 예정입니다.
커밍.... 수운....
끝!
'Frontend > Redux' 카테고리의 다른 글
| Redux 5탄 - State값 사용,수정하기 (0) | 2021.07.14 |
|---|---|
| Redux 4탄 - Store의 등장 (0) | 2021.07.12 |
| Redux 2탄 - Redux의 필수규칙 (0) | 2021.07.11 |
| Redux 1탄 - Redux의 흐름 (0) | 2021.07.10 |