이번 시간에는 Node.js기반의 Ajax 통신의 꽃 Axios를 배워보겠다 Node.js기반으로 움직이는 것들은 대부분 사용 가능하다고 생각한다 1. Axios Install 하기 npm install axios 2. Axios Import App.js에서 아래의 코드를 입력한다 import axios from 'axios' 3. 데이터 준비 아래의 링크에서, 간단하게 받아올 데이터를 준비한다 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB As of D..
이번에는 Redux라는 것을 공부한다 React에서 꼭 필요한 거라고 보면 된다 Redux란, 데이터를 전달할 때, 하나하나 거쳐가지 않고 한 번에 전달하기 위해서 사용하는 것이다. 상태를 관리할 때, 다른컴포넌트를 전달할 때, props로 전달해야 했는데, 한 번에 전달할 수 있는 별도의 store라는 저장소에 저장해서 사용할 수 있다 예를 들면, 공공기관에 전화했는데, 〇〇부서로 전화 해보시겠어요? 그 〇〇부서 전화하면 또 부서에서 〇〇부서로 전화해 보세요 라고 하면 깊은 빡침이 생길 것이다. Redux를 쓰게 한다면 그런 뻉뺑이 없이 바로 전화통화가 가능하게 하는 좋은 일이 생긴다고 한다 1. Redux 설치 npm install react-redux 2. 실험대상인 component를 생성한다 T..
드디어 라우팅이라는 것을 공부한다 앙귤러. js나 Vue.js에도 라우터가 있는데, 리엑트도 있을 거라 생각하고 많이 사용할 것 같기때문에 꼭 공부해야지라고 생각했다 리엑트 라우터란, 리엑트는 컴포넌트 기반이라서, 싱글 뭐시기ㅣ 페이지라 해서 페이지를 하나만 써야 하고, 새로고침이 되어선 안된다고 하더라, 그래서 링크를 클릭했을 때 바꿔 치겠끔 해주는 것을 한다 일단 시작하자 1. 라우터 설치 npm install react-router-dom 2. 실습 재료 만들기 (컴포넌트 만들기) 이렇게 page1.js 와 page 2.js를 만들어 준다 (앞글자는 대문자로 하자..) Page1.js const Page1 = () => { return( Page1 입니다 ); } export default Page..
이번 시간에는 useEffect를 사용해 보겠다 useEffect란? 최초 실행을 할때와 내가 원하는 시점에 실행되게끔 하는 함수이다 이렇게 말하면 모를 것 같으니 실습 바로 들어간다 1. Improt 하고. 함수 작성법 import './App.css'; import {useEffect, useState} from 'react' function App() { useEffect(() => { }); return ( ); } export default App; 일단 react에 있는 useEffect를 Import 해주고 그 밑에 다가 useEffect함수를 작성한다 2. 실습 재료 작성 useState에다가 숫자 아무거나 넣어서 하나 작성하고 useEffect에는 set함수를 통해 값을 넣어준다 그다음은..
이번 시간에는 useRef를 사용할 것이다 useRef는 참조한 DOM객체를 뜻한다 일단 뭔 말인지 모를 것이니, 바로 실습 들어간다 사용방법은 useRef를 Import 한 뒤에 아래를 추가한다. 밑에 화면을 참조하도록 하자 const myRef = useRef(); 그리고 테스트를 해보기 위해서 TextBox 2개랑 Button 하나만 추가해 보자 그다음은 myRef를 어디 어떻게 쓰는지 보여주도록 하겠다 당신이 원하는 DOM에다가 속성 ref를 추가하고 값을 저렇게 넣어주면 된다 그다음 함수 ( clickEvent )를 만들어 볼까? const clickEvent = () => { console.log(myRef.current); } 함수를 추가하고 console.log로 한번 내용을 보도록 하자 ..
이때동안 컴포넌트를 App.js 이라는 같은 파일에 다 넣어 놨었다. 하지만 글자수가 많아지면서 눈도 아파 질터이니 따로 분리하도록 한다 그편이 먼 미래에 유지보수도 좋아지기 때문이다 지금부터 이 컴포넌트를 옮겨 보도록 한다 일단 component라는 폴더를 생성하고 그안에다가 따로 격리 시키도록 하자 옮기고 싶은 컴포넌트의 이름과, 동일하게 JavaScript 파일을 생성한다 그리고 간단하게 복붙하였다 근데 const 다음의 함수명이 뭔가 심상치 않다. 아파보이기때문에 문제가 있을 것이다 그리고 App.js에 가봐도, TestComponent가 피가 흐르고 있는 것을 볼 수 있다 그이유는 App.js에는 더이상 TestComponent라는 것이 없기때문이다. 그러므로 import를 하도록 하자 impo..
React를 공부하면서, 서버로부터 List를 받아오고 어떻게 HTML에다가 뿌릴 수 있을까?라고 궁금해했다 그래서 이번엔 찾아보면서 드디어 하는 방법을 알아냈다. 일단 최상위에다가 실습할 컴포넌트를 추가한다 그다음은 컴포넌트를 만드는 함수를 생성해 주도록 하자 const ListComponent = () => { } 그다음 해야 할 일 1. List 데이터를 준비한다 (서버에서 받아온 값이라고 생각하자) 2. element를 만들 리스트 변수 하나 선언 2. for문으로 list값 을 2번에서 만든 변수에 add 하기! 3. 마지막으로 return 하기! 위의 순서대로 작성한다 const ListComponent = () => { let list = ['안녕', '디지몬', '네 꿈을 꾸면서', '잠이..
저번시간에 Component를 만들어 보았다. 근데 상위 Component에서, 하위 Component로 데이터를 보내고 싶었는데 보낼수가 없었다... 왜냐하면 함수가 다르기 때문이였다. 그래서 이번엔 props를 배워보았다. 저번시간에 내용은 이거시다. 일단 props를 이용해서 문자열을 하나 보내보자! 아래의 사진의 빨간색 네모안을 추가하였다 title이나 name이나 src나 저런 것들을 속성이라고 한다 React 도큐멘트에서도 저런식으로 쓰면 된다 카더라 저걸 보고 깨닫고 난 아래의 코드를 작성하였다 props의안에 title라는 속성이 담겨져 있다고 보면 된다 그리고 그걸 바로 변수에 담아서 jsx코드에 넣어 보았다 그러는순간 바로 간지나게 이렇게 되어버렸당 그렇다면 좀 더 응용을 해보자 데이터..
