아리의 개발 일상

리액트 Global State 여러 컴포넌트 간에 상속 없이도 자기가 원하는 컴포넌트에만 공유할수 있는 것을 말한다. 데이터를 공유할 컴포넌트 context 를 만든다. import { createContext,useState } from "react"; export const AdminFlagContext = createContext({}); //사용법 export const AdminFlagProviders =(props) => { const {children}=props //플래그 만들기 const [isAdmin,setIsAdmin] =useState(false); //AdminFlagContext 안에 provider 이 있으으로 감싸면 된다 return ( {children} ) } index..

React 메모이제이션 App이라는 컴포넌트가 있으면 아래 child1,2,3,4, 의 하위 컴포넌트가 존재 한다 App컴포넌트가 랜더링 되면 아래의 하위 컴포넌트도 모두다 랜더링 되게에 메모리를 많이 소비하게 된다 이러한 문제점을 해결하기 위해 memo,useCallback,useMemo를 사용하여 상위 컴포넌트가 랜더링 되어도 랜더링 하게 하는걸 막을수 있다 폴더 구조 App코드 import { Child1 } from './components/Child1.jsx'; import { Child4 } from './components/Child4.jsx'; export const App = memo(() => { console.log("APP 랜더링") const [num, setNum] = useSt..

1. 외부css 파일 사용하기 2. css 모듈 사용하기 // Button.module.css .button { background-color: blue; color: white; } // Button.js import React from 'react'; import styles from './Button.module.css'; const Button = () => { return Click me; } export default Button; 파일 이름을 ~~~.modul.css로 지정하여 css 모듈을 만들수 있다 node-sass 를 이용하면 scss파일로 만들어서 위와 같은 방식으로 외부모듈로 사용할수 있다 설치할때 터미널에 npm install node-sass 를 입력하면 설치가능하다 scss ..

리액트 2일(속성 이용법,외부 컴포넌트 사용,useState,상속 ) 노드 js 환경에서 리액트 사용 index js 파일에 아래하고는 조금 다르지만 App이라는 파일을 import해서 불러오는 형식의 파일이 있을거다 import React from "react"; import ReactDOM from "react-dom"; import {App} from "./App.jsx" //이파일을 사용 ReactDOM.render(, document.getElementById("root")); import {ColorMassage} from "./components/ColorMassage.jsx"; import { useEffect, useState } from "react"; export const App =..

리액트 공부1일차 리앤트 기본적인 사용법 컴포넌트를 만들어 컨테이너에 집어넣어서 사용할수 있다 클래스 이용방법 componentDidMount는 컴포넌트가 화면에 나타낼때에 실행되는 메소드로 현재 위 코드는 1초마다 componentDidMount 안의 내용이 실행되어서 현재 시간을 나타내는 코드이다 이벤트 연결하는방법 class App extends React.Component { constructor(props) { super(props) this.state = { count : 0 } this.countup = this.countup.bind(this) //bind는 이벤트 연결해주는 메소드 } render() { return {this.state.count} 클릭 } countup (event) ..