프로그래밍233 [220426] 회원가입창 만들기 / useEffect React의 목적 리액트는 UI를 렌더링하는 것이 목적이다. 또한 사용자의 입력에 반응하여 필요할때 UI를 다시 렌더링하는것이다. 일반적인 컴포넌트 함수들이 이에 해당하며 리액트에 의해 재실행된다. useEffect의 목적 화면에 무언가를 그리는 것애 관한 직접적인 행동들이 아닌것들을 Side Effect라고한다. Hook 속해있는 함수이며 보통 이펙트라고 한다. useEffect는 이런 이펙트 들을 처리하는것이 목표이다. (http 리퀘스트 등등..) useEffect의 구조 loop(무한반복)이 되기 쉽기때문에 return() 바깥쪽에 위치한다. useEffect( ()=>{}, [] ); useEffect의 첫번째 인자는 함수형태이며, 모든 컴포넌트 실행이 끝난 후 실행이 된다. (코드를 위에서부.. 2022. 5. 3. [220426] 회원가입창 만들기 / useState useState (state,function)이 실행되는 구조 첫째 인자값은 state를 초기화하는 값 state를 배열로 만들며 state[0]에 'aa'값이 들어가있다. const state = React.useState('aa') //['aa', ()=>]와 같다 console.log(state[0]) //aa 두번째 인자값은 state를 변화할때 실행할 함수 console.log(state[1])를 해보면 function 형태가 나오는 것을 볼 수 있다. 따라서 두번째 인자값엔 함수형이 들어간다고 볼 수 있다. const Form = () => { const state = React.useState('aa') console.log(state[0]) const handleSubmit = (e) =>.. 2022. 5. 3. [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. 이전 1 ··· 11 12 13 14 15 16 17 ··· 24 다음
