리액트 강의 (3) 썸네일형 리스트형 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.. 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 다음
