목록전체 글 (32)
easy-1
컴포넌트에서 보여줘야 하는 데이터가 변경될 때 useState를 통해 바로 나타내 줄 수 있다. React 16.8에서 Hooks라는 기능이 생기면서 함수형 컴포넌트에서도 상태관리가 가능해졌다. 1. useState를 사용하기위에 임포트해준다. 2. useState를 이용해 사용할 값을 초기화해준다. 3. 데이터 값을 변경할때는 setCount 를 사용하고 나타낼 때에는 count 를 사용한다. import React, { useState, useEffect } from "react"; const SamplePage = () => { // useState const [count, setCount] = useState(0); const [text, setText] = useState(""); const [..
React에서의 페이지 이동을 처리하기 위해 React Router를 사용할 수 있다. 1. 설치 > npm install react-router-dom 사용 2. 적용 > src/App.js 파일에 작업 > react-router-dom 을 임포트한다. import { Route, Switch } from "react-router-dom"; > 각 컴포넌트의 경로를 설정해준다. 설정된 경로를 이용하여 페이지 호출 가능 (ex) http://localhost:3000/sub) > 사용되는 컴포넌트들도 따로 임포트를 해주어야 호출 가능하다. const App = () => { return ( ); } export default App; ※ Switch를 사용하시던 분은 최신 버전에서는 Routes로 명칭이..
1. 런타임 환경으로 사용되는 Node.js 설치 > https://nodejs.org 사이트에서 다운로드 2. 설치 확인 > $node -v > $npm -v 3. 프로젝트 생성 > $npm create-react-app my-app 4. 프로젝트 실행 > $cd my-app > $npm start * 튜토리얼 가이드 : https://reactjs.org/tutorial/tutorial.html Tutorial: Intro to React – React A JavaScript library for building user interfaces reactjs.org