나코일(나만의 코딩 일기)

리덕스라는 도구는 리액트에 종속된 도구가 아니라 독립적인 도구입니다. import React,{ useState } from 'react'; import './style.css'; export default function App() { const [number, setNumber] = useState(1); return ( Root { setNumber(number + 1); }}> ); } function Left1(props) { return ( Left1 :{props.number} ); } function Left2(props) { return ( Left2 : {props.number} ); } function Left3(props) { return ( Left3 : {props.number}..

useState 코드 import React,{useState} from 'react' import styled from "styled-components"; const InputCenter = styled.div` display: flex; justify-content: center; align-items: center; height: 100vh; ` const App = () => { const [count, setCount] = useState(0) const down = () =>{ setCount(count - 1); } const reset = () =>{ setCount(0); } const up = () => { setCount(count + 1); } return ( {count} ) }..

리액트에서 전역적으로 상태를 공유할 수 있도록 도와준다. import React, { createContext, useContext } from 'react' import "./style.css"; const themeDefault = { border : '10px solid green'}; const themeContext = createContext(themeDefault) const Sub1 = () =>{ const theme = useContext(themeContext) return( Sub1 ) } const Sub2 = () =>{ const theme =useContext(themeContext) return( Sub2 ) } const Sub3 = () =>{ const theme =u..

스타일 컴포넌트(syled components) : 리액트 컴포넌트 안에 쉽게 CSS를 내장할 수 있도록 도와주는 도구이다. 설치 명령어 npm install sytled-components import React from 'react' import styled from "styled-components"; const StyledButton = styled.button` //스타일 컴포넌트 color: white; background-color: purple; ` const Contact = () => { return ( Contact ) } export default Contact 이때 styled.button만으로 만드어지는 것이 아니라 백틱(`)을 사용합니다. 이 백틱도 함수인데, 이 함수를 호출하..

설치 명령어 $ npm install react-router-dom 라우팅(routing) : 사용자가 어떤 주소로 들어왔을 때 해당하는 적당한 페이지를 사용자에게 보내주는 것입니다. Router Router는 React 애플리케이션에서 SPA(Single Page Application)네비게이션을 쉽게 구현하기 위한 라이브러리입니다. import { BrowserRouter, Route, Routes } from 'react-router-dom' BrowerRouter는 리액트 라우터의 도움을 받고 싶은 컴포넌트의 최상위 컴포넌트를 감싸는 래퍼 컴포넌트입니다. Routes : 이 컴포넌트는 'Route' 컴포넌트의 컨테이너 역할을 합니다. Route : 각각의 라우트를 정의하는 컴포넌트입니다. 어떤 경..

리액트 과정 ) 설치 -> 수정 -> 배포 설치와 수정은 생략하겠습니다. 배포 npm start 명령으로 실행한 애플리케이션은 개발을 위한 애플리케이션입니다. 개발하기에는 좋지만, 서비스하기에는 용량도 크고 여러 가지 불필요한 메시지도 표시하기 때문에 실제로 서비스에 사용할만한 결과물은 아니라고 할 수 있습니다. 그렇다면 어떻게 하면 최적화된 효율적인 배포본을 만들 수 있는지 살펴보자. npm run build 명령어를 입력하면 빌드 명령이 시작됩니다. 참고로 배포한을 마드는 과정을 빌드(build)라고 합니다. 빌드를 마치면 프로젝트에 build라는 폴더가 생기고, build 폴더에는 index.html을 의존하는 다른 파일들이 존재하게 됩니다. build에 index.html을 보면 공백조차 없는 모..