개발공부/리액트16 React(11) 서버와 통신하려면 : aixos 목차 서버란? ajax란? axios 세팅하기 get하기 post하기 서버란? 서버라는 것은, 어떠한 것을 요청하면, 그에 맞는 것을 보내주는 프로그램이다. 말이, 진짜 너무 당연한 얘기로 듣고 흘려 들을 수 도 있겠지만, 이것은 굉장한 정보이다. 사용자가 원하는 어떠한 것에 대해 명확히 기입하고, 요청하는 코드에 인자로 실어서 보내면, 그에 맞는 것을 보내주게끔 하는 것이 서버라고했다. 따라서, 서버개발시 짜는 코드로는, "어떠한 사용자가 A라는 것을 요청하면 A를 보내주세요!"를 작성해야한다. ajax란? ajax를 이용하여, 공공 데이터 api를 불러오는 코드를 작성한 명글이 있다. 참고하도록 하자. https://joyjoon.tistory.com/17 AJAX에 대하여 AJAX란? AJAX(As.. 2023. 8. 5. React(10) LifeCycle과 useEffect 목차 1. LifeCycle이란? 2. useEffect란? useEffect 예시 LifeCycle이란? 컴포넌트는 생성이 될 수도 있고 : mount 재렌더링이 될 수도 있고 : update 삭제가 될 수도 있다 : unmount 컴포넌트의 일대기(?)를 life cycle라고 하는데, life cycle 특정 순간후에, 어떤 함수를 실행시키고 싶을 때, 알고 있어야하는 내용이다. 그걸 도와주는게 useEffect훅이다. useEffect란? useState와 더불어 react에 있는 내장 훅으로, import하여 사용한다. 메서드 구조로는 useEffect( function, deps? ); 로 쓴다 function : useEffect가 수행될 때 실행되는 함수 deps (optional함) : .. 2023. 7. 25. React(9) 상세 페이지 만들때 : Router 목차 1. Router 세팅법 2. Router 내장함수 종류 Routes Route Link useNavigate Outlet useParams Router 세팅법 쇼핑몰 페이지에서, 장바구니나 티셔츠 카테고리로 접속하여서 /cart /tshirts의, 상세 페이지를 만든다고 가정했을때, 리액트를 사용하지 않는다면, HTML파일을 하나 더 만들어서 사용을 해야한다. 이것은 굉장한 메모리 손해이고, 속도도 느리다. 따라서, 리액트를 이용하여 상세페이지를 만들어 보자. 이 때 리액트를 사용해서 만든다고 해도, state를 변경했을때 다른 페이지를 로딩하고 .. 등등.. 직접 짤 수도있겠지만, react-router-dom 라이브러리를 사용하면 쉽게 만들 수 있다. 먼저, 사용할 수 있도록 세팅을 해보자. .. 2023. 7. 19. React(8) 코드가 길어질 경우에 : export, import 컴포넌트나 함수, 변수 등이 코드가 너무 길어서, App.js에 쓰면 너무 길어질 것 같을 경우에, src 폴더안에 다른 파일.js을 만들고 코드를 작성한후, 다른 파일.js에 export코드를 작성 한 후, App.js로 돌아와 import코드를 작성하면된다. 이 때, export 해야하는 대상이 하나라면 : export default 변수명; import 변수명 from "다른 파일.js경로" export 해야하는 대상이 두개이상이라면 : export {변수명1, 변수명2}; import {변수명1, 변수명2} from "다른 파일.js경로"; 로 작성하면 된다. 2023. 7. 12. 이전 1 2 3 4 다음
