[Udemy] 클린코드 리액트 - 소개, State

요즘은 클린코드 리액트 강의를 유데미에서 듣고 있다.

이 강의는 리액트에 이미 익숙하게 잘 쓰고 있는 사람들이 하는 고민들을 싹싹 긁어주는 강의 인듯!!

아주 만족도 100%..

 

리액트로 코드를 작성하다보면

• useEffect를 너무 많이 쓰는 것은 사이드 이펙트를 초래하기 때문에 좋지 않다.
• useState도 너무 많이 쓰면 리렌더링을 많이 유발해서 좋지 않다.

등등.. 여러가지 하지말라는 것들이 많은데 그래서 그럼 어떻게 해야하는데! 에 대해서 속시원히 답을 내려주는 곳은 별로 없었다..

특히나 지금 모던 리액트 딥다이브 책을 읽으면서 스터디를 하고 있는데 책에서는 리액트의 작동 원리를 속속들이 뜯어보지만

그래서 어떻게 해야하는데!!! 에 대한 답은 속시원하지 않아서 불만이 있던 도중에 만난 강의

 

 

 

강의 소개부터가 클릭을 안할 수가 없게 만듬.. 어쩜 이렇게 내가 궁금한 것들만 쏙쏙인지

그래서 듣고 있는 강의인데 아주 만족스럽다.

들으면서 정리 차 기록하고 있는 것들을 블로그에 하나씩 올려볼 예정!

 

State

• 일단 상태부터 만들고 보는 초보에서 벗어나기
• 일단 상태가 무엇일까요?
  • 컴포넌트 상태
  • 전역 상태
  • 서버 상태
  • 상태 변경
  • 상태 최적화
  • 렌더링 최적화
  • 불변성
  • 상태 관리자
• 올바른 초기값 설정
  • 초기값? 가장 먼저 렌더링될 때 순간적으로 보여질 수 있는 값이기도 하며, 초기에 렌더링 되는 값
  • 지키지 않을 경우?
    • 렌더링 이슈, 무한 루프, 타입 불일치로 의도치 않은 동작이 생김 ⇒ 런타임 에러
    • 넣지 않으면? undefined 발생
    • 상태를 지울 때도 초기값을 잘 기억해 놔야 원상태로 돌아간다.
    • 빈 값? null 처리할 때 불필요한 방어코드도 줄여준다.
• 업데이트되지 않는 값 **
  • 업데이트가 되지 않는 객체를 props 로 내리면 Bad case → 불필요하게 참조하고 물고 있게 됨
    • 이런 경우에는 리액트 상태로 바꾼다거나 아예 외부로 내보내는게 나음.
    • 외부로 보내게 되면 컴포넌트 자체가 다시 렌더링이 되어도 해당 객체를 바라보는 참조는 동일하기 때문에 효율적
• 플래그 상태
  • 플래그 값: 프로그래밍에서 주로 특정 조건 혹은 제어를 위한 조건을 불리언으로 나타내는 값
  • useState를 쓰지 않고 컴포넌트 내부의 변수로 관리할 수 있다.
• 불필요한 상태
  • 불필요한 상태를 만든다면? 결국에는 리액트에 의해 관리되는 값이 늘어나는 것. 그러다 보면 렌더링에 영향을 주는 값이 늘어나서 관리 포인트가 더더욱 늘어난다.
  • 업데이트 되는 값이며, 렌더링마다 고유의 값을 가질 수 있는 상태라면 컴포넌트 내부에서 변수로 관리해도 괜찮다.
  • 결국 리액트 컴포넌트 내부에서의 변수는? 렌더링마다 고유의 값을 가지는 계산된 값
  • 따라서 useState가 아닌 const로 상태를 선언하는게 좋은 경우도 있음
• useState 대신 useRef
  • 리렌더링 방지가 필요하다면 useState 대신 useRef
  • 컴포넌트의 전체적인 수명과 동일하게 지속된 정보를 일관적으로 제공해야 하는 경우
  • 렌더링 프로세스와 관계없이 값을 가변적으로 저장하고 싶은 경우
  • 렌더링을 유발하지 않는 가변 컨테이너
• 연관된 상태 단순화하기
  • 복잡할수록 단순하게! KISS (Keep It Simple Stupid)
  • 예를 들어 loading, finish, error 상태는 연관된 상태기 때문에 단순화해서 관리가 가능함
    • loading이 true 면 나머지는 false 여야함
    • 이럴 때는 그냥 상태를 하나로 만들어서 각 상태를 string 형태로 넣어줘도 됨
• 연관된 상태 객체로 묶어내기
  • 객체로 묶어내고 setState 안에 콜백으로 prevState를 받아도 된다.
• useState에서 useReducer로 리팩토링
  • 구조화된 상태를 원한다면 useReducer
  • 리덕스의 리듀서와 거의 동일
• 상태 로직 Custom Hooks로 뽑아내기
  • fetch 로직은 중복으로 사용될 일이 많이 때문에 hooks로 뽑아낼 수 있다.
• 이전 상태 활용하기
  • setAge(age+1) 과 setAge((prevAge) => prevAge + 1) 는 다른 결과를 초래함
  • setState는 비동기적 처리과정을 거치기 때문에 갱신되기 전 상태를 계속 바라보는 경우도 있다.
  • 이런 경우에는 setState 안에 함수를 넣어서 호출하는 방식이 적합

 

 

출처: https://www.udemy.com/course/clean-code-react/learn/lecture/40031554?start=15#overview