React
는 자바스크립트 프레임워크는 많은 사람들이 이용하는 프레임워크다.
그 프레임워크에서 사용되는 기능중 내가 사용하면서 제일 편하다고 생각하는 점이 어떤 것인지, 적어보겠다.
바로 재조정이라는 뜻의 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가 변함을 감지하여 컴포넌트를 렌더링을 해준다. 이 얼마나 편한가.