쭈링이.log 쭈링이.log

Selectselect 란 여러 MenuItem 컴포넌트를 사용하여 옵션들 중 선택하여 제공하는 컴포넌트이다.Material UI의 select 컴포넌트는 다양한 설정과 스타일링 옵션을 제공하여 옵션을 선택 할 수 있다. import { Box, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent } from "@mui/material";import { useState } from "react";function Mui() { const [age, setAge] = useState(''); const handleChange = (event: SelectChangeEvent) => { setAge(event.target.valu..

Checkboxcheckbox란 사용자가 선택할 수 있는 체크박스를 생성하는 데 사용된다.Material UI의 Checkbox 컴포넌트는 다양한 설정과 스타일링 옵션을 제공하여 하나 이상의 옵션을 선택 할 수 있다. import { Checkbox } from "@mui/material";function Mui() { const label = { inputProps: { 'aria-label': 'Checkbox demo' } }; // label속성을 선언한다 return ( // defaultChecked 기본으로 체크표시 설정 // 클릭 불가능 설정 // 체크표시 및 클릭 불가능 설정 ..

Autocomplete Autocomplete란 사용자가 입력할 때마다 옵션을 제안해주는 기능이다.자동으로 입력값이 포함된 옵션을 보여주면서 선택할 수 있게 해준다. import { Autocomplete, TextField } from "@mui/material";function Mui() { const top100Films = [ // 단어검색시 보여줄 옵션들을 나열한다. { label: 'The Shawshank Redemption', year: 1994 }, { label: 'The Godfather', year: 1972 }, { label: 'The Godfather: Part II', year: 1974 }, { label: 'The D..

React Redux에서 store의 값을 수정하기위해 createSlice함수 속 reducers 속성이 필요하다.reducers 속성이란 현재 상태와 액션(action)을 인수로 사용하여 새로운 상태 결과를 반환한다. let user = createSlice({ name : 'user', initialState: 'zelord', reducers: { changeName(state) { // state는 값을 가리킨다. (zelord) return 'Kim zelord' // return으로 값을 전달한다. } }});// 다른 컴포넌트가 사용할 수 있도록 export 한다.export let { changeName } = user.a..

React Redux Redux란 javascript의 상태(데이터) 관리 라이브러리로 본질은 Node.js의 모듈이다. React 에서 Redux를 사용하여 props로 단계별로 내려 사용하지않고 컴포넌트들 간의 데이터 사용이 자유로워진다. Redux를 설치하기위해 터미널에 명령어를 입력한다. npm install @reduxjs/toolkit react-redux Redux를 설치하면 이러한 로그가 나타난다. redux로 데이터를 저장하기위해 store.js 파일을 만들어 스토어를 생성한다. // store.js // configureStore와 createSlice를 사용할 수 있도록 불러온다. import { configureStore, createSlice } from '@reduxjs/tool..

React Context API Context API 란 props를 일일히 자식 태그마다 넘겨보내지 않고 컴포넌트 트리 전체에 데이터를 쉽게 공유할 수 있도록 해주는 React 내장함수이다. Contex API를 사용하기위에 createContext함수를 import 해야한다. import { createContext } from "react"; createContext 함수란 context를 생성하여 공용하기위한 데이터(state)를 저장한다. export let Context1 = createContext(); 데이터를 공유하기위해 context를 생성하여 state 공유를 원하는 태그를 감싸준다. // 공용으로 사용할 데이터 let [product] = useState(['hat', 'shirt'..

React Axios React 에서 ajax를 사용하여 데이터를 가져오기 위해선 axios 라이브러리를 사용하여 데이터 통신을 할 수있다. 우선 터미널에 명령어를 입력하여 axios를 설치한다. npm install axios npm install axios 를 입력하여 설치하면 이러한 로그가 나타난다. 설치를 한 후 axios를 import를 해서 사용할 수 있도록 설정한다. import axios from 'axios'; axios의 데이터를 불러오는 get문법은 이러하다. axios.get('주소입력').then(() => { // 가져온 데이터를 활용한 코드 입력 }).catch(() => { // 실패시 코드 입력 }) get을 사용하여 가져온 후 then의 콜백함수를 사용하여 가져온 데이터를..

React useEffect dependency array useEffect 에서 두번째 파라미터를 옵션으로 dependency array값을 설정할 수 있다. useEffect 에서 dependency array 를 선언하면 useEffect가 mount된 후 선언된 배열속 값이 변경될때마다 실행하게된다. // useEffect 함수 useEffect(()=> { setTimeout(() => { setTemp(false); }, 2000); // dependecy array값으로 mount된 후 count의 값이 변경될때 실행된다. console.log('hello') }, [count]); count를 클릭 할 때마다 hello 로그가 찍힌다. dependency array에 값을 넣지않고 선언만 ..