리액트 슬라이드 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;
리액트 설치 전 준비 windows https://nodejs.org/ko/ Node.js 공식 홈페이지에서 LTS 다운로드 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 더보기 * Node.js를 사용하는 이유 Node.js + npm 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용할 수 있도록 하는 자바스크립트 런타임임. Node.js 패키지 매니저 도구인 npm이 함께 설치되어 패키지를 설치하고 버전관리가 가능함. macOS nvm을 이용하여 설치한다. (버전 업데이트와 버전 관리에 용이하다.) Node.js 홈페이지에서 다운 받아도 상관없다. 1. Visual Studio C..