[ cs스터디 7/27 ] 리액트와 리덕스

리액트란?

React는 facebook에서 제공해주는 프론트엔드 라이브러리로
자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
현재 웹/앱의 View개발에 가장 인기있는 라이브러리라고 볼 수 있습니다.

리액트의 장점

리액트 사용하는 이유는 이러한 장점때문이다

• 컴포넌트 기반의 화면구성, 유지보수가 용이 (필요한 부분의 component만 렌더링 된다. 최적화된 렌더링이 가능)
• virtual DOM을 활용하여 빠른 렌더링이 가능
• 생태계가 넓고, 다양한 라이브러리 사용 가능
• 리액트 네이티브를 활용하여 앱 개발 가능

1. 컴포넌트 기반의 화면구성

리액트는 화면의 한 부분을 컴포넌트 라는 단위로 나눌 수 있으며 독립적으로 관리할 수 있다.
대규모 웹 애플리케이션에서 컴포넌트는 역할과 기능에 따라 따로 관리하기 용이하며, 반복되는 부분을 대체할 수 있게
해주어서 코드 재사용성을 높여준다.또 컴포넌트 기반의 화면을 구성한다면 블록 쌓기처럼 컴포넌트를 쌓아서 빠르고 효율적으로 화면을 구성할 수 있다.

2. Virtual DOM으로 인한 충분히 빠른 속도

먼저 DOM(Document Object Model)이란 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다
Virtual DOM은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해
“실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.
이 접근방식이 React의 선언적 API를 가능하게 합니다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 합니다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화합니다.
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.

HTTP response > DOM tree > CSSOM tree > render tree > painting

DOM은 새로운 요청이 있으면 리렌더링을 진행하게 되는데 매번 새롭게 구성하기 때문에 DOM의 속도는 느리지 않다. 하지만 , 양이 엄청 많으면 분명 퍼포먼스가 떨어지게되고 이 때, 리액트의 Virtual DOM이 더 효과적이다

리액트는 Virtual DOM을 사용하며, 추상화한 자바스크립트 객체를 구성하여 사용합니다. 이는 실제 DOM의 가벼운 사본과 비슷합니다. 리액트에서 1) 데이터가 변하여 웹 브라우저에 리렌더링 할시엔 2) 이전 내용과 현재 내용을 비교하여 3) 바뀐 부분만 실제 DOM에 적용한다

Virtual DOM을 사용한다고 해서 무조건 빠른 것은 아니며 , 리액트 사용의 핵심은 ‘지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기’입니다

3. SPA(싱글 페이지 애플리케이션)

• 장점 : 서버의 자원을 아낄 수 있다. 더 좋은 사용자 경험을 누릴 수 있다.

• 단점 : 사용자와 인터렉션이 많은 경우에는 서버의 자원이 많이 사용되고 불필요한 트레픽이 낭비 될 수 있다.

프레임워크와 라이브러리

프레임워크는 어플리케이션 개발시 코드의 품질, 필수적인 코드, 같은 기능들을 구성이 되어있는 뼈대(구조)를 제공하도록 만들어진걸 프레임워크라고합니다.
개발 구조나 설계 시 제공되는 인터페이스의 집합입니다. 완성된 어플리케이션은 아니지만 어느정도 프로그래머가 개발자가 제공된 환경을 사용해 프레임워크의 구조에서 어플리케이션을 개발이 가능해야된다

프레임워크는 Application 개발시 코드의 품질, 필수적인 코드, 알고리즘, 암호화, 데이터베이스 연동 같은 기능들을 어느정도 구성이 되어있는 뼈대(구조)를 제공하도록 만들어진걸 프레임워크라고합니다.

라이브러리는 특정 기능에 대한 API(도구 / 함수)를 모은 집합이며, 필요한 기능을 호출해서 사용하는 방식이다

특정기능을 사용하기 위한도구

프레임워크와 라이브러리의 차이는?

어플리케이션의 flow를 누가 제어하는냐가 프레임워크인지 라이브러리인지 구분할 수 있었습니다

프레임워크는 단지 미리 만들어 둔 반제품이나, 확장해서 사용할 수 있도록 준비된 추상 라이브러리의 집합이 아니다.

라이브러리를 사용하는 애플리케이션 코드는 애플리케이션 흐름을 직접 제어한다.
단지 동작하는 중에 필요한 기능이 있을 때 능동적으로 라이브러리를 사용할 뿐이다.

반면에 프레임워크는 거꾸로 애플리케이션 코드가 프레임워크에 의해 사용된다.
프레임워크에는 분명한 제어의 역전 개념이 적용되어 있어야 합니다.

애플리케이션 코드는 프레임워크가 짜놓은 틀에서 수동적으로 동작해야 합니다.

리덕스란

