한 걸음씩

2023.07.04 - [React] - [React] React를 사용하는 이유, JSX와 Babel 자바스크립트로 수정사항을 업데이트하면 해당 태그 전체가 업데이트 되는 반면 리액트로 수정사항을 업데이트하면 해당 counter 변수만 업데이트됨 → UI에서 바뀐부분만 업데이트 (very interactive) ▷ State 컴포넌트의 데이터를 저장하고 관리하는 객체 아래 코드에서 counter 변수가 클릭 수를 저장하는 상태 데이터로 사용되고, countUp함수를 통해 클릭할 때마다 값이 업데이트 됨. 이 때, counter 변수의 값이 변경되면 리액트는 해당 값을 추적하고 변경된 값을 사용하여 컴포넌트를 업데이트한다. 컴포넌트 : UI를 표현하고 랜더링하는 역할을 담당하는 함수나 클래스 아래 코드에..

▷ JavaScript + HTML 자바스크립트에 HTML 태그를 생성하고 이벤트를 추가하는 등 코드 양이 상당히 많아진다. Total clicks: 0 Click me ▷ React + HTML 리액트를 사용하면 몇 줄 만에 위에서 작업한 자바스크립트 양보다 훨씬 줄어든다. 이벤트를 여러 번 사용하기보다 속성값으로 이벤트를 제어할 수 있다. ▷ JSX createElement를 대체하기 브라우저는 JSX코드를 이해하지 못하기 때문에 babel을 이용해야 함 위의 React 코드 방식보다 훨씬 간단하고 기존의 HTML작성하는 방식과 비슷하기 때문에 작성하기 수월한 편 컴파일 시점에서 오류를 체크할 수 있으므로 오타나 문법 오류를 사전에 발견하여 디버깅을 용이하게 만들어 줌 리액트 개발에서 JSX를 사용하..