리액트문법2 리액트 엘리먼트(Element) & 컴포넌트(Component) 리액트의 엘리먼트(Element)와 컴포넌트(Component)의 차이점이 무엇인지 알아보았다. 리액트 엘리먼트(React Element) 자바스크립트 객체 (JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 됨) 리액트로 화면을 그려내는 데에 가장 기본적인 요소 우리가 실제로 보게되는 화면을 구성하고 있는 블럭 바로 사용되지는 않고 컴포넌트에서 리턴을 받아서 사용함 한 번 생성되면 다시는 변형되지 않음 import ReactDOM from 'react-dom'; const element = Hello, World!; console.log(element); ReactDOM.render(element, document.getElementById('root')); 리액트 컴포넌트(React Com.. 2023. 1. 13. JSX 문법 작성하는 방법 JSX는 자바스크립트로 html 문법을 사용할 수 있도록 만들어주는 문법이다. 그런데 이 문법을 사용하려면 지켜야 하는 규칙들이 몇가지 있다. 지난 포스팅에서도 이미 설명했지만 그래도 중요한 부분이니 다시 한 번 정리하고 넘어가려고 한다. 속성명은 무조건 카멜 케이스로 작성 여러 단어가 조합된 속성들을 사용할 때에는 반드시 카멜 케이스로 작성해 주어야 한다. ex) onClick, onBlur, onFocus, onMouseDown, onMouseOver, tabIndex 예외적으로 "data-" 속성만 카멜 케이스가 아닌 기존 문법 그대로 작성한다. ex) data-status 자바스크립트 예약어와 같은 속성명 사용불가 자바스크립트 예약어와 겹치는 html 속성명은 쓸 수 없다. 그래서 자바스크립트 반.. 2023. 1. 10. 이전 1 다음
