React lecture

textContent / innerHtml / innerText 차이?문서 객체 모델.웹 페이지는 일종의 문서로 이 문서가 브라우저를 통해 해석되어 렌더링되거나 소스 코드 그 자체로 나타나기도 한다. 이처럼 동일한 문서가 여러 형태도 표시될 수 있는데, DOM은 HTM

문자도 HTML도 아닌 JavaScript의 확장 문법.근본적으로 JSX는 React.createElement(component, props, ...children)함수를 매번 작성하는 대신 보다 직관적이고 효율성 높게 작성할 수 있는 문법적 설탕이다.위의 JSX 코드

이전까지 하나의 리액트 엘리먼트만 루트 엘리먼트에 삽입한 것과 다르게, 실제 Html 구조는 수 많은 노드로 구성되어 있다. 그렇다면 리액트를 사용하여 위와 같이 여러 엘리먼트를 넣으려면 어떻게 해야할까.일종의 컨테이너 역할을 해줄 div태그를 하나 생성한 뒤, chi

위와 같은 구조의 HTML이 있다고 하자. <h1>과 <h3>의 쌍이 3번 반복되는 형태인데, 이를 리액트를 통해 만들고자 하면, 총 6개의 엘리먼트를 일일이 생성하여 넣어주는건 매우 귀찮고 지루한 일이다.똑같은 엘리먼트를 하나하나 생성하는 행동을 피하기 위

위 코드의 <Paint /> 와 { Paint(...args) }는 동일하게 동작한다.위의 Text 컴포넌트는 자바스크립트의 if ~ else 문법과 템플릿 문자열 그리고 JSX 문법을 함께 사용하고 있다.해당 컴포넌트는 if문에 따라 입력받은 text의 맨 앞

문서의 내용이 바뀌어 화면을 다시 그리게 되는 경우, 바닐라 JS로 구성된 화면과 리액트로 구성된 화면의 차이는 일반적으로 다음과 같다.코드로 예시를 들자면 다음과 같다. 1초 간격으로 버튼 안의 숫자가 랜덤으로 변경되는 화면이 있다고 하자.두 코드는 동일하게 setI

HTML 이벤트란 브라우저가 무언가 행동하거나, 유저가 행동하는 것이다.마우스를 클릭하거나 키보드를 누르는 등 사용자의 행위에 대해 발생할 수도 있고, HTML 문서의 로드가 완료되는 등 브라우저에서 발생할 수도 있다. 또는 JS 코드를 통해 프로그래밍 적으로도 발생시

리액트는 컴포넌트 안의 상태를 관리할 수 있는 훅(Hook)을 제공해준다.useState는 초기값(initialState)을 인자로 받아 상태 유지 값과 상태를 변경할 수 있는 함수를 반환한다.최초 렌더링 시 상태를 나타내는 값(state)는 전달된 초기 값을 가지며,