리액트 슬라이드 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 == "..

VS code를 더 편하게 쓰기 위한 플러그인 몇가지를 소개하고자 합니다. ESLint ESLint는 문법 검사 도구로 코드를 작성할 때 기본값을 포함하지 않거나 등의 실수를 하면 에러 메세지를 VS code 에디터로 바로 확인할 수 있게 도와주는 플러그인 입니다. 예시를 들어보겠습니다. 먼저 ESLint를 설치해주세요. View > Problems 에 들어가주세요. 하단 에디터에 보시면 위와 같이 에러에 대한 설명이 나오고 확인이 가능합니다. 에러 내용을 참고하여 문법을 고쳐주시면 됩니다. Prettier Prettier는 코드를 자동으로 정리해주는 도구입니다. 리액트를 작성할 때 코드의 가독성을 위해 사용하시면 좋습니다. 일정한 공백으로 정렬을 정리해주고 세미콜론(;)이 빠진 곳은 자동으로 세미콜론을..

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..

리액트란 리액트는 메타 (구 페이스북)에서 만든 오픈 소스로 자바스크립트 라이브러리입니다. 리액트를 이용하면 상호작용이 많은 사용자 인터페이스 UI를 보다 쉽게 만들고 성능을 아끼면서 최적의 사용자 경험을 제공할 수 있습니다. Component 리액트에는 컴포넌트 component 라는 선언체가 있는데, 컴포넌트가 최초로 실행한 '초기 렌더링'에서 데이터가 변경되면 해당 컴포넌트만 효율적으로 갱신하고 리렌더링 하는 방식으로 애플리케이션을 View에 집중하여 UI 구현을 쉽게 설계할 수 있도록 하고 있습니다. 컴포넌트는 재사용 가능한 API로 다른 프레임 워크 템플리의 HTML 태그를 문자열로 반환하는 형식과 다릅니다. DOM 조작 최소화 리액트는 Virtual DOM 방식을 사용하여 실제 DOM에 바로 ..