반응형 React/Practice3 React-redux를 사용한 게시판 만들기 with Example code 난이도 (실습 난이도 : 하, 소요시간 : 30min±) 실습 설명 오늘은 React-redux를 사용해서 게시판을 만들어볼 것이다. 사용할 컴포넌트는 기본으로 제공되는 App.jsx와 Post, Add, Find, Store를 새로 생성해서 사용할 것이다. 실습 먼저 컴포넌트를 생성하고 App.jsx에 import해주자. 하는김에 React-redux를 사용 할 것이기 때문에 store생성, Provider도 같이 감싸주겠다. [App.jsx] import { Provider } from "react-redux"; import { createStore } from "redux"; import "./App.css"; import Add from "./components/Add"; import Post f.. 2023. 1. 29. UseEffect, Props를 사용한 시계만들기 with Example code (실습 난이도 : 하, 소요시간 : 20min±) 이번엔 useEffect Hook과 props기능을 사용해서 만들수 있는 기초적인 시계를 만들어보자. 먼저 App.js에서 기본적으로 버튼과 그 버튼으로 켜지고 꺼질 수 있는 시계기능을 코딩해보자. App.js import React,{useState} from 'react'; import Time from './components/Time' function App() { const [showTime,setShowTime] = useState(false); return {showTime && } {setShowTime(!showTime)}}>Time Toggle } export default App; 가장 먼저 button을 생성하고 useState를 사.. 2023. 1. 27. React와 useState를 사용한 숫자입력기 Sample (실습 난이도 : 하, 소요시간 : 20min±) 먼저 해당 실습은 React와 useState를 연습하기 위한 단순실습으로 css 디자인이나 대단한코드는 사용되지 않을 것이다. 먼저 Create-React-App으로 React폴더를 생성해보자. 시작하기 앞서 기본셋팅된 값들을 지워주자. [App.js] import './App.css'; function App() { return } export default App; App.js는 이렇게 나머지는 지워주고 App.css와 index.css의 내용들은 전부 지우고 시작한다. npm start를 했을때 웹에 아무것도 안나와야 정상이다. 첫 실습이니 만큼 쉽고 간단한 계산기를 만들어 보자. import './App.css'; function App() { .. 2023. 1. 25. 이전 1 다음 반응형
