분류 전체보기142 [React] 1-4. JSX를 이용해 카운터 앱 만들기 (1) JSX를 이용하여 버튼 클릭 횟수를 알려주는 앱 만들기 (easier way) 📌 JSX JSX는 Javascript를 확장한 문법이다. HTML에서 사용한 문법과 흡사한 문법을 사용하여 기본적으로는 React Element를 만들 수 있게 해 준다. (React.createElement() 대체!) 📌 이전 코드와 JSX를 이용한 코드 비교 1. h3생성 이전 코드 const h3 = React.createElement( "h3", { onMouseEnter: () => console.log("mouse enter"), }, "Hello, I'm a span." ); JSX를 이용한 코드 const Title = ( console.log("mouse enter")}> Hello I'm a title ).. 2023. 5. 23. [React] 1-3. React.js로 카운터 앱 만들기 (2) React JS로 버튼 클릭 횟수를 알려주는 앱 만들기(harder way) 이전 시간에 이어서 3. button 생성 후 화면에 렌더링하기 span 때랑 똑같이 진행하면 된다. 4. span과 button을 모두 화면에 렌더링하기 - 결과로 root DOM node()의 자식으로 span과 button이 차례로 들어간다. * span의 html tag를 "h3"로 수정하면 글자와 버튼 사이 줄바꿈이 가능하다. 5. h3와 button에 event listener 주기 (property 수정) - h3의 property로 onMouseEnter를, btn의 property로 Onclick을 부여해 주었다. - property에 이벤트명 앞에 on을 붙여 camelCase로 작성하면 event listen.. 2023. 5. 23. [React] 1-2. React.js로 카운터 앱 만들기 (1) React JS로 버튼 클릭 횟수를 알려주는 앱 만들기 (harder way) * React JS 사용 시에는 HTML에 직접적으로 내용을 작성하지 않는다. 대신, Vanilla JS와 React JS를 이용하여 element를 생성한다. * 이번 시간에 배우는 React JS로 element를 생성하는 방식은 실제로 잘 쓰지 않는 방식이다. (React JS를 이해하기 위한 방법으로, 어려운 방법이다.) 1. span 생성 (React로 Element 생성하기) - 변수명은 꼭 HTML tag명이 아니어도 된다. (원하는 변수명으로 설정 가능하다.) - 윗줄에서 이미 React를 import했기 때문에 createElement function을 가진 React object에 접근 가능하다. - crea.. 2023. 5. 23. [React] 1-1. 바닐라 JS로 버튼 클릭 횟수를 알려주는 앱 만들기 (2) 바닐라 JS와 React JS로 버튼 클릭 횟수를 알려주는 앱 만들기 (harder way) 바닐라 JS로 만들기 (vanilla.html 참고) 1. HTML을 작성한다. 2. JS에서 가져온다. 3. event를 감지한다. 4. 데이터를 업데이트한다. (HTML 또한 업데이트함.) Total clicks: 0 Click me 위와 같은 방식으로 작성하면 코드가 길어질 경우 혼란스러워질 것이고, 시간도 오래 걸릴 것이다. React JS로 만들기 (index.html 참고) 우선, 의 src 속성을 이용해 리액트를 실행시키는 코드를 작성한다. 다음 시간에 이어서 ...! ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders ReactJS로 영화 웹 서비스 만들기 – 노마드 코더.. 2023. 5. 23. 이전 1 ··· 30 31 32 33 34 35 36 다음
