react.md

SetState가 비동기인 이유

React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한꺼번에 처리할 수 있습니다.

부모와 자식이 한꺼번에 setState가 호출될 경우 setState가 동기면 자식이 두번 렌더링됩니다.

이를 막기 위해 setState는 비동기로 처리되어 업데이트됩니다.

this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 안 됩니다.

단방향 바인딩이 좋은 이유

state를 끌어올리는 작업은 양방향 바인딩 접근 방식보다 더 많은 “보일러 플레이트” 코드를 유발하지만, 버그를 찾고 격리하기 더 쉽게 만든다는 장점이 있습니다. 어떤 state든 간에 특정 컴포넌트 안에서 존재하기 마련이고 그 컴포넌트가 자신의 state를 스스로 변경할 수 있으므로 버그가 존재할 수 있는 범위가 크게 줄어듭니다. 또한 사용자의 입력을 거부하거나 변형하는 자체 로직을 구현할 수도 있습니다.

합성 vs 상속

React에서의 합성은 컴포넌트의 props로 다른 컴포넌트를 바인딩하여 코드의 재사용성을 높이는 것을 말합니다.

예를 들어 Tab을 구현할 때 왼쪽 탭은 A화면 오른쪽 탭은 B 화면을 보여줘야 하는 UI가 있으면 Tab이라는 컴포넌트에서 left props로 A화면컴포넌트 right props로 B컴포넌트를 전달하여 재사용성을 높일 수 있습니다.

Props vs State

props는 컴포넌트로 전달되는 값입니다.

props는 변경할 수 없는 값입니다.

state는 컴포넌트 내에서 생성되어 변경되는 값입니다.

컴포넌트 내에서 변경이 가능합니다.

setState는 왜 비동기인가?

성능을 위해서입니다. 변경사항이 여러개 일어날 경우 이를 일괄적으로 갱신해야 최소 리렌더링을 할 수 있기 때문입니다.

setState가 동기일 경우 부모와 자식이 모두 setState를 호출한다면 자식은 두번 렌더링될 것입니다.

하지만 비동기이기 때문에 변경사항을 한번에 일괄적으로 반영하고 따라서 자식은 한번 렌더링 됩니다.

Hook이 나오게 된 이유

• 상태관리 로직을 재사용

  컴포넌트로부터 상태관련 로직을 추상화하여 재사용할 수 있습니다.

• 컴포넌트가 복잡할 경우 이해하기 어려움

• Class는 this를 계속 파악해야 한다.

useEffect

componentDidMount 와 componentDidUpdate, componentWillUnMount를 합친 훅

기본적으로 렌더링 이후와 모든 업데이트에서 수행.

clean up 이 필요한 경우에 함수를 반환

배열인자의 값으로 값을 넣으면 특정 값들이 리렌더링 시에 변경되지 않는다면 useEffect를 건너뛰게 함으로써 최적화를 할 수 있다.

빈 배열을 넣으면 렌더링 시 한번만 호출.

브라우저 화면이 다 그려질때까지 지연된다. 따라서 비동기적이다. 동기적으로 DOM 변경이 일어나야 한다면 useLayoutEffect를 써야 한다.

Hook의 규칙

• 최상위 레벨에서만 hook을 호출해야 한다.
  • 호출되는 hook의 순서가 밀려 버그를 발생시키기 때문
• react 함수 내에서만 호출해야 한다
  • custom hook도 가능

useRef

.current 프로퍼티로 전달된 인자로 초기화된 객체를 반환

가변값이지만 렌더링에 영향을 주지 않는 값.

자식컴포넌트에 접근할 때 사용

useImperativeHandle

ref를 사용할 때 부모 컴포넌트에서 자식의 ref를 조정하는 로직을 담을 때 사용

useRef()로 ref를 선언하고 useImperativeHandle의 첫번째 인자로 ref, 두번쨰 인자로 ref를 조정하는 함수를 넣습니다. 자식 컴포넌트의 ref 프로퍼티에 useRef로 할당받은 값을 넣습니다.

부모컴포넌트는 forwardRef로 감싸서 props와 ref를 호출할 수 있게 한다.