TIL DAY 11 리액트 숙련주차

리덕스로 To Do List를 만드는 과정을 하고 있는데

신기하게도 전 주보다는 할 만 했다.

여전히 척척 해나가진 못하긴 하지만

적어도 어떤 과정을 거쳐서 진행이 되겠구나 싶었다.

3일 정도는 계속 학습자료를 참고해서

공부하다가 과제를 시작했다.

아예 손도 못대던 전 주에 과제와는 다르게

이번에는 생각보다 수월하게 작업이 진행되었고

여전히 문제가 되는 것은 생각을 코드로 작성할

실력이 안된다는 것이었다.

그걸 모른다는 문제를 깨닫고나니 벽을 조금씩 깨어나가는듯 하다.

 

---

 

오늘은 전역상태관리가 무엇인지와 리덕스를 다루는 방법에 대해 정리해보려고 한다.

 

---

 

*전역상태관리

전역상태관리는 부모컴포넌트에서 자식컴포넌트로 필요한 정보를 전달해주는 방식과 달리

전역으로 한군데에서 정보를 뿌려주어서 PropsDrilling의 불편함을 없앨 수 있는 불필요한 props를 없애기위해서 사용한다. 리덕스 등의 라이브러리를 이용하여 가능하다. 

 

*리덕스의 중요한 키워드

• Action 
  : state에 변화를 일으킬 때 참조하는 객체 (어플리케이션으로부터 온 데이터를 스토어에 전송하는 정보의 페이로드이다. / 자바스크립트 객체 / type 프로퍼티 필수)
  
• Action creator
  : 파라미터를 받은 뒤 액션 객체형태로 주는 역할
  
• initialState
  : 기본 State(초기 값)
  
  
• Store(중앙 State 관리소)생성
  : 서버에서 실행중인 리덕스 어플리케이션의 상태와 클라이언트의 상태를 맞추기 위해 상태를 하이드레이팅하는 데 유용하다.
  
  
• UseDispatch
  : useDispatch객체를 dispatch로 재선언한 후, dispatch 변수를 활용하여 액션을 호출할 수 있다.
  실행할 액션함수명을 적은 후, 해당 액션함수의 파라미터에 변경할 상태값을 추가하고 dispatch로 감싸면 해당 액션을 호출하는 dispatch함수가 완성된다. 파라미터 값에는 문자열 뿐만 아니라, true / false, 정수, json 타입 등 다양한 타입의 내용을 넣을 수 있다.
  
  
• UseSelector
  : 컴포넌트에서 스토어를 구독해주는 역할! 리덕스 스토어의 상태값이 바뀐 경우 (버튼 클릭 등의 이벤트를 통해 액션이 실행되어 상태값이 변경된 경우) 바뀐 스토어의 상태값을 다시 가져와 컴포넌트를 렌더링 시킨다.
  
  
• reducer
  : state에 변화를 일으키는 함수 parameter를 두 개 받는데 첫 번째는 현재 state, 두 번째는 액션 객체를 받는다. 
  즉 실질적으로 변화를 일으키는 함수 (상태와 액션을 참고해서 새로운 상태를 반환함.)

 

너무 좋았던 참고 사이트

 

데이터 흐름 (Data flow) | TechWell (wooritech.com)

데이터 흐름 (Data flow) | TechWell