프로그래밍/react40 [220428] useReducer useReducer가 나오게 된 배경 react로 전역상태를 만들기 위해 반드시 사용해야할 redux react-redux 이렇게 부를 정도로 긴밀한 관계다. 하지만 redux의 단점은 사용할수록 코드가 복잡해지고 계속해서 컴포넌트로 감싸는 wrapper지옥을 만드는 것이다. 이런 단점을 보완하기 위해 hook이 나오면서 react팀은 redux의 reducer를 따로빼서 기능으로 만들었다. 전역상태를 하기 위해 원래 redux에서 사용했던 reducer기능을 가져온것. ( 상태를 바꾸는 코드를 몰아넣을 수 있는게 reducer ) redux의 단점 const [info,setInfo] = useState( { user:{ userid:'', userpw:'', username:'' }, notice:{.. 2022. 5. 6. [220428] React.memo / useMemo / useCallback / Context 리액트의 개념&흐름 정리 JSX코드로 소통하는 리액트 리액트 앱에서는 컴포넌트를 통해 작업을 수행한다 컴포넌트는 하나의 작업을 수행하며 JSX코드를 반환한다. 왜? 리액트가 JSX코드를 알아들으니까. state의 변화로 바뀌는 props, 전역변수 context 컴포넌트에서 state, props, context로 작업하고, props는 사실 state의 변화로 생성되는 값이다. context는 리액트에서 전역적으로 사용되는 변수라고 보면된다. state의 변화가 일어날때마다, 컴포넌트의 변화나 컴포넌트에게 영향을 주는, 어플리케이션 일부에 영향을 미치는 데이터를 변경하게 된다. 컴포넌트에서 state를 변경할 때마다 변경된 state가 있는 컴포넌트는 재평가된다. = 컴포넌트 함수 재실행 재평가된 결과.. 2022. 5. 5. [220427] 코드의 분리 코드 분리 코드를 분리해 4월46일에 만든 로그인기능을 유지해보았다. 다른 컴포넌트처럼 import로 가져올 수 있고, export default로 내보낼 수 있다. // 내보낼때 export default useForm // 가져올때 import useForm from './useForm.jsx' 비동기 코드 넘기기 중간에 상태값이 바뀌어서 재실행될때 코드는 비동기적으로 움직인다. 올바르게 회원가입을 했을때 1초후에 가입한 정보를 띄우는 비동기적 코드를 작성해보았다. // 강제적으로 비동기 코드를 작성 // submit을 클릭했을때 items를 최신상태로 바꾸기 const request = async (items) => { const result = await new Promise((resolve,re.. 2022. 5. 4. [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. 이전 1 2 3 4 다음
