2022.07.29 / 리액트 2주차 시작

리액트 2주차가 오늘 시작되었다

 

이번주는 어떤 내용들이 들어있을까 기대반 걱정반으로 오전 9시에 발제를 들었다

이번주에도 저번주와 비슷하게 개인프로젝트와 팀과제가 있었다

저번주에는 리액트의 제일 기초 문법 Component, Props, State를 배웠다면,

이번주에는 리액트 훅스, 리덕스, 라우터에 대해 다룬다

 

오늘은 리액트 훅스의 useState(복습)와 useEffect에 대해 공부했고,

아직 공부 진행중이지만 Redux에 대해서도 공부했다.

사실 이번주는 마음이 풀려서 그런지 저번주에 비해서 난이도가 괜찮은 느낌이 있었다(낮다는건아니고..)

저번주에는 학습자료가 조금 부족해서 사람들이 컴플레인을 많이 해서 그런지

이번주에는 학습자료만으로도 이해하는데 어려움이 없었다

 

왜 Redux를 쓸까?

매니저님이 이 질문을 하셨다

솔직히 배우라고 해서 배운 것인데, 정말 왜 하필이면 이걸 공부하라고 하셨을까 싶어서 찾아봤다.

 

 - 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.

 - 컴포넌트끼리 똑같은 상태를 공유해야할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태값을 전달하거나 업데이트할 수 있다.

 - 규모가 큰 경우에는 리덕스를 사용하여 작업하는것이 상태를 체계적으로 관리할 수 있고, 코드의 유지 보수성을 높여주고, 작업 효율을 극대화해준다.

 - 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 관리해준다.

 

리덕스 장점

1) 단방향 모델링(한가지 방향으로만 바뀐다)임. action을 dispatch 할때마다 기록(history)이 남아 에러를 찾기 쉽다. 타임머신 기능을 사용할 수 있다.

2) 상태의 중앙화 : 스토어(Store)라는 이름의 전역 자바스크립트 변수를 통해 상태를 한 곳에서 관리하는데, 이를 중앙화라 함. 전역 상태를 관리할때 굉장히 효과적이다.

3) Redux는 상태를 읽기 전용으로 취급한다. 상태가 읽기 전용이므로, 이전 상태로 돌아가기 위해서는 그저 이전 상태를 현재 상태에 덮어쓰기만 하면 된다. 이런 식으로 실행 취소 기능을 구현한다.

 

리덕스 단점

1) 아주 작은 기능이여도 리덕스로 구현하는 순간 몇 개의 파일(액션등을 미리 만들어놔야함)들을 필수로 만들어야하여 코드량이 늘어난다.

2) 타임머신 기능을 사용하려면 불변성 개념을 지켜야 사용할 수 있으므로 매번 state라는 객체를 만들어줘야 한다

3) Redux는 상태를 읽기 전용으로 취급할 뿐, 실제 읽기 전용으로 만들어주지는 않는다. 그래서 상태를 실수로 직접 변경하지 않도록 항상 주의해야 한다. 이를 예방하기 위해 Immutable.js같은 라이브러리도 존재한다.

4) 다른 것 다 필요 없고 상태 관리를 중앙화하는 것만 있어도 된다면 Context API 를 사용한다.