FE/React3

• 

  [React] Redux 기본 사용법 : createStore, Provider, userSelector, useDispatch 1. createStore로 store 만들기createStore는 Redux에서 전역 상태 저장소(store)를 만드는 함수.사용하려면 먼저 reducer 함수가 있어야 한다.// reducer.jsconst 초기값 = { count: 0 };function counterReducer(state = 초기값, action) { switch (action.type) { case 'INCREMENT' : return { count: state.count + 1 }; case 'DECREMENT' : return { count: state.count - 1 }; default: return state; }}export default counterReducer;/.. FE/React 2025. 7. 17.

• 

  [React] Redux란? 왜 써야 할까? React로 프로젝트를 하다 보면 어느 순간 state 관리가 점점 복잡해지는 경험을 하게 됩니다.처음에는 간단한 컴포넌트 간 props 전달로도 충분했지만, 컴포넌트가 많아지고 상태가 얽히면서 버그가 생기고,"대체 어디서 상태가 바뀌는지" 알 수 없어지는 순간이 오죠.이럴 때 등장하는 것이 Redux 입니다. Redux란?Redux는 자바스크립트 앱의 상태(state)를 중앙에서 관리할 수 있도록 도와주는 라이브러리입니다.React뿐만 아니라 다양한 프레임워크에서도 사용할 수 있지만,보통은 React + Redux 조합으로 많이 사용합니다. ❓ Redux를 왜 사용할까?1. props 전송이 귀찮을 때React는 컴포넌트 기반이기 때문에상위 컴포넌트 → 하위 컴포넌트로 데이터를 전달할 때 prop.. FE/React 2025. 7. 17.

• 

  [React] React 입문기 : 왜 React를 써야 할까? 웹개발을 하면서 프론트엔드 개발의 트렌드에 쫓아가야 할 필요를 점점 더 느낀다.금융권에도 React가 많이 사용됨에 따라 React 스킬도 함양할 필요를 더욱이 느낀다 ..!!React도 마스터해보자!!!! +_+ 기존 JavaScript로는 왜 불편할까?기존의 JavaScript만으로도 HTML을 조작하고 인터랙티브한 웹페이지를 만들 수 있습니다.하지만 아래와 같은 상황에서 점점 한계를 느끼게 됩니다. ▶ DOM 조작이 복잡하다.직접 document.querySelector, appendChild 등을 써서 DOM을 조작해야 하니 코드가 길어지고, 상태가 바뀔 때마다 어떤 부분을 업데이트할지 신경 써야 합니다. ▶ 상태 관리가 어렵다.UI와 데이터 상태(State)가 분리되어 있어서, 여러 상태가 .. FE/React 2025. 5. 30.