리덕스는 현재 가장 많이 사용되는 상태관리 라이브러리 중 하나입니다
스토어라는 변수를 이용하여 전역 상태관리가 가능하며,전역으로 상태를 관리하기 때문에 props <-> state를 통해 부모 컴포넌트에서 자식 컴포넌트로, 자식의 자식 컴포넌트로 내려주지 않아도 사용할 수 있습니다.

리덕스의 기본 원칙은

1. 응용 프로그램의 전역상태는 단일 저장소 내의 트리에 저장됩니다
2. 상태(state)는 읽기 전용입니다.
3. 순수 함수에 의해서 변경되어야 합니다.

리액트를 사용하지 않아도 코드 최적화를 열심히 하면 DOM 작업이 느려지는 문제를 개선할 수 있고, 또 작업이 매우 간단할 때는 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보이기도 합니다.

리액트와 Virtual DOM이 언제나 제공할 수 있는 것은 바로 업데이트 처리 간결성입니다. UI를 업데이트하는 과정에서 생기는 복잡함을 모두 해소하고, 더욱 쉽게 업데이트에 접근할 수 있습니다.

리액트는 함수 컴포넌트

기존에는 함수형 컴포넌트 라는 단어를 사용했습니다. 하지만 이러한 네이밍이 *함수형 프로그래밍과 비슷했고, 함수형 프로그래밍은 순수 함수를 지향하는데
반면, 리액트에서는 훅(hook)을 사용함으로써 발생하는 여러 사이드 이펙트 이슈때문에 함수형 프로그래밍이라고 볼 수 없습니다. 이같은 혼동을 방지하기위해
2018년 이후 변경 함수 컴포넌트로 불리게 되었습니다
사이트 이펙트 예제 작성

React에서 함수 컴포넌트와 클래스 컴포넌트의 차이

클래스형 컴포넌트

• 객체지향 프로그래밍의 구조를 띄고 있으며, state를 초기화하기 위해서는 constructor → 생성자 함수를 필요로 합니다
• state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있다 * 중요!
• 생성자 함수를 통해 state를 초기화해야 하기 때문에 함수 컴포넌트에 비해서 코드가 길어지고, 사이즈가 커질 수 있습니다.
• render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다.

함수 컴포넌트 ( 함수형 컴포넌트 x )

• Hooks 를 사용하여 생성자 함수를 통해 state를 초기화하지 않더라도 사용이 가능하다 (useState() 등)
• 선언하기가 좀 더 편하고 메모리 자원을 덜 사용한다는 장점이 있다
• 제공되는 hook 함수뿐만 아니라 커스텀 훅을 생성하여 동작시킬 수 있다
• 프로젝트를 완성하여 빌드한 후 배포할 때도 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작습니다
  함수 컴포넌트는 state와 라이프사이클 API의 사용이 불가능하다는 점인데, 이를 해결 하기 위해 v16.8 업데이트 이후에 적용된 Hooks를 통해 해결되었습니다.

props와 state의 차이

• props : 컴포넌트 속성을 설정할 때 사용하는 요소이다. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.

• state : 컴포넌트 내부에서 바뀔수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있습니다. props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 합니다.

props가 컴포넌트간에 전달받는 것이라고 했는데 자식에서 부모로도 전달할 수 있는가

1. 부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있다.
   (자식이 props를 통해 부모에게 데이터를 줄 수 없다는 뜻이다.)

2. 자식에서 부모로 데이터를 전송하는 방법 = *함수를 이용한다.

• 자식은 props를 사용해서 부모에게 데이터를 건네줄 수 없다.
  따라서 부모가 함수를 넣어 props로 자식에게 넘겨주면, 자식이 데이터를 파라미터로 넣어 호출하는 방식으로 동작한다. 즉, 부모가 props로 함수를 넣어주면 자식이 그 함수를 이용해 값을 건네주는 방식이다.

FLUX란

Flux 란 애플리케이션의 데이터 흐름을 관리하는 패턴을 말한다. 중요한 것은 데이터의 흐름이 단방향으로 흐른다는 것이다.

리덕스는 페이스북에서 리액트가 함께 소개한 FLUX 아키텍쳐로 구현한 라이브러리입니다.

Flux를 사용하는 이유

• 예측가능성을 높여준다.
• 데이터의 일관성을 유지하기 쉽게 만들어준다.
• 버그를 발견하기 쉽게 해준다.
• 테스트를 쉽게 해준다.

사용자의 행위 액션은 디스패쳐에 의해 스토어로 업데이트되고 변경된 스토어에 대한 뷰를 리렌더링합니다.

뷰에서는 스토어에 직접 접근하지 않으며, 디스패처로 다시 액션을 보내고 스토어를 업데이트한 뒤, 다시 뷰를 리렌더링하는 단방향적 구조를 가지기에 어떤 액션이 디스패처에 의해 어떤 변화가 생기는지 명확히 파악이 가능하다
`

7월 27일 강남역 윙스터디에서 2시간가량 진행됐으며 , 내용 암기 후 질의응답 후 마무리했습니다 !