Framework & Library/React
-
React 기초 - ReduxFramework & Library/React 2021. 9. 22. 18:39
설정 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter } from 'react-router-dom'; import { createStore } from 'redux'; import rootReducer from './redux/reducers/reducers'; import { Provider } from 'react-redux'; const store = createStore(rootReducer); ReactDOM.render( d..
-
React 기초 - form 태그Framework & Library/React 2021. 9. 22. 18:35
form 태그의 구성 const [post, setPost] = useState({ id: '', title: '', content: '', }); const [posts, setPosts] = useState([ { id: 1, title: '제목1', content: '내용1' }, { id: 2, title: '제목2', content: '내용2' }, { id: 3, title: '제목3', content: '내용3' }, { id: 4, title: '제목4', content: '내용4' }, { id: 5, title: '제목5', content: '내용5' }, ]); 글쓰기 ㆍ 위 코드는 사용자로부터 제목과 내용을 입력받기 위한 양식으로 구성되어 있다. ㆍ 사용자로부터 입력받은 제목, 내용..
-
React 기초 - RouterFramework & Library/React 2021. 9. 22. 18:32
태그 ReactDOM.render( , document.getElementById('root'), ); ㆍ 우선, index.js에서 태그로 App 컴포넌트를 감싸준다. 태그 function App() { return ( ); } export default App; ㆍ App.js에서 태그를 이용해서 이동할 페이지에 대한 설정을 한다. 태그 const Header = () => { return ( 홈 로그인 ); }; export default Header; ㆍ Header.js에서 태그를 이용해서 이동할 페이지에 대한 경로를 설정한다. props의 이용 const LoginPage = (props) => { console.log(props.match.params.id); return ( props.hi..
-
React 기초 - propsFramework & Library/React 2021. 9. 22. 18:29
props의 사용 const HomePage = () => { const [boards, setBoards] = useState([]); useEffect(() => { let data = [ { id: 1, title: '제목1', content: '내용1' }, { id: 2, title: '제목2', content: '내용3' }, { id: 3, title: '제목3', content: '내용4' }, ]; setBoards([...data]); }, []); return ( ); }; export default HomePage; ㆍ 위 코드는 HomePage.js에서 Home.js로 boards 상태 변수와 setBoards 함수를 전달해주는 코드이다. ㆍ 태그의 boards={boards}와 ..
-
React 기초 - useRef 함수Framework & Library/React 2021. 9. 22. 18:24
useRef 함수의 사용 function App() { const myRef = useRef(null); return ( { myRef.current.style.backgroundColor = 'red'; }} > 색 변경 박스 ); } export default App; ㆍ useRef() 함수를 사용하여 Ref 객체를 생성한다. ㆍ 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정을 한다. ㆍ .current를 이용해서 우리가 원하는 DOM을 가리킨 후 해당 객체를 제어한다. GitHub - qlsdud0604/react-basic: 리액트의 기초를 학습하는 공간 리액트의 기초를 학습하는 공간. Contribute to qlsdud0604/react-basic development by c..
-
React 기초 - useMemo 함수Framework & Library/React 2021. 9. 22. 18:22
useMemo 함수의 사용 import { useState, useMemo } from 'react'; import './App.css'; function App() { const [list, setList] = useState([1, 2, 3, 4]); const [string, setString] = useState('합계'); const getAddResult = () => { let sum = 0; list.forEach((i) => (sum += i)); console.log(sum); return sum; }; return ( { setString('안녕'); }} > 문자 변경 { setList([...list, 10]); }} > 리스트값 추가 {list.map((item) => ( {it..