«   2022/10   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
Archives
Today
0
Total
96,326
관리 메뉴

차근차근

[React & Redux] React & Redux 본문

대학교/FE

[React & Redux] React & Redux

SWKo 2020. 3. 5. 02:50

0. React & Redux

  • 생활코딩 강좌를 듣고 정리한 내용입니다.
  • React는 사용자 정의 태그, 즉 컴포넌트를 만들어서 체계적이고 잘 정돈된 어플리케이션을 만들어주는 기술이다.
  • Redux는 상태를 중앙에서 관리하는 것을 통해서 데이터가 예측하지 않은 대로 변형될 가능성을 낮춰주는 기술이다.
  • 즉, React 건 Redux건 모두 개발에 복잡성을 낮춰주는 기술이라고 할 수 있다.
  • 비유를 해보면 다음과 같다.

  • 왼쪽은 react만으로 구현한 데이터의 흐름이고 오른쪽은 redux를 도입한 후 데이터의 흐름이다.
  • react는 소문과 같고 redux는 미디어 같은 느낌이다.
  • react는 컴포넌트들로 만들어진 사회와 비슷하고 어떤 컴포넌트에서 변화가 생기면 왼쪽에 있는 그림처럼 모든 컴포넌트들로 그 데이터가 전파된다.
  • 그 데이터가 필요한 컴포넌트는 그것을 이용하고 필요없으면 이용하지 않으면 된다. 그러나 소문은 단점이 있다. 모든 사람이 필요없는 소문을 듣게 된다는 것이다. react로 치자면 render함수가 호출되어서 효율이 떨어지는 것이다. 또 소문이 전파되기 위해선 서로 연결이 되어 있어야 한다. props와 event로 연결되어 잇는 것처럼.
  • 작은 동네는 소문으로 충분하지만 국가는 소문으로 충분하지 않다.
  • 그럴때 우릴 구원해줄 수 있는 도구가 redux이다.
  • 모든 정보는 redux가 가지고 있다. 어떤 컴포넌트가 구성원들에게 전달하고 싶은 정보가 있으면 소문에 퍼뜨리는 대신 redux라는 언론사에 제보를 하고 그럼 redux는 전체 컴포넌트들에게 방송을 한다.
  • 전체에게 하고 싶은 말이 있으면 redux의 store에 제보를 하면 된다.
  • 방송은 그게 필요하지 않은 사람에게도 전달되는 비효율성은 여전히 가지고 있다.
  • react와 redux를 연결해주는 라이브러리인 react-redux를 사용하면 그 소식이 필요한 컴포넌트들에게만 그 정보를 전달할 수 있다.
  • 다시 말해 그 컴포넌트들만 render함수가 실행되는 것이다.
  • redux의 효율성을 알기 위해 redux없는 react component와 redux를 도입한 react component를 살펴보겠다.

'대학교 > FE' 카테고리의 다른 글

[Redux] 시간여행과 로깅  (0) 2020.03.08
[Redux] Redux 적용  (0) 2020.03.08
[Redux] with Redux VS without Redux  (0) 2020.03.05
[Redux] Redux 동작원리  (0) 2020.03.04
[React-Native] (2) 리액트 네이티브 다루기  (0) 2020.03.04
0 Comments
댓글쓰기 폼