JSX2 KDT 5th 웹개발자 입문 수업 36일차 JSX 문법 JSX 는 결국 Babel 에 의하여 JS 로 번역이 되므로 1. class -> className 기존 DOM 요소에 class 를 부여할 때 쓰던 class 를 className 이라고 써야 한다. (class 는 키워드이므로) 2. 데이터 바인딩이 용이 원래 HTML 은 정적인 페이지를 구현하는데 사용이 되었지만 현대의 웹은 서버와 통신을 하여 변경해줄 필요가 있으며 이 경우 DOM 에 JS로 접근하는 document.getElementById() 등을 사용해줘야 하지만, JSX를 사용하면 HTML 요소는 return () 안에, JS의 경우 { } 안에 써주면 된다. 3. JS 는 { } 안에 써준다. 대부분의 JS 문법을 사용할 수 있지만, 예외적으로 if 문 등은 불가능하다. ❥ .. 2023. 3. 27. SOAPLE 처음 만난 리액트 JSX JSX 란? JavaScript eXtension -> JS + XML/HTML const el = Hello, world!; 기본적인 React로 요소 만들기 React.createElement( type, // 요소나 리액틑 컴포넌트 [props], // 속성 [...children] // 요소가 포함하고 있는 자식 요소들 ) JSX 의 역할 // JSX를 사용하지 않은 코드 class Hello extends React.Component { render() { return React.createElement('div', null, `Hello ${this.props.toWhat}`); } } ReactDOM.render( React.createElement(Hello, { toWhat: `World.. 2023. 3. 5. 이전 1 다음