react (6) 썸네일형 리스트형 8. React Axios를 사용한 통신 이번 글은 axios를 사용한 서버 통신에 대해 다루겠습니다. axios? Promise를 사용하는 HTTP 비동기 통신 모듈입니다. npm install axios yarn add axios 로 설치합니다. 사용법 import axios from 'axios' 모듈을 불러옵니다. axios.post('url', {보낼 데이터}).then(()=> { }) axios.get('url').then((res) => { }); 위와 같이 then 을 이용한 콜백을 사용하거나 let result = await axios.get('url') 과 같이 async/await 를 사용하셔도 됩니다. 위에서 Promise를 사용한다고 했었죠? HTTP 코드가 400 / 500 반환 시, reject를 사용하여 에러를 던.. 5. React Router Wa! 어김없이 돌아온 심효근입니다! 오늘은 주소 마다 페이지를 다르게 렌더링하는 React Router 를 배워볼겁니다. 사용할 모듈은 "React Router Dom" 입니다. npm install react-router-dom 혹은 yarn add react-router-dom 로 사용할 수 있습니다. import React from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; const App = () => { return ( ); }; const Home = () => { return 홈; }; const About = () => { return 어바웃; }; export default App; 간단하게 Ho.. 4. React 생명주기 엄청 빠르게 돌아온 효그니가 이번에 설명할 것은 React Component의 생명주기입니다. 저번에 설명했듯이 Component 는 클래스형, 함수형 이 두 가지가 있다고 했었죠? 각각의 Component의 생명주기 방식이 다릅니다. Class Component class Test extends React.Component { componentWillMount() { console.log('componentWillMount'); } componentDidMount() { console.log('componentDidMount'); } componentWillReceiveProps(nextProps) { console.log('componentWillReceiveProps'); } shouldCompon.. 3. React State 안녕하세요! 효그니에요! 와! 리액트! 엄청 빨리 다시돌아왔다! 이번 글에서 설명할 것은 React Component의 state입니다. State란? Component가 갖는 유동적인 데이터를 의미합니다. Class Component 카운터를 하나 만들어보겠습니다! class Counter extends React.Component { constructor(props) { super(props); // React.Component의 생성자 메소드입니다. this.state = { // this.state로 state를 설정합니다. number: 0, // number 초기 값 설정 }; this.handleCounter = this.handleCounter.bind(this); // 함수 바인딩 } h.. 2. React Component (props, state, Class Component, Functional Component) 안녕하세요 효그니입니다! 꽤나 빠르게 새 글을 올리네요! 하핳! 오늘은 React에서의 Component에 대해 강의를 할 생각입니다! 자 시작해볼까요! 우선 Component란? React의 component란 상태 ( state ) 를 갖고 있고, 인자 값으로 Props 를 가지며, 반환 값으로 Element를 반환하는 "함수" 입니다! **** 이름의 첫 글자는 반드시 대문자여야합니다! **** {function App() { return ( Edit src/App.js and save to reload. Learn React ); } CRA를 사용하면 기본적으로 나오는 App Component 입니다! 반환 값을 어디서 보신 것 같다구요? 맞습니다. html 태그를 반환하죠!!! JSX라는 기법입.. 1. React란? 그리고 CRA 설정 안녕하세요 효근입니다! 오랜만에 블로그를 복귀했습니다! 회사업무랑랑 외주업무랑 너무 쌓이는 바람에 늦게 되었습니다 ㅠㅠ.. 일단 오랜만에 돌아온 기념으로 여태까지 안올리던 React 에 대해 올려볼려 합니다! 한번 시작해 볼까요? 일단.. React 란? 페이스북에서 개발한 Javascript 라이브러리입니다. 재사용 가능한 UI를 생성할 수 있게 해줍니다. Virtual Dom ( 가상 돔 ) 이라는 개념을 탑재하여, 변경된 부분만 선택적으로 렌더링 할 수 있습니다! 와! 돔을 여럿 갖고 있지 않을 수 있어, html 파일이 단 한 개인 single page application 형태를 띄우고 있어요! 덕분에 최소한의 처리로 변경에 대하여 컴포넌트를 업데이트 할 수 있다는 장점을 갖고 있습니다! 아래 .. 이전 1 다음
