React.js (6) 썸네일형 리스트형 React proxy React proxy react를 개발할때 react app에선 기본으로 react dev server을 제공해주어 npm start를 하면 server가 생성됩니다. 하나의 컴퓨터안에 react와 node등 다른 여러 server을 2가지이상 사용하고싶을때 구별을 위해 port를 사용하게 되는데 react에서 ajax 기술을 이용해서 php, Django가 서비스되는 서버에 접속해서 data를 가지고오거나 데이터를 변경시키는 작업을 할때 fetch를 씁니다. 보통 port가 8000이면 fetch(‘http://localhost:8000/api_path')로 하게 되죠. 여기서 문제가 생기게 됩니다. react dev server을 쓸때 문제가 생깁니다. 이유는 port가 달라서 인데요. react d.. React Ajax 이번 시간은 React Ajax에 대해서 알아볼거에요. Ajax는 'Asynchronous JavaScript and XML'로 뜻 그대로 해석하면 비동기적 자바스크립트와 xml로 비동기적으로 xml을 가져올 수 있는 방법입니다.(최근엔 xml보다 json을 많이 사용하는데 json도 가능힙니다) 여기서 동기와 비동기에 대한 용어를 알고 넘어가셔야 합니다 동기는 직렬적인 느낌으로 하나의 코드의 해석이 끝나야 다음 코드로 넘어가는 것이고 비동기는 병렬적인 느낌으로 하나의 코드 해석이 끝날때 까지 기다리지 않고 동시에 진행이 가능합니다. 동기는 그냥 순서대로 해석을 하면 되니 순서만 잘 정리하면 되지만 비동기는 동시에 여러가지가 가능하니 언제 시작될지 타이밍을 정하면 됩니다. 이 말은 우리가 원하는 타이밍에.. React Route 이번 시간은 리액트 라우터에 대해서 배워볼 것입니다. 라우터가 뭘까요? 사전적 정의로는 '각 메시지에서 목적지까지 갈 수 있는 여러 경로 중 한 가지 경로를 설정해 주는 과정' 이라는데 그럼 이 것을 왜 해야할까요? 그것은 리액트의 장단점에서 찾아볼 수 있습니다. 리액트는 Single Page Application입니다. 그래서 페이지가 바뀔때 새로고침이 되지 않아 ux적인 측면에서 유용하다고 볼 수 있습니다. 이 장점 덕분에 많은 사람들이 사용하지만 단점도 존재합니다 앱의 규모가 커진다면 불 필요한 코드까지 렌더링 해야되서 로딩속도가 느려질 수 있습니다. 이 단점을 해결하기 위해 React router을 쓸 수 있습니다. 해당페이지에서 필요없는 정보들은 주소를 나눠서 담을 수 있습니다. 예를들어 abc.. React Hook(useEffect) 지난 시간에 react hook의 useState를 써보았고 이번시간에는 useEffect를 써볼거에요. useState에 대해 궁금하시다면 아래 링크를 클릭해주세요! cnwnsdms.tistory.com/entry/React-HookuseState React Hook(useState) React Hook은 React 내에서 Function component를 Class component 와 비슷하게 사용할 수 있도록 도와주는 기능이에요. 지난 포스트에서 언급한것 처럼 hook을 사용하면 Class component에서만 사용할 수 있었던.. cnwnsdms.tistory.com useEffect useState와 마찬가지로 먼저 import를 통해 useEffect기능을 가져옵니다. import Rea.. React Hook(useState) React Hook은 React 내에서 Function component를 Class component 와 비슷하게 사용할 수 있도록 도와주는 기능이에요. 지난 포스트에서 언급한것 처럼 hook을 사용하면 Class component에서만 사용할 수 있었던 state와 lifecycle을 Function component에서도 이용 가능해요. 이로인해 Class와 Function의 경계가 불분명해지고 있습니다. Hook을 통해 Function에서 state와 lifecycle을 사용할 수 있다고 크게 2가지를 언급했는데 state는 userState, lifecycle은 useEffect로 가능합니다. 지난 내용을 모르신다면 cnwnsdms.tistory.com/entry/React-class-vs-fu.. React class vs function React.js에서 하나의 js파일을 export할때 크게 class와 function으로 할 수 있어요 그렇다면 Class와 Function의 주요한 차이는 뭘까요?? Class 는 render라는 메소드가 필요하고 Function은 자기자신이 렌더 함수예요 또한 props는 class function 둘다가능하지만 state는 class에서만 사용 가능해요. (최근엔 hook이라는 새로운 기능을 사용하면 function에서도 state이용 가능하기도 하죠.) class에서 constructor(props) { super(props); this.state = '' } 로 prop을 받아오지만 function에서는 react가 함수를 호출할 때 첫 번째 파라미터의 인자 값을 props값으로 전달하도록 약.. 이전 1 다음
