일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 백엔드
- TypeScript
- useState
- 백엔드개발자
- spring boot
- Authentication
- 수제비
- VUE
- 정보처리기사 실기
- security
- It
- JS
- TS
- Front-End
- 웹개발자
- Node.js
- spring boot security
- 자바스크립트
- JavaScript
- Redux
- 타입스크립트
- 스프링부트
- 리액트
- spring
- 큐넷
- frontend
- 프론트엔드
- 정보처리기사
- React
- JWT
- Today
- Total
목록frontend (8)
솔적솔적
오늘은 성능향상 2탄, 원하는 자식컴포넌트의 재렌더링을 막을 수 있는 방법에 대해서 알아보고자한다. | 재렌더링 막는 방법 자식컴포넌트를 우선 하나 생성해보고, Cart안에 넣어놓는다. function Child() { return 자식컴포넌트 } function Cart(){ return ( ... ... )} state만들기 const [count, setCount] = useState(0) 버튼을 눌러 state변경하도록 하기 function Cart(){ const state = useSelector((state)=>{return state}) const dispatch = useDispatch();//store한테 요청을 보내주는 함수임 const [count, setCount] = useSta..
Redux에서 state를 변경하는 방법을 알아보자. 제일 먼저 state 수정해주는 함수를 만들고 함수를 실행해달라고 store.js에 요청해야한다. 1. state 수정하는 함수만들기 : reducers등장 const user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(state){ //--> 위의 state를 수정하는 함수를 요기다가 만드는 것 return 'sol' + state } } }) 2. 함수 만든 것을 사용할 수 있게 export해줘야함 const user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(..
이번에는 Redux 안에 있는 state가 object나 array일 경우에 변경하는 법을 알아보려한다. initialState 안을 오브젝트로 변경한다. store.js import { configureStore, createSlice } from '@reduxjs/toolkit' import user from '../store/userSlice' const user = createSlice({ name : 'user', // 'state이름', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ return 'park' + state } } }) object로 바꿨기 때문에 state를 데이터바인딩하는 문법도 달라졌을 것이..
Store.js를 빼다가 쓰는 법을 알아보자. 그전에 저번 시간에 말했던 것 복습. Redux를 왜 사용하는가. 👉 이유는 컴포넌트간에 state공유가 불편할 때 사용한다. redux를 사용하면 redux store.js통 안에 state들을 다 넣고 빼서 사용할 수 있기 때문이다. 그럼 props전송이 필요없는 이점이 있기 때문. 리덕스 스토어안에 있던 스테이트들은 모든 컴포넌트들이 직접 통신을 해서 store.js안에 있는 state을 가져가서 쓸 수 있으니 props전송을 안해도된다는 것! 그럼 이 store.js 파일에다가 state만드는 법을 알아보자. 일단 Store.js 파일안에다가 createSlice() 쓰고 import해야한다. useState와 비슷한 용도임 store.js impor..