Main
-
react - Promise 반환문제스마트팩토리 개발자 교육(23.05.08 ~ 23.10.27)7/React 2023. 9. 6. 18:55
*object로 반환 하고 싶은데 Promise로 반환이 되는 문제가 생겼다 1. axios then에서 원하는 object로 반환 하는 방법 - 실패 - response 자체가 Promise로 반환 2. 비동기로 처리 - 실패 - 혹시나 내부적으로 비동기 처리가 되지 않아서 일어난 일이라 예상하여 비동기 처리 시도 - 결과 변화 X 3. then으로 하지 않고 데이터만 저장해서 분리하기 - axios가 비동기 처리로 실행되기 때문에 데이터를 불러오는데 순서 오류가 생긴다 4. 비동기 처리 - object로 반환 되지만 - app.js 에서는 Promise로 받아진다 *해결방법 1. 값을 변경하는 함수를 만든다 2.위의 함수를 적용할 별도의 함수를 만든다 *이유는 모그렜지만 별도의 변수로 따로 만들어 사..
-
React 07 - Lifecycle스마트팩토리 개발자 교육(23.05.08 ~ 23.10.27)7/React 2023. 8. 31. 20:16
*컴포넌트의 생명 주기 - mount : 컴포넌트 생성 - update : 컴포넌트 재렌더링 - unmount : 컴포넌트 삭제 - 컴포넌트 생명주기 중간마다 관여를 할 수 있다 *과거의 Lifecycle class Detail2 extends React.Component { componentDidMount(){ //Detail2 컴포넌트가 로드되고나서 실행할 코드 } componentDidUpdate(){ //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드 } componentWillUnmount(){ //Detail2 컴포넌트가 삭제되기전에 실행할 코드 } } *현재의 Lifecycle import {useState, useEffect} from 'react'; function Detail()..
-
React 06 - Route스마트팩토리 개발자 교육(23.05.08 ~ 23.10.27)7/React 2023. 8. 29. 19:32
*Route 적용 *Link 적용 *useNavigate() - 페이지 이동 도우미 - 뒤로가기 만들기 * 숫자만큼 뒤로가기, 앞으로가기 가능 *404 페이지 만들기 - * = 그외 모든것 *Nested Routes - 라우트 안에 라우트 - 부모페이지와 자식 페이지 두개다 보여준다 * 단 Outlet을 사용해야한다 - Outlet 부분에 자식 페이지 생성 *파라미터 받기 -router를 통해 파라미터 값 허용해서 전달 받을 수 있다 - 전달 받은 id 값 가져오기
-
React 03 - Component스마트팩토리 개발자 교육(23.05.08 ~ 23.10.27)7/React 2023. 8. 27. 22:27
*div 대신 컴포넌트를 사용하면 div를 줄일 줄일수 있다 컴포넌트 만드는 법 1. function 만들고 - 다른 function 안에 있으면 안된다 2. return () 안에 html담기 - 최상의 태그는 하나만 있어야 한 3. 쓰기 - 두개다 같은 역활 *컴포넌트로 만들면 좋은 사례 1. 반복적인 html 축약할 떄 2. 큰 페이지들 3. 자주변경되는 것들 *컴포넌트 단점 다른 컴포넌트에 에 있는 state가져다 쓸 수 가 없다 *참고 다대신 사용가능 *동적인 UI 만드는 방법 1. html css로 미리 디자인 완성 2. UI의 현재 상태를 state로 저장 3. state에 따라 UI가 어떻게 보일지 작성 - if () {} 사용불가, 중괄호 안에 중괄호 작성 불가 - 3항 연산자로 해결 +..
-
React 02 - state스마트팩토리 개발자 교육(23.05.08 ~ 23.10.27)7/React 2023. 8. 27. 11:00
*React는 return 안에 최초 태그 안에서만 코드 작성가능하다 - 최상위 태그가 2개 이상일 경우 에러 발생 *state - 임시로 사용할 데이터는 useState로 담아준다 - useState의 반환 데이터를 Destructuring 생성해 사용 가능하다 - a는 State에 있는 데이터, b는 함수가 남는다 *변수와 state의 차이점 변수는 값이 바뀌면 html에 반영이 안된다 state는 값이 바뀌면 html이 재랜더링 되어 반영이 된다 값이 자주바뀌면 state 바뀌지 않으면 변수를 사용한다 *state 변경 방법 - = 로 변경이 불가하다 - 변경함수를 사용한다 *state 변경함수의 특징 - 기존 state == 신규state의 경우 변경안해준다 *array / object의 특징 -..