이전 상태(previous state) 기반 업데이트
다음 렌더링 전에 동일한 상태 변수를 여러 번 업데이트해야 하는 경우가 있을 수 있다. 이런 경우 다음 상태 값을 전달하는 대신 다음 상태 값을 기반으로 새로운 상태 값을 계산하도록 할 수 있다. 이는 React에게 상태 값을 단순히 교체하는 대신 “이전 상태”를 기반으로 무언가를 수행하도록 지시하는 방법이다. 예를 들어 장바구니의 담겨있는 동일 상품을 하나가 아닌 여러 개를 사고 싶어 + 버튼을 통해 이전 수량에서 1씩 추가를 해야 한다고 가정을 해보자. 상품 데이터가 있는 json 파일을 먼저 만들어준다. [product.json] { "id": "nf-uni-padding", "imageSrc": "NFPadding.jpg", "imageAlt": "검정색 노스페이스 남여공용 패딩", "name":..
React의 작동 흐름 (공식 문서 해설)
React의 작동 흐름은 크게 네 가지 단계로 나누어진다. Mount: 컴포넌트가 새롭게 생성되는 단계이다. 컴포넌트 함수가 실행되고 결과물로 나온 Element들이 가상 DOM에 삽입되고 실제 DOM을 업데이트하기까지의 과정이다. Trigger: 렌더링을 유발한다. 앱 시작 초기 또는 state의 변경이 있을 때(re-render)에 해당한다. Render: 브라우저 DOM에 반영될 요소를 계산하는 단계이다. 브라우저 DOM에 업데이트 하기 전에 가상돔을 조작하여 업데이트할 모양을 만들어 내는 단계이다. 가상돔을 통해 업데이트를 미리 실행하는 이유는 브라우저 DOM을 직접 조작하는 비용(repaint, reflow)가 크기 때문이다. 초기 렌더라면 루트 컴포넌트를 호출하여 전체 엘리먼트에 대한 가상돔을..
프레그먼트(Fragments)
컴포넌트를 만들 때 아래와 같은 에러를 본 적이 있을 것이다. Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? 만약 컴포넌트가 아래와 같이 작성이 되었다고 해보자. const App = () ⇒ { return ( one two; ); } 이 코드에는 문법 오류 문제가 있다. JSX 문법으로 작성된 내용이 아래와 같이 해석이 되기 때문이다. return ( React.createElement('div', {}, "one") React.createElement('div', {}, "two") ) React 컴포넌트는 하나의 최상위 엘리먼트만 렌더링을 할 수 있기 때문에 2개 이상의 엘리먼트가..