Dev/React (2) 썸네일형 리스트형 React - 상태 감지(useState), 컴포넌트 플러터에서 상태를 바꾸려면 setState를 하여 페이지를 다시 불러오는 작업을 하는 것이 일반적이다. 그러나 남은 타임세일 시간이라거나 카운트다운 같은 것은 setState로 표현 할 수 없다. 리엑트에서는 어떻게 할까? 다음과 같은 아주 간단한 버튼과 기능을 만들었다. 여기서 더하기 버튼을 누르면 a값이 변화한다. 확인해보면 콘솔에서 보면 확실히 a값은 바뀌고 있지만 렌더링은 되지 않는다. 여기서 실시간으로 바꾸고 싶으면 useState로 값을 관리해야한다. 이렇게 관리하면 리엑트는 a의 값을 실시간으로 감지하고 변화하면 화면에 다시 그려주는 편리한 기능을 제공한다. 상태가 바뀌면 모두 다시 그리게 되는데 이것은 매우 비효율적이다. 이 비효율을 해결하기 위한 방법이 부모자식간의 관계를 따지는 것이다... React - 화면의 변화감지, 배열(map, filter, slice, concat, spread 연산자) 만약 화면의 알림 표시가 왔다고 하자. 그렇다면 화면의 알림표시를 위해 렌더링을 다시해야 할 것이다. 알림 하나 때문에 화면을 전부 다시 그리는 것(렌더링)은 비효율적이다. 리액트 엔진은 컴포넌트를 통해 이를 해결한다. 최상위 렌더링이 Return A 일 때, A { 파란색 return B } 여기서 색을 변화시켰다고 하자 A { 빨간색 return B } 여기서 return A 를 할 경우 B는 어쩔 수 없이 바뀐것이 없어도 다시 렌더링될 것이다. 리엑트는 여기서 B를 검사하여 변화가 있으면 다시 그리고 변화없을 경우 그리지 않는다. 여기서 연산은 렌더링은 안되지만 연산은 된다. 연산을 위해 필요한 것이 바로 불변함수이다. 위는 얕은 복사이다. 즉, b는 새로운 자신의 주소를 갖고 있는 것이 아닌 a를.. 이전 1 다음
