리액트강의 썸네일형 리스트형 [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]react-icons 사용하는 방법 react 아이콘 사용하기 https://react-icons.netlify.com/#/ 여기 사이트로 접속하세요. 설치방법 yarn add react-icons 사용방법 저는 이 중에서 IonIcon을 사용해보겠습니다. IonIcon 중에서도 갯수 다양하죠? 저는 닫기 아이콘을 사용해보겠습니다. ctrl+f 를 누르고 찾기를 누르면 됩니다. import { ICON_NAME } from "react-icons/io"; //예) import { IoIosClose } from "react-icons/io"; // 맨위에서 사용하고픈 아이콘을 골라 Icon_name에 써줍니다. *** //위에서 불러온 형태 그대로 사용해줍니다. 옵션 추가 import { ICON_NAME } from "react-icon.. 더보기 이전 1 2 다음
