본문 바로가기

리액트제이에스

[react.js]classNames 사용방법 설치 yarn add classnames 사용방법 ClassNames.js import React from 'react'; import classNames from 'classnames/bind'; import styles from './ClassNames.scss'; const cx = classNames.bind(styles); const ClassNames = () => { return test; }; export default ClassNames; 이렇게 조건부로도 써줄수 있다는게 좋네요. 하지만 매번 cx 써줘야 된다는 것도 조금 불편하긴 하네요. ClassNames.scss .bg { background: blue; } .txt { color: white; } 더보기
[react.js]CSS Module 사용방법 설치 create-react-app2.0 부터는 설치 필요 없음 파일명 뒤에 module.css / module.scss 붙여주면 알아서 작동됩니다. 사용하는 이유 다른 컴포넌트에서 같은 클래스명을 사용해도 중복이 안되고 고유의 값을 가집니다. 예를 들면 .bg 라는 클래스를 사용해도 실제 구현에선 CssModule_bg_SFmwr 이렇게 됩니다. 사용방법 CssModule.js import React from 'react'; import styles from './CssModule.module.scss'; const CssModule = () => { return test; }; export default CssModule; CssModule.module.scss .bg { background: blu.. 더보기
[react.js]오른쪽 버튼 사용방법 오른쪽 버튼 클릭 이벤트 사용방법 onContextMenu를 사용하면 됩니다. App.js import React, { Component } from 'react'; class App extends Component { handleLeftClick = () => { alert('Left Click'); }; handleRightClick = e => { e.preventDefault(); alert('Right Click'); }; render() { const { handleLeftClick, handleRightClick } = this; return ( right test ); } } export default App; 오른쪽 버튼 눌렀을때도 이벤트가 잘 발생하네요. 더보기
[react.js]immer 사용방법 immer.js 쓰는 이유? 단순히 state의 1depth 정도라면 손쉽게 변화가 가능하지만, 하위 depth가 엄청나게 많아진다면 정말 불편해집니다.(불변성 어쩌구 하는데 솔직히 이 말은 이해는 했지만, 참 안와닿고 먼 단어네요. 그냥 데이터 안날라가고 원하는 부분만 업데이트 해주기가 쉽지 않다는 말로 해석하시면 될듯요.)그럴때 immer.js를 써주면 손쉽게 바꿀 수 있습니다. immer 설치방법 yarn add immer immer 사용방법 기존 이런 소스가 있다고 합시다. 아주아주 간단하게 카운터를 만들었습니다. App.js import React, { Component } from 'react'; class App extends Component { state = { counter: { num.. 더보기
[react.js]react-router 사용방법 설치방법 yarn add react-router-dom 사용방법 우선 환경셋팅을 해줘야합니다. index.js import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; //추가 import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( //추가 , //추가 document.getElementById('root') ); // If you want your app to work offline and load faster, yo.. 더보기
[react.js]업데이트하기 ※ 이 부분은 앞서 제작한 리스트와는 형태가 조금 다릅니다. 복습 겸 컴포넌트 쪼개볼겸 새로 제작한 코드이니, 참고 바랍니다. 이미 제작한 리스트 update 하기 App.js import React, { Component } from 'react'; import Form from './components/Form'; import List from './components/List'; class App extends Component { state = { list: [] }; num = 0; handleCreate = (input1, input2) => { const { list } = this.state; this.setState({ list: list.concat({ num: this.num++, i.. 더보기
[react.js]ref 사용방법 리스트 등록 후 자동으로 input1에 위치 시키고 싶을때 커서를 강제로 바꾸고 싶을때 사용하는 기능 components/Board.js import React, { Component } from 'react'; class Board extends Component { state = { input1: '', input2: '', list: [] }; num = 0; resetInput = null; //추가 //모든 input 제어 handleChange = e => { const { name, value } = e.target; this.setState({ [name]: value }); }; //추가 명령을 수행할 함수 handleCreate = e => { e.preventDefault(); //원.. 더보기
[react.js]onSubmit, preventDefault 사용방법 ※ 이 강의는 velopert 님이 하셨던 강의 복습하는 중에 제 스스로 이해한 내용을 담은 내용입니다. handleKeyPress 지우기 submit으로 바꾼다면 엔터 기능이 내장 되어 있으니 삭제 input 부분 form으로 감싸기 components/Board.js import React, { Component } from 'react'; class Board extends Component { state = { input1: '', input2: '', list: [] }; num = 0; //모든 input 제어 handleChange = e => { const { name, value } = e.target; this.setState({ [name]: value }); }; //추가 명령을 수.. 더보기