front-end/react2 [React 기초] 그래서 JSX가 뭔데? (정의와 기초 문법) 이 포스트는 노마드 코더의 ReactJS로 영화 웹 서비스 만들기 를 수강하고 추가적으로 각 개념에 대해 학습하여 정리한 내용입니다. JSX란? javascript 에 XML을 추가한 추가 확장 문법이다. React에 엘리먼트를 추가할 수 있게 해주며, 그 형태가 html 과 유사하여 FE개발자들의 편의를 도모한다. JSX 는 자바스크립트의 공식 문법이 아니다. 브라우저가 실행될 때 때 babel 을 통해 일반 자바스크립트 문법(React.createElement)형식으로 변환되어 실행된다. (즉, 바벨 설치가 선행되어야 한다.) React 개발에 있어 JSX 의 사용은 필수가 아니다. 다만 자바스크립트 코드 내에서 UI를 개발하는 데 직관성을 높여주는 효과가 있어 많이 사용된다. 지난 시간에 사용했던 .. 2022. 1. 17. [react 기초] 노마드 코더 강의 1 : 리엑트로 이벤트 만들기 이 포스트는 노마드 코더의 강의의 Events in React를 정리한 것입니다. 앨리먼트 생성하기 실제로는 잘 사용되지 않는 방법이지만 다음과 같이 새 앨리먼트를 생성할 수 있음. 보이는 것과 같이 id 또는 style 등의 프로퍼티 또는 텍스트를 넣어서 제작할 수 있다. const span = React.createElement("h3", {id:"first", style:{color:"red"}}, "hello world"); 뿐만 아니라 안에 이벤트를 넣어 생성하는 것도 가능하다. const button = React.createElement("button", { onClick: ()=>{ console.log("clicked") }, style:{ backgroundColor:"red" } },.. 2022. 1. 16. 이전 1 다음
