일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- JS setInterval
- JS 기초
- JS 숫자
- JS prompt
- JS preventDefault
- JS 연산
- CSS속성정리
- JS 데이터타입
- JS redirection
- CSS기초
- JS 함수
- JS classList
- JS null undefined
- JS setTimeout
- JS value속성
- JS typeof연산자
- JS append
- JS 화살표함수
- JS 형변환
- git 협업셋팅
- JS appendChild
- JS form action
- JS form
- JS localStorage
- JS 스코프
- JS 타이머기능
- JS clearInterval
- HTML기초
- JS 삼항연산
- js 변수
목록📚강의록📚 (128)
공부기록용
🔴react-router-dom 🔴react-router-dom Hooks 🔻useNavigate 🔻useLocation 🔻Link 🔴children 용도 1. 페이지 컴포넌트 생성 2. `Router.js` 생성 및 router를 구성하는 설정 코드 작성 3. `App.jsx`에 import 및 적용(2번을) 4. 페이지 이동 테스트 각 페이지 컴포넌트 별 주소 Home.jsx -> localhost:3000/home About.jsx -> localhost:3000/about Contact.jsx -> localhost:3000/contact Works.jsx -> localhost:3000/works shared/Router.js : router의 설정 파일 pages : 페이지 컴포넌트 react..
💡action객체💡 액션 객체는 상태 변경을 나타내는 일종의 "이벤트"이다. Redux에서는 상태 변경을 위해 액션 객체를 생성하고, 이를 Redux 스토어로 보내서 상태를 업데이트한다. { type: "ACTION_TYPE", payload: { /* 데이터 */ } } type: 액션의 종류를 식별하는 문자열. 주로 대문자와 스네이크 케이스(ACTION_TYPE)로 작성된다. 이를 통해 리듀서(Reducer)에서 어떤 상태 변경이 발생해야 하는지 식별할 수 있다. payload (선택적): 액션과 관련된 데이터를 포함하는 객체. 필요에 따라 액션과 함께 전달되어야 하는 추가 데이터가 있다면 payload 속성을 사용하여 해당 데이터를 포함시킬 수 있다. 액션 객체는 주로 "액션 생성자(Action C..
🔴Payload 🔴Ducks 패턴 Payload action객체를 리듀서에게 보낸다. 그 action에는 type를 통해 동작을, payload를 통해서는 어떤걸 보낼지 보낸다. 모듈을 만들 때, 빈 페이지에 만들어야 할 것을 리스트업 하고 작성하도록 해보기 // src/redux/modules/counter.js // Action Value // Action Creator // Initial State // Reducer // export default reducer export const plusOne = function(){ return{ type: PLUS_ONE, } } export const minusOne = function(){ return{ type: MINUS_ONE, } } > ty..
🔴Action creator를 사용하는 이유 🔴action value 🔴action creators 💫Action creator를 사용하는 이유 휴먼에러 (오타) 방지 액션객체의 type value를 상수로 만들어놓았기 때문에, 개발툴에서 자동완성등의 보조 기능을 지원받을 수 있습니다. 그래서 의도치 않은 휴먼에러(오타)를 없앨 수 있어요. 유지보수의 효율성 증가 우리가 만든 Action Creator가 만약 100군데에서 쓰이고 있는 상태에서 혹여나 그것을 바꾸어야 하는 상황이 오더라도 단 한번의 수정으로 100군데에 모든 수정사항을 반영할 수 있습니다. 코드 가독성 모듈 파일에서 Action Creator가 일목요연하게 정리가 되어있으면, 내가 아닌 다른 개발자가 보았을 때 해당 모듈이 가지고 있는 ..
🔴모듈 🔴useSelector 🔴usedispatch 모듈 모듈이란, State의 그룹 counter.js_즉, state라는 뜻이지 // src/modules/counter.js // 초기 상태값 const initialState = { number: 0, }; // 리듀서 const counter = (state = initialState, action) => { switch (action.type) { default: return state; } }; // 모듈파일에서는 리듀서를 export default 한다. export default counter; initialState === 초기 상태값 어떤 State의 초기값을 정해주는 것 // 초기 상태값 const initialState = { nu..
Redux “중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리) 리덕스는 중앙 State 관리소를 가지고 있으며, 모든 State는 이곳에서 생성된다. 전역 상태, 즉 Global State를 의미하고 그것을 관리하게 도와주는 라이브러리 (패키지) 이기 때문에 전역 상태관리 라이브러리 라고 많이 표현한다. 중앙데이터 관리소에서 전역속성으로써 component에 접근 및 제어, 관리를 할 수 있게 도와주는 라이브러리이다. useState로 생성한 State는 Local State이고, 리덕스에서 생성한 State는 Global State이다. 리덕스 설치 yarn add redux react-redux # 아래와 같은 의미 yarn add redux yarn add react-redux..