DEVLOG

props, state.... 리액트 공부할때마다 앞부분이라 꼭 한번씩 보게되기 때문에 거의 4번째 보는 놈들이지만 아직도 설명하라면 잘 못하겠다... 잘 정리해봐야징.. Props와 State는 리액트에서 데이터를 다룰 때 사용하는 개념으로 정말정말 중요하고 정말정말 헷갈리는 개념이다 꼭꼭 잘 정리해보자 Props properties의 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 props는 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(주로 App컴포넌트)에서 설정할 수 있다. 단! props는 state처럼 변경할 수는 없다. index.js에서 message라는 변수를 App.js가 받아서 props로 사용할 수 있게 하는 코드이다. 이처럼 부모(여기서 부모는 index.js)에게 상속..

React 시작하기 리액트도 CDN을 불러와서 사용할 수 도 있지만! 실제로는 이렇게 CDN을 사용하는 사람이 없다.... 여러가지 라이브러리를 동시에 사용하기 때문에 CDN으로 리액트를 사용하려면 리액트를 100% 활용할 수 없기 때문 So.. 많은 사람들이 리액트작업시에 webpack이나 parcel같은 번들러를 이용해서 작업을 한다. 모옹오든 모듈이나 여러가지 라이브러리를 동시에 합쳐 하나의 .js파일로 내보내는 것임!! 올... 또 리액트 파일은 JSX문법으로 작성되거나 최신 js문법으로 작성되기 때문에 babel을 사용해서 브라우저 호환성을 생각해야 한다. 정리 webpack --> 파일을 하나로 묶어주는 번들러 babel --> 브라우저 호환성을 위한 어쩌고 webpack, babel같은 리액..

REACT ?? 페이스북이 만든 사용자 UI구축을 위한 라이브러리(프레임워크 위치에 있다고 봐도 무방) 재사용이 가능한 UI를 생성 할 수 있게 해준다. 이 라이브러리는 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 UI를 렌더링한다. 따라서! 최소한의 DOM처리로 컴포넌트들을 업데이트 할 수 있게 해준다~! REACT 대표적인 특징 1. JSX문법 자바스크립트 안에서 HTML문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 확장 문법 class HelloMessage extends React.Component { render() { return ( Hello {this.props.name} ); } } JS안에서는 원래 저런 문법이 사용이 불가능하다, 하지만 ..

기본 세팅 var mainSwiper = new Swiper('.swiper-main-container', { hashNavigation: { replaceState: true, watchState: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', clickable: true, }, loop:true, autoplay: {disableOnInteraction:false}, on: { init: slideInit, slideChange: slideChangeEv, slideChangeTransitionEnd: slideChang..