본문 바로가기

분류 전체보기280

[220425] 함수컴포넌트로 로그인기능 생성, props 값 넘기기 클릭시 비활성화되고, 1초 후 활성화되는 버튼 만들기 import React,{useState} from 'react' //함수형 컴포넌트니까 this를 사용하지 못하니까 useState로 state를 만든다 //한번에 두가지 값 처리를 위해서 객체로 넣는다 const [values,setValues] = useState({email:'',password:''}) //초기값 넣기 const [submit,setSubmit] = useState(false) //버튼클릭유뮤를 담는 변수 const Login = () => { const {name, value} = e.target const handleChange = (e) => { console.log(e.target.name, e.target.values.. 2022. 5. 2.
[220425] 함수형 컴포넌트, Hook, useState, useEffect 단번에 리액트 시작하기 //function은 임의로 정한 디렉토리명 $ npx create-react-app function $ cd function $ npm run start 자바스크립트와 리액트의 함수 //자바스크립트식 function a(){ console.log('hello world') } a() //리액트식 function A(){ return Hello world } 객체를 만드는 리액트 //JSX ->(babel)-> Javascript //클래스 문법, 객체를 만듬 //컴포넌트의 목적은 객체라고도 할 수 있다 class App extends React.Component{ render(){ return( 버튼1 버튼2 ) } } //이런식으로 객체 만듬 { type:'span', prop.. 2022. 5. 1.
[220422] 리액트로 덧글기능 만들기 (CRUD 중 UD), 생명주기함수 CRUD 중 U 만들기 클릭했을때 input박스가 나오도록 만들기 //App.jsx componentDidMount(){ //최초실행 this.setState({ ...this.state, list:[ //클릭유무를 알 수 있도록 updateflag 추가 {userid:'ingoo7022',content:'안녕하세요2222',date:'2022-04-21',updateflag:true}, ... //CommentList.jsx handleSubmit = e=> { e.preventDefault() console.log(this.state.value) const obj={ userid:'ingoo7022', content:this.state.value, date:'2022-04-21', //클릭유무를 알 .. 2022. 4. 29.
[220421] 리액트로 덧글기능 만들기 (CRUD 중 CR) 기초세팅 전체를 이루는 Comment import React,{Component} from 'react' import CommentForm from './CommentForm' import CommentList from './CommentList' import '../../assets/comment.css' class Comment extends Component{ render(){ return( {this.props.children} ) } } export default Comment 입력폼을 만드는 CommentForm import React,{Component} from 'react' class CommentForm extends Component{ render(){ return( ) } } exp.. 2022. 4. 26.
[220420] 리액트로 구구단 만들기 자바스크립트로는 만들어봤지만 리액트로는 처음 만들어보는 구구단! 기초세팅 구구단을 만들 GuguClass.jsx //GuguClass.jsx import React, {Component} from 'react' class GuguClass extends Component{ render(){ return( Hello World! ) } } export default GuguClass GuguClass.jsx를 가져와서 실행할 App.jsx //GuguClass.jsx를 가져와서 실행할 App.jsx import React, {Component} from 'react' import GuguClass from './components/GuguClass' class App extends Component{ re.. 2022. 4. 25.
[220420] 리액트에서 css 사용하기 webpack에서 css를 사용하기 원래는 사용 못한다. 왜냐, webpack을 사용하는것은 node.js환경이라는 말과 같기때문. 하지만 import되는 파일은 웹팩이 알아서 번들을 만들고 있으니까 css파일도 import해서 번들을 해주면 어떨까 이걸 위해서 다음 라이브러리를 설치해준다. $ npm install -D mini-css-extract-plugin css-loader webpack.confing.js에 다음 코드 작성 string 형태인 백틱(``)안의 내용을 구분하기위해 vscode-styled-components를 설치했다. const MiniCssExtractPlugin = require('mini-css-extract-plugin') ... module:{ rules:[ {...}.. 2022. 4. 25.
[220403] 클래스 정리 똑같은거 계속 작성해서 만들기 귀찮아! 라는 의도로 사용하고있는 함수. 그와 마찬가지로 같은 내용의 객체를 계속 선언하기 귀찮아!라는 명목으로 만들어진 객체전용함수가 클래스. (함수와 클래스 둘다 typeof로 확인해보면 function 이라고 결과가 나오기때문) 클래스를 만드는 방법 클래스는 앞에 function 대신 class로 선언한다. 클래스명은 앞자리가 대문자다. 클래스 생성자 메서드인 constructor를 통해 초기값을 만들 수 있다. 초기값을 불러와서 사용할때는 new를 사용해서 생성한다. new Ingoo('aaaa')를 호출하면 생기는 일 1. 새로운 객체가 생성된다 2. 넘겨받은 인수 'aaaa'와 함께 contructor가 자동으로 실행된다. class Ingoo{ //Ingoo라는.. 2022. 4. 22.
[220419] 최소기능으로 리액트 시작하기 / 세부설정하기 '최소기능'으로 리액트 초기설정하기 리액트를 시작하기 위해서는 총 4가지가 필요하다 1. react 2. react-dom 3. babel 4. webpack $ npm install react react-dom $ npm install -D webpack webpack-cli $ mkdir dist src webpack.config.js, index.html 생성 src디렉토리 안에 index.jsx 생성 -> 리액트 문법을 위한 파일 index.jsx에 hello world을 입력해서 상태 체크하기 const React = require('react') const ReactDOM = require('react-dom') class App extends React.Component{ state={ va.. 2022. 4. 20.
[220418] webpack이란? 프론트엔드를 한다면 필수적으로 알아야할 webpack. 프론트엔드 개발을 하지 않더라도 알아두면 좋은 webpack. webpack이란? html에 들어가는 js 파일들을 뭉쳐서 하나로 만들어주는 방식을 모듈 번들링(=webpack_)이라고 한다. 굳이 하나로 뭉쳐서 하나로 만들어야하는 이유는? 1. 한 페이지를 구성하기 위해 존재하는 여러 파일들을 하나의 파일로 만들어 읽기때문에, 웹페이지 성능이 최적화된다. 2. 혼자서 프로그램을 작성할때도 변수명이 겹치는 것을 파악하기 힘든데, 여럿이서 사용한다면 더 힘들어진다. 하지만 하나의 파일로 묶어줌으로써 개발할때 편리해진다. 기초개발 환경세팅 test폴더를 만들고 그 안에 index.html, dist폴더, src폴더를 만든 후 webpack 라이브러리를 .. 2022. 4. 19.
[220415] 빙고게임 완성하기 - 02 클릭하면 X -> O 순서대로 찍히게 하기 한번 클릭한 곳은 다시 클릭해도 O/X가 바뀌지 않게 하기 클릭한 곳의 배열과 빙고조건을 충족시키는지 출력 //Square 컴포넌트 위에 작성 const calcuateWinner = (squares) => { const lines = [ [0,1,2], [3,4,5], [6,7,8], [2,4,6], [0,4,8], [0,3,6], [1,4,7], [2,5,8], ] for(let i=0; i 2022. 4. 17.

티스토리툴바