리액트제이에스 썸네일형 리스트형 [react.js]onKeyPress 사용방법 ※ 이 강의는 velopert 님이 하셨던 강의 복습하는 중에 제 스스로 이해한 내용을 담은 내용입니다. 함수 및 기능 추가하기 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 }); }; //추가 명령을 수행할 함수 handleCreate = () => { const { input1, input2, list } .. 더보기 [react.js]리스트 글 지우는 방법 ※ 이 강의는 velopert 님이 하셨던 강의 복습하는 중에 제 스스로 이해한 내용을 담은 내용입니다. UI 구성 역시나 UI구성에서는 지울 버튼이 필요하겠죠? components/Board.js //state 아래 num = 0; *** {list.map(item => { return ( {item.input1} / {item.input2} X //추가 ); })} 다음은 몇번째 리스트를 지우는지 프로그램이 알게 해줘야겠죠? create 부분을 좀더 수정하겠습니다. components/Board.js //추가 명령을 수행할 함수 handleCreate = () => { const { input1, input2, list } = this.state; this.setState({ list: list.co.. 더보기 [react.js]리스트 추가하는 방법 ※ 이 강의는 velopert 님이 하셨던 강의 복습하는 중에 제 스스로 이해한 내용을 담은 내용입니다. 이제 입력이 완료되면 input의 모든 내용이 지워지고, 리스트에 내용이 추가되도록 만들어보겠습니다.버튼이 제일 먼저 필요하겠죠? UI 만들기 components/Board.js import React, { Component } from 'react'; class Board extends Component { state = { input1: '', input2: '' }; num = 0; //모든 input 제어 handleChange = e => { const { name, value } = e.target; this.setState({ [name]: value }); }; render() { re.. 더보기 [react.js]onChange 사용법 ※ 이 강의는 velopert 님이 하셨던 강의 복습하는 중에 제 스스로 이해한 내용을 담은 내용입니다. 입력 폼을 예로 들어 설명하겠습니다. UI구성하기 components/Board.js import React, { Component } from 'react'; class Board extends Component { render() { return ( input1 ); } } export default Board; App.js import React, { Component } from 'react'; import Board from './components/Board'; class App extends Component { render() { return ( ); } } export default .. 더보기 [VScode]터미널에서 VSCode 실행하기 터미널에서 react 설치하다가 바로 VSCode 바로 실행시키고 싶을때는 이렇게 하면 됩니다. 잘 따라와보세요.당연히 맨처음은 VS Code의 설정을 바꿔줘야 합니다. F1 키를 누르고 Shell 이라고 입력해주세요.셸명령 : PATH에 'code' 명령 설치 를 선택해주세요. 윈도우에서 해보니 조금 명령어가 다르더군요. 정확한 내용은 기억 안나는데 비슷한 뉘앙스였습니다. 허용이 되면 이제 터미널에서도 VS Code를 실행시킬수 있습니다.이젠 터미널을 켜야겠죠? (윈도우라면 Git Bash를 이용해주세요) 원하는 폴더 트리가 대략 이렇다고 합시다. root |-react |-example 원하는 폴더로 이동해야 하니까 터미널에 cd root/react 를 써서 이동한다음 code ./example 이렇.. 더보기 [react.js]state 업데이트 방법 state를 사용할때 최상위 객체는 문제 없지만, 하위 객체를 건드릴때 문제가 생깁니다. state = { number: 0, test: { a: 1, b: 2, c: 3 } }; 이런 state가 있다고 합시다.위의 예제를 보면 number의 값은 손쉽게 바꿀 수 있지만, test 아래 a의 값을 바꾼다던가 d의 값을 추가하려면 생각과는 다른 결과를 얻게 되는거죠. 그냥 무작정 바꿔본다고 하면 이렇게 하겠죠. this.setState({ number: this.state.number+1, test: { d: 4 } }) 하지만 이런 결과를 낳습니다. 기존에 있던 내용이 싹 지워지게 되죠?이럴땐 어떻게 하면 기존 내용에서 업데이트가 가능할까요? spread 문법을 사용하면 손쉽게 바꿀 수 있어요. App.. 더보기 [react.js]간단한 카운터 만들기 아주아주 간단한 카운터 만들기 App.js import React, { Component } from 'react'; import Counter from './Counter'; class App extends Component { render() { return ( ); } } export default App; Counter.js import React, { Component } from 'react'; class Counter extends Component { state = { number: 0 }; handleIncrease = () => { this.setState({ number: this.state.number + 1 }); }; handleDecrease = () => { this.setS.. 더보기 [react.js]비구조화 할당 방법 비구조화 할당 말이 좀 어려워서 저도 이 말을 처음에 듣고 뭔말인가 했었는데요. 구조화 되어 있는걸 파괴(비구조화) 한다는 뜻입니다. 본래 구조 대로 적었다면 훨씬 많은 텍스트를 적었어야 했는데, 구조를 깸으로서 간소화시켜주는 겁니다. App.js import React, { Component } from 'react'; import FunctionTest from './FunctionTest'; class App extends Component { render() { return ( ); } } export default App; FunctionTest.js import React from 'react'; const FunctionTest = props => { // const hello = props.. 더보기 이전 1 2 3 다음
