props3 [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. [220413] 데이터(props)가 바뀌면(state) 화면이 바뀐다(component) 한 페이지를 그릴때 , 보여지는 화면에 관련된 모든 컴포넌트를 가져오는 리액트의 습성때문에 기본적인 요청&응답이 길다. 예) 로그인 버튼을 누름 -> 로그인에 관련된 컴포넌트 모두 가져옴. 데이터를 건드리지 않고 화면을 모두 그리고 난 후에는 완료되었다는 신호를 준다. ComponentDidMount라는 신호 (DOMContentLoad와 목적이 같음) 여기부터 비동기통신인 AXIOS를 사용해서 비동기적 통신으로 데이터와 접속함. 리액트는 NODEJS와 webpack의 도움을 받아서 이루어진다. webpack : 100개의 서로다른 js를 1개의 js로 통합시켜주는 번역기 ( = 번들파일) 왜? -> 다른 js 파일을 만들다보면 변수명이 겹치게 되는데 그런 일을 방지해줌. 등장배경 -> require이 .. 2022. 4. 15. 이전 1 다음
