Debelloper

다음 렌더링 전에 동일한 상태 변수를 여러 번 업데이트해야 하는 경우가 있을 수 있다. 이런 경우 다음 상태 값을 전달하는 대신 다음 상태 값을 기반으로 새로운 상태 값을 계산하도록 할 수 있다. 이는 React에게 상태 값을 단순히 교체하는 대신 “이전 상태”를 기반으로 무언가를 수행하도록 지시하는 방법이다. 예를 들어 장바구니의 담겨있는 동일 상품을 하나가 아닌 여러 개를 사고 싶어 + 버튼을 통해 이전 수량에서 1씩 추가를 해야 한다고 가정을 해보자. 상품 데이터가 있는 json 파일을 먼저 만들어준다. [product.json] { "id": "nf-uni-padding", "imageSrc": "NFPadding.jpg", "imageAlt": "검정색 노스페이스 남여공용 패딩", "name":..

React의 작동 흐름은 크게 네 가지 단계로 나누어진다. Mount: 컴포넌트가 새롭게 생성되는 단계이다. 컴포넌트 함수가 실행되고 결과물로 나온 Element들이 가상 DOM에 삽입되고 실제 DOM을 업데이트하기까지의 과정이다. Trigger: 렌더링을 유발한다. 앱 시작 초기 또는 state의 변경이 있을 때(re-render)에 해당한다. Render: 브라우저 DOM에 반영될 요소를 계산하는 단계이다. 브라우저 DOM에 업데이트 하기 전에 가상돔을 조작하여 업데이트할 모양을 만들어 내는 단계이다. 가상돔을 통해 업데이트를 미리 실행하는 이유는 브라우저 DOM을 직접 조작하는 비용(repaint, reflow)가 크기 때문이다. 초기 렌더라면 루트 컴포넌트를 호출하여 전체 엘리먼트에 대한 가상돔을..

컴포넌트를 만들 때 아래와 같은 에러를 본 적이 있을 것이다. 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개 이상의 엘리먼트가..

웹 요소의 속성을 가져오거나 수정하는 getAttribute(), setAttribute(), removeAttribute() 메서드 웹 요소를 문서에 삽입할 때 태그 속성을 함께 사용하면 DOM 트리에 속성 노드가 추가되면서 속성값이 저장된다. 이 때 속성에 접근하려면 getAttribute() 메서드를 사용하고 접근한 속성의 값을 바꾸려면 setAttribute() 메서드를 사용하면 된다. 속성 자체를 삭제하고 싶다면 removeAttribute() 메서드를 사용하면 된다. [예시] 간단한 위 예시 코드를 활용하여 알아보자 getAttribute() 메서드 이 메서드는 괄호 안에 들어가는 속성에 접근하여 속성값을 반환한다. [구문] element.getAttribute(“속성명”) [설명] 먼저 속성..

웹 요소의 내용을 수정하는 innerText, innerHTML 프로퍼티 요소(element)는 객체기 때문에 innerText 프로퍼티나 innerHTML 프로퍼티를 이용하여 웹 요소의 내용도 수정할 수 있다. [예시] hello, world! 위 예시 코드를 활용하여 알아보자 innerText 프로퍼티 innerText 프로퍼티는 요소의 텍스트 콘텐츠를 설정하거나 반환한다. [구문] - get 방식 : element.innerText ㄴ "let text = element.innerText"와 같이변수에 담아 활용해도 무방하다. - set 방식 : element.innerText = "내용" [설명] 예시 코드에서 #test id 값을 가진 p 태그의 텍스트 노드 값을 가져와보자 (get 방식) 다음..

DOM에 접근하기 웹 문서에서 원하는 요소를 찾아가는 것을 '접근한다'고 한다. 이벤트를 거는 등 요소를 제어하기 전에 그 요소를 먼저 지정할 수 있어야 한다. CSS에서 id, class, html 태그(, 등)를 선택자(selector)라고 하는데 이 선택자를 사용해서 DOM에 접근하는 여러가지 방법이 있다. getElementById() id는 문서 내에서 유일하기 때문에 특정 요소를 빠르게 찾을 때 유용하다. 이 메서드는 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 지정된 값을 가진 요소 객체를 반환한다. 괄호 안에는 id명이 들어간다. [예시] bellori라는 id 값을 가진 요소에 접근하려면 아래와 같다. document.getElementById(“bellori”) getEle..