TIL: 2022-11-03

⚙️ 학습 주제

Redux 보충

 

🐶 오늘의 기분

아침에 트리 dfs 문제를 푸는데 될 듯 안 될 듯 코드가 안 써져서 한참 고민했다. 아직 못 풀어가지고 이따 또 보거나 내일 아침에 다시 풀어보고 그래도 못 풀면 레퍼런스 볼 예정.. 갑자기 그래프/트리 순회가 나와서 매우 당황스럽지만 이 기회에 제대로 공부해놔야겠다.
어제 과제를 다 끝내서 오늘은 퀴즈 풀고 리액트랑 리덕스에 대해서 좀 더 찾아보았다. 자세하게 정리해놓은 글이 많아서 감탄하면서 읽었당.. 이런 글 쓰시는 분들은 뭐하시는 분들일까.. 존경스럽고 감사하다. 공식문서도 내 말로 요약해가며 읽었더니 뭔가 훨씬 윤곽이 잡히는 느낌..! 근데 막 redux toolkit도 있고 react-redux도 있고 redux도 있고 이러니까 머릿속에서 막 섞여가지고 조금 혼란스러움... 😵‍💫

 

🗣 정리

참고 자료

react-redux 사용법, redux, react, react16, state management, flux, store, reducer, dispatch, action

 

What is Redux and who uses it?

 

Redux 핵심, Part 1: Redux Overview and Concepts | Redux

리액트에서 상태 관리를 어떻게 하는지 -> 어떤 문제가 발생하는지 -> flux 구조 -> redux

 

일단, redux는 필수 라이브러리가 아니다.

redux가 없어도 앱을 잘 작성할 수 있다.
그럼에도 불구하고 redux를 쓰는 이유는 상태 관리를 더 편하고 직관적으로 하기 위해서이다.

 

npm trends

상태 관리 라이브러리에는 여러 종류가 있지만 redux가 가장 많이 이용되고 있다.
(redux는 react가 아닌 다른 환경에서도 사용할 수 있다.)

// 공식문서에서 가져온 코드
function Counter() {
  // State: a counter value
  const [counter, setCounter] = useState(0)

  // Action: code that causes an update to the state when something happens
  const increment = () => {
    setCounter(prevCounter => prevCounter + 1)
  }

  // View: the UI definition
  return (
    <div>
      Value: {counter} <button onClick={increment}>Increment</button>
    </div>
  )
}

react의 상태는 컴포넌트 내부에서 관리된다.
이 또한 리액트의 원칙인 한방향 데이터 흐름의 예시에 해당한다.

 

만약 같은 상태를 공유하는 컴포넌트가 여러 개라면, 이 흐름이 깨진다.
이런 컴포넌트가 각각 다른 곳에 위치해있다면, 상태 끌어올리기로 해결할 수 있지만 이게 항상 방법인 것은 아니기에 더 근본적인 해결책이 필요했다.

특히 props drilling이 발생하면, 상태가 바뀔 때마다 실제로는 내려받은 props를 쓰지 않는 컴포넌트까지도 불필요하게 렌더링된다.

 

이런 문제를 해결하기 위해 state를 컴포넌트 트리가 아니라 컴포넌트 트리 바깥의 중앙화된 공간(store)에서 관리해주는 방법이 고안되었고, 그것이 flux 구조이다.
이렇게 하면 컴포넌트 트리가 커다란 뷰가 되고, 컴포넌트가 어디에 있든 상관없이 상태에 언제든 접근할 수 있게 된다.

Redux는 flux에 Reducer 함수가 결합된 것이다.

 

React에서 불변성을 지켜야 하는 이유

과제하면서 페어분과 이 부분에 대한 이야기가 나왔었는데 잘 몰라서 그냥 넘어갔던게 마음에 걸려서 다시 찾아보았다.

리액트 불변성이란 무엇이고, 왜 지켜야 할까?

리액트에서 불변성이란

요약:
React는 상태를 비교할 때 얕은 비교로 판단한다. (요소를 하나하나 비교하지 않는다는 의미)
상태를 직접적으로 변경하면 참조값은 그대로이기 때문에 상태가 변경되었음을 감지하지 못한다.
그렇기 때문에 새 배열을 만들어서 상태변경함수에 전달하는 것이다.