React & React Redux

uub_2·2022년 8월 11일

React

목록 보기

5/5

React

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이다. 컴포넌트 라는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하게 한다.

React 주요 특징

컴포넌트 기반
선언형 뷰
JSX
Hooks
State & Props

1. 컴포넌트 기반

컴포넌트란 화면을 구성하는 하나의 단위이다.

function App (){
	return <div></div>
}

App component를 보면 함수로 이루어져 있는 것을 볼 수 있다. 즉 컴포넌트는 함수라고 이야기할 수 있다.
함수의 리턴 부분을 기준으로 위는 JS 코드를 작성할 수 있고, 아래는 JSX를 작성한다.

2. 선언형 뷰

우리는 리액트로 작업할 때 어떤 로직으로 어떻게 코드를 짜야 페이지가 그려질 수 있는지에 대해 생각하기보다는, 컴포넌트나 데이터 등의 배치를 통해 무엇이 렌더링 될지에 대해 생각한다. 이게 선언형 UI의 핵심이다.

2 - 1. 선언형 프로그래밍 특징

결과물에만 집중하고, 복잡한 과정은 추상화하여 신경쓰지 않는다.
명령형의 경우 한 줄씩 읽어 나가면서 다음에 어떤 일이 발생할지 추측해야 한다.
반면 선언형의 경우 자세한 방법을 모르더라도 코드만 보고도 어떤 일이 발생할지 예측할 수 있어 명령형에 비해 가독성이 좋다.

참조1, 참조2, 참조3

3. JSX

JavaScript를 확장한 문법이며 JavaScript의 모든 기능이 포함되어 있다. JSX는 React element를 생성한다.

4. Hooks

이전 글 참조

5. State & Props

5 - 1. State

state란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
state를 만들 때는 useState를 이용한다.

5 - 2. Props

리액트에서 props는 읽기 전용이며 컴포넌트의 자체 props를 수정해서는 안된다. 또한 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

순수 함수의 예시 - 항상 동일한 입력값에 대해 동일한 결과를 반환

function sum(a, b) {
  return a + b;
}

순수 함수가 아닌 함수의 예시 - 자신의 입력값이 변경됨

function withdraw(account, amount) {
  account.total -= amount;
}

5 - 3. state 와 props 의 차이

state는 props처럼 컴포넌트 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만 , props는 컴포넌트에 전달되는 반면 state는 컴포넌트 안에서 관리된다는 차이가 있다.
state 와 props 를 분리시켜 사용하는 쪽, 구현하는 쪽의 편의성을 높일 수 있다.
setState 호출은 비동기적으로 이루어 지기 때문에 setState 호출 직후 새로운 값이 state에 반영되지 않을 수 있다.
왜 React는 state를 동기적으로 업데이트 하지 않는가?
props, state 사이의 일관성을 해칠 수 있고 이것은 디버깅하기 매우 힘든 이슈를 일으킬 수 있다.
=> 상태 관리 라이브러리가 필요한 이유 ex) Redux, MobX, recoil 등
props vs state
component state

Redux

전역상태 관리 (state) 라이브러리 이다. Redux 자체는 꼭 React와 함께 사용할 필요는 없으며 React, Angular, Vue 등에도 사용한다.
React Redux는 React용 공식 Redux UI 바인딩 라이브러리이다.

왜 리덕스를 사용하는가?

리덕스 없이 리액트만 사용할 때, 리액트는 부모-자식간의 공유만 가능하기 때문에 과한 props drilling이 일어날 수 있다.
리덕스를 사용하면 state를 공유할 때 부모-자식 관계가 아니어도 되고, 의미 없이 많은 컴포넌트를 거치지 않아도 된다. 또 자식 컴포넌트에서 만든 state를 부모 컴포넌트에서도 사용할 수 있다.

리덕스는 이러한 경우에 유용하게 사용된다.

앱의 여러 위치에 많은 양의 state가 필요할 때
앱 상태가 자주 업데이트 될 때
state를 업데이트 하는 로직이 복잡할 때
앱이 중대형 크기의 코드베이스를 가지며 여려명의 사람들이 작업해야 할 때
업데이트하고 난 뒤에 state의 상태를 봐야 할 때

Redux state, useState state 차이

리덕스에서 생성한 state는 global state 전역상태 이고, useState로 생성한 state는 local state 이다.
아래 사진처럼 리덕스는 state를 한 곳에서 관리, 생성한다. 리덕스를 사용한다면 컴포넌트의 위치와 상관없이 state를 불러와서 사용할 수 있게 된다.