꿀팁 저장소

[redux]

최신 웹 기술들을 접하는걸 즐기는 사람이라면 누구나 한번쯤은 들어봤을 법한 라이브러리다.

도대체 redux란 무엇일까? 사람들이 왜 redux에 열광하는 것일까?

난 react가 정말 완벽하다고 생각하고 사용하고 있었으며, redux는 불필요한 것으로 치부하고 배우지 않고있었다.

사실은 도망친 것일수도 있다.

왜 이렇게 배울게많은거야? 또 새로운 거야? 하고말이다.

(이미 나온지 한참됐지만)

그치만 최근 개발하여 론칭한 대규모의 앱인  '공무원 시험일정, 공시생 SNS: 공투공' 을 만들며 그 필요성을 절실히 느끼고 익히게 되었다.

아니, 익히고 있는 중이다.

경험을 바탕으로 말하자면, 정말 작은 프로젝트에서까지 redux를 적용할 필요는 없을것 같다

(경우에 따라서는 필요할수도)

하지만, 규모가 커질것으로 예상되거나 큰 규모의 프로젝트를 계획하고있다면 redux는 확실히 도입해볼법한 라이브러리다.

그렇다면 도대체 redux란 무엇인가?

간단히 검색해보면 알수있듯 상태 관리 라이브러리다.

상태 관리란 무슨 의미일까?

프로젝트 내에는 다양한 오브젝트들이 있는데 그 안의 변수, 메서드 등의 현재값을 상태라고 본다.

그렇다면 상태를 관리한다는 것은 무슨 의미일까?

프로그램 내에는 다양한 범위(전역, 지역, 지역의 지역...)의 변수, 메스드 등이 존재한다.

이런 상황에서 특정영역A의 변수값a, 특정영역B의 변수값 b가 있을 때, b의 변화에따라 a의 값을 바꿀수 있겠는가?

생각해 본적 있는가? 있을것이다. 물론 없을수도 있다. 지금 생각해보면 된다.

잠시만 생각해보면 전역으로 모든 값을 관리하면 가능하다는 결론을 도출할 수 있다.

이런 생각에 기반해서 등장한 것이 상태관리 라이브러리다.

유용하고 유명한 상태관리 라이브러리로는 redux, mobx등이 있다.

이 중에서 redux를 알아볼 것이다. 얕지만 누구나 이해할 수 있는 수준에서.

redux를 사용함에 있어 알아둬야할 사항을 먼저 얘기하고 시작한다.

1. redux는 라이브리리이다. 따라서, react와 함께는 물론 어느 환경에서도 유연하게 적용할 수 있다.

2. redux의 등장배경을 떠올려보면 당연한 이야기이지만, 프로젝트 내에는 단 하나의 'store'만이 존재한다.

3. '상태'는 immutable하다. 겁먹을 필요없다. 그저 '읽기전용' 이라고 생각하면 된다. 상태에 대하여 직접 입력, 수정 등을 행하지 않는다.

4. 앞으로 알게될 'reducer'는 '이전의 상태'는 건드리지 않고 '다음의 상태'값만을 생성해서 반환한다.(순수한 함수)

이제, 다음 글에서 본격적으로 redux를 어떻게, 어떤 구조를 이루어 써야하는지 알아본다.

React의 Ref

Javascript의 사용자라면 this에 대해 많은 고민을 해봤을것이다.

this는 대체 지금 무엇을 가리키고 있는가는 초보개발자라면 한번쯤 고민해본 문제이며 이 때문에 시련을 겪어보았을것이다.

React에서의 Ref는 this의 연장선 상에 있다고 본다.

아주 쉽게 Ref에 대해 얘기한다면 자식 클래스의 변수, 메서드 등의 프로퍼티들을 현재의 클래스에 사용(호출)하기 위한 도구 수준으로 생각할 수도 있다.

예를들어, 이런것이다.

자식 클래스에 fetchUserInfo라는 메서드가 있다.

그런데, 현재 작업중인 부모클래스에서 어떠한 경우에 자식클래스의 fetchUserInfo를 호출하고 싶은 경우가 생길 수 있다.

생각보다 이런일은 자주 생긴다.

이럴때 간단히 자식클래스에 ref를 해주면 간편하게 호출할 수 있다.

자식클래스가 User와 관련되었다면, 부모클래스에서 호출한 자식클래스에 다음과 같이 작성해주면 그만이다.

<User ref={ (user) => { this.user = user;  }} />

그러고 나면 this.user.fetchUserInfo(); 와 같이 자식클래스의 메서드를 호출할 수 있게된다.

뿐만아니라 state, props등에도 접근할 수 있으니 아주 편리하다고 볼 수 밖에 없다.