Study9 [리액트(React)] 9. 리액트라우터(react-router-dom) 깊게 공부하지 말고 기본적인 페이지 라우팅만 공부해보자 1. 설치 npm install react-router-dom yarn add react-router-dom 2. 사용법 // App.js import './App.css'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Setting from './components/setting'; import Home from './components/home'; function App() { return ( ); } export default App; // components/home.jsx import React from 'react'; import { useNavigate .. 2022. 1. 30. [리액트(React)] 7. 리액트훅(Hook) - 심화편 memo, useMemo, useCallback에 대해서 공부해보자 1. memo - 컴포넌트 자체를 메모이제이션해서 사용하는 훅 // App.js import React, { useState } from 'react'; import './App.css' import Greeting from './components/greeting' import Title from './components/title'; const App = () => { const [num, setNum] = useState(0) const onClick = () => { const num_plus = num+1 setNum(num_plus) } return ( ); }; export default App // components/ti.. 2022. 1. 26. [리액트(React)] 6. 리액트훅(Hook) - 기본편 본격적으로 훅을 공부해보자 우선 기본적인 것들만 먼저 공부를 하고 추후 필요할 때 다시 공부를 해야겠다. 시작하기 전에... 함수는 안에 정의된 모든 요소들은 호출이 될 때마다 재정의가 되는 것을 처음 정의만 하면 반복되지 않게 도와주는 것이 훅의 시작이다 1. useState - useState는 state를 기억해준다 useState(초기값)는 [state이름, state변경함수] 를 반환한다. state 변경시에는 state변경 함수를 이용해서 변경해줘야 한다. // components/greeting.jsx import React, {useState} from 'react'; function Greeting(props) { const [num, setNum] = useState(0) const g.. 2022. 1. 25. [리액트(React)] 5. 컴포넌트(Component) - 함수 다시 처음 화면으로 돌아왔다. 이번엔 함수형 컴포넌트를 공부해보자 리액트에서 처음 함수형 컴포넌트를 사용하게 하는 목적은 단순한 정적인 화면을 쉽게 렌더링 하는 것이었다. 그래서 클래스 컴포넌트처럼 기본 기능에 state관리나 lifecyle메서드들이 없다. React 버전 16.8부터 함수형 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있도록 React Hook을 새로 추가했다. 다음 장엔 React Hook을 이용해서 함수형 컴포넌트를 구현해보고 이번 장에서는 Hook 이전의 기능만 가지고 정적인 렌더링을 해보자 함수 컴포넌트 - 기본적인 함수 컴포넌트에서는 props만을 전달하는 정적인 렌더링만 가능 // App.js import React from 'react'; import './App.css' i.. 2022. 1. 24. [리액트(React)] 4. 컴포넌트(Component) - 클래스 리액트의 컴포넌트에는 클래스 컴포넌트와 함수 컴포넌트가 있다. 위 캡처본에 우측에 HOOK이라고 따로 빠져나온 게 있는데 이는 리액트 훅이라고 함수 컴포넌트를 위해 도입된 것이라서 따로 빼서 만든 것 같다. 리액트는 함수 컴포넌트를 밀고 있고, 다들 함수 컴포넌트를 사용하는 느낌이지만 기존에 이미 만들어져서 운영되고 있는 사이트들은 클래스 컴포넌트를 사용하고 있어서 둘 다 잘 알고 있어야 할 듯하다. 그래서 컴포넌트 부분만 리액트 공식문서의 순서대로가 아닌 클래스 컴포넌트 -> 함수 컴포넌트 순으로 공부를 할 예정이다! 클래스 컴포넌트 - React.Component를 상속해야 한다 // App.jsx import React, {Component} from 'react'; import './App.css.. 2022. 1. 23. [리액트(React)] 3. Dom과 렌더링 1. 로직 리액트DOM은 렌더링할 때, 이전의 것과 비교하여 변경된 엘리먼트만 DOM에 업데이트를 한다. 즉, 변한 부분만 렌더링을 한다는 뜻 같다. 2. 구조 가 있다. // index.js import React from 'react' import ReactDOM from 'react-dom' import './index.css' import App from './App' ReactDOM.render( , document.getElementById('root') ) ReactDom.render(렌더링할 아이들, 어디에 렌더링할 것인지) 이런 함수에 document.getElementById('root')가 있는 것을 알 수 있다. 즉 내가 return할 요소들이 index.html에서 id가 root.. 2022. 1. 22. [리액트(React)] 2. JSX 1. JSX 자바스크립트를 확장한 문법으로 React에서 엘리먼트를 생성할 때 보편적으로 사용하는 문법 - JSX에 표현식 표현하기 중괄호안에 자바스크립트 표현식을 넣어서 사용할 수 있다. // App.js import './App.css' const name = '2HS' const element = Hello, {name} function App() { return element } export default App - 여러 요소를 JSX로 표현하기 return 할 때 하나의 태그를 return해야한다. // App.js import './App.css' const name = '2HS' const job = 'Student' function App() { return ( {name} {job} ) .. 2022. 1. 22. 이전 1 2 다음
