나만의 개발 블로그

🙆‍♂️ redux 설치 npm install redux react-redux 위 코드로 redux와 react-redux를 설치합니다. 🙋‍♂️ redux 사용 import { createStore } from 'redux'; const store = createStore(); 먼저 store를 만들어줍니다. 그리고 reducer가 필요합니다. function reducer(currentState, action){ if(currentState === undefined){ return{ number:1 } } const newState = {...currentState}; return newState } 여기서 reducer 함수의 인자값인 currentState값은 현재 state 값이고 action은..

🙆‍♂️material-ui's Icon npm install @mui/icons-material 먼저 터미널에서 material icons 설치합니다. import SvgIcon from "@mui/material/SvgIcon"; import { SvgIconComponent } from "@mui/icons-material"; SvgIcon을 import 시킵니다. https://mui.com/material-ui/material-icons/ Material Icons - Material UI 2,000+ ready-to-use React Material Icons from the official website. mui.com 위 URL에서 사용하고 싶은 Icon 찾습니다. import AbcIco..

🙆‍♂️props props를 활용하면 컴포넌트에 인자값을 넣어서 생성할 수 있습니다. import React from 'react'; import './App.css'; function App() { const nav = [ {id:1,title:"Hello"}, {id:2,title:"World"} ] return ( ); } function Header(){ return ( Web ) } function Nav(props){ const list=[ ] for(let i=0;i

🙆‍♂️컴포넌트 HTML로 코딩을 하다보면 div들이 너무 많아져서 코드 해석에 어려움을 느낄 때가 있는데 이 때 한 단어로 축약 시켜주는 것이 Component 입니다. 컴포넌트를 만들기 위해서는 3가지 단계를 거쳐야합니다. 함수 만들기 return 안에 HTML 넣기 컴포넌트 태그 작성 🚀 함수만들기 function Modal(){ return ( ) } 이런식으로 함수를 만듭니다. 함수를 만들 때 HTML을 작성하는 App()함수 밖에 선언합니다. 그리고 함수 작명은 첫글자를 대문자로 작성해줍니다. let Modal = () => {} or const Modal = () => {} 이런식으로 만들 수 있습니다. 🚀 return 안에 HTML 넣기 function Modal(){ return ( 제목..

🙆‍♂️버튼 function App() { let [title] = useState(["맛집","영화","카페"]); let [like] = useState(0); return ( 블로그 {title[0]} 👍 {like} 2022/07/07 {title[1]} 👍 2022/07/07 {title[2]} 👍 2022/07/07 ); } 아직 코드에 대한 기능은 구현하진 않았지만 이런 사이트를 구현해봤습니다. 따봉 버튼이 눌린다면 인덱스값이 늘어나도록 하려면 onClick을 사용하면 됩니다. 실제로 HTML에서 인라인으로 자바스크립트를 사용하는 것과 비슷하지만 style 때 처럼 중괄호를 사용하셔야 합니다. 🚀state 변경 이제 함수를 이용해서 state를 변경하면 되는데 그냥 변경할 수 없습니다. st..

🙆‍♂️State State란 변수와 같습니다. 자료를 잠깐 저장하는 기능입니다.' import { useState } from 'react'; state를 사용하기 위해서는 위와같이 import가 되어있어야 합니다. useState를 쳐도 자동완성으로 import 시켜줄 때도 있습니다. function App() { let [a,b] = useState("맛집1"); return ( 블로그 게시글1 {a} 2022/07/07 ); } 이렇게 작성을해보면 이런식으로 페이지가 만들어지는데 useState의 정확한 사용법을 보면 let [a,b] = useState("맛집1"); 이런식으로 useState함수를 사용해서 값을 저장할 수 있습니다. 이때 a에는 state로 보관한 자료인 맛집1이 저장되고 b에..

🙆‍♂️JSX란 JSX는 JavaScript에 XML을 추가 확장한 문법으로 React 프로젝트에서 개발할 때 사용됩니다. 쉽게말하면 JavaScript 안에서 HTML을 쉽게 사용할 수 있게 합니다. 🚀className JSX에서 HTML 처럼 class를 부여하고 CSS를 통해서 스타일을 변경할 수 있습니다. 먼저 css파일을 import 하는 법은 이렇게 간단하게 할 수 있습니다. 계산기 앱 .header{ display: flex; background-color: black; width: 100%; color: white; padding-left: 2em; } class를 부여할 때 HTML에서는 class = "어쩌구" 로 하지만 JSX에서는 className="어쩌구"로 해야합니다. React..

📌React 설치 순서 Node.js 설치 VS Code 설치 프로젝트 생성 간단 React 구조 🙆‍♂️Node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 사이트에서 LTS 버전으로 설치하시면 됩니다. 🙋‍♂️VS Code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern ..