React는 자바스크립트 프레임워크는 많은 사람들이 이용하는 프레임워크다.

그 프레임워크에서 사용되는 기능중 내가 사용하면서 제일 편하다고 생각하는 점이 어떤 것인지, 적어보겠다.

Reconciliation

바로 재조정이라는 뜻의 Reconciliation 기능이 제일 신기하다고 생각한다.

재조정은 컴포넌트의 상태를 비교하여 변했다고 인지하게 되면 알아서 컴포넌트의 속성 및 컨텐츠를 갈아끼우는 형식이다.

예제는 다음과 같다.

export default function App(){
  const [counter, setCounter] = useState(0);
  
  const counterHandler = (isUp) => {
    if(isUp) setCounter(prev => prev + 1)
    setCounter(prev => prev - 1)
  }
  
  return (
    <div>
      <p>{counter}</p>
      <button onClick={() => counterHandler(true)}>Up</button>
      <button onClick={() => counterHandler(false)}>down</button>
   </div>
    )
}

자주 사용되는 카운터 패턴이다. 바닐라에서는 구현하기 정말 까다로운 것을 useState라는 함수를 이용하여 아주 쉽게 렌더링을 유발할 수 있다.

바닐라 자바스크립트에서 변수를 선언하고 할당을 하고 카운터를 증가 시켜도 렌더링이 제대로 일어나지 않지만, react에서는 다르다. 리액트에서는 재조정이라는 개념 덕분에 state가 변함을 감지하여 컴포넌트를 렌더링을 해준다. 이 얼마나 편한가.

profile
항상 즐겁고 재밌게!

0개의 댓글