class 는 className으로 변경oncilck은 onClick으로 변경출력시 변수 데이터 값은 {변수명} 또는 를 이용해서 묶을 경우개발자 도구로 root를 확인했을때 불필요하게 div로 묶었을 때 처럼 의미없는 div가 표시되지 않는다.import React from 'react';import './app.css';function App() { const name = undefined; return ( Hello :3 Hello {name} {name && Hello {name}} { ['💖','✨'].map(item=>( {item} )) } );}export default App;
객체 안의 함수(method)const apple = { name: 'apple', display: function () { console.log(`${this.name}: 🍎`); // 내 객체의 이름 this.name }, //키는 display 값은 함수};apple.display(); 생성자 함수// const apple = {// name: 'apple',// display: function () {// console.log(`${this.name}: 🍎`);// },// };// const kiwi = {// name: 'kiwi',// display: function () {// console.log(`${this.name}: 🥝`);// ..
리액트 슬라이드 js 문서를 제공하고 있는, swiper js 라이브러리 사용방법에 대해 알아보겠습니다. swiper 공식홈페이지에 접속하셔도 되고 바로 get started 페이지로 접속하셔도 됩니다. swiper 공식홈페이지 https://swiperjs.com/ swiper 공식홈페이지 >> get started https://swiperjs.com/get-started ctrl + ` 를 눌러 터미널을 열고 npm을 이용하여 swiper를 설치합니다. $ npm install swiper 상단의 demos 페이지를 선택합니다. demos페이지에서 다양한 슬라이드의 다양한 옵션을 미리 확인하고 리액트 라이브러리에서 사용예시나 다른 프렘임워크 사용 예시를 확인할 수 있습니다. https://swipe..
컴포넌트를 선언할 수 있는 방법에는 2가지가 있습니다. 함수형 컴포넌트와 클래스형 컴포넌트 인데요. 함수형과 클래스형을 비교하여 사용하는 법을 정리해보고자 합니다. 클래스형 컴포넌트와 함수 컴포넌트의 차이점 Class component 클래스 컴포넌트의 장점 state 기능을 사용할 수 있다. 함수를 이용한 라이프사이클 기능을 사용할 수 있다. 임의 메서드를 정의할 수 있다. Function component 함수 컴포넌트의 장점 클래스형 컴포넌트보다 선언하기가 쉽다. 클래스형 컴포넌트 보다 메모리를 덜 사용한다. 빌드 후 배포할 때, 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다. (근소한 차이 신경X) Function component 함수 컴포넌트의 단점 state와 라이프사이클 AP..
아티클을 생성하는 CreateArticle 컴포넌트를 만들고, App.js에서 onSubmit이라는 함수를 통해 자식 CreateArticle 컴포넌트로부터 매개변수 _title과 _desc를 전송받는다. CreateArticle 컴포넌트의 form 폼으로 전송된 속성 값을 onSubmit 함수를 통해 App.js에 보내고 state에 생성한다. 폼으로 전송한 속성 위치 확인하는 법 폼을 통해 임의로 '타이틀'과 '설명' 값을 전송하였다. 전송된 값의 위치를 확인하기 위해 debugger;를 이용하여 멈춰두고 개발자 도구에서 값이 저장된 위치를 확인한다. App.js let _title, _desc, _article = null; //변수 초기화 선언 else if (this.state.mode == "..
JSX란? jsx란 JavaScript를 확장한 문법입니다. 자바스크립트의 공식적인 문법은 아니지만 바벨에서는 개발자들이 임의로 만든 다양한 문법 지원을 위해 preset 또는 plugin들을 지원하고 있습니다. 더 간결한 구문을 제공하는 커뮤니티로는 react-hyperscript https://github.com/mlmorg/react-hyperscript hyperscript-helpers https://github.com/ohanhi/hyperscript-helpers 등이 있습니다. 리액트에서는 jsx 사용이 필수가 아니고, 빌드 환경에서 컴파일 설정을 원치 않을때는 jsx 없이 사용하는 게 편리할 수 있습니다. JSX 장점 리액트 안에서 UI 관련 작업을 할 때 시각적으로 편리하다. 리액트의 ..
리액트 주석 작성 방법 리액트 주석은 jsx 밖에서는 java script와 똑같이 사용가능 jsx 문법 안에서는 {/*....*/} 으로 작성할 수 있습니다. // 또는 /* */ 은 사용할 수 없고, 페이지에 노출됩니다. import './App.css' function App() { const name = '리액트 주석 작성법'; return ( {/* 주석은 이렇게 작성합니다. */} {name} // 이 주석은 화면에 표시 됩니다. /* 이 주석도 화면에 표시 됩니다. */ ); } export default App;