✨ Front-end67 [React] 에러 react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다. 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 라는 오류가 떴을 때, npm update 수행 이후 npm start를 다시 해보면, 정상적으로 실행 된다. 2023. 9. 26. [React] Redux 사용 (store, actions, reducers, dispatch) Redux란? Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리로서, 애플리케이션의 상태를 효율적으로 관리하고 상태 변화를 예측 가능하게 만든다. Redux를 사용하면 애플리케이션의 상태를 하나의 전역 객체인 "스토어 (store)"에 저장하고, 이를 관리하며 갱신할 수 있다. Redux의 핵심 구성 요소 4가지 Store (스토어): Redux 스토어는 애플리케이션의 상태를 담고 있는 객체다. 모든 상태는 스토어에 집중적으로 관리된다. Actions (액션): 액션은 애플리케이션에서 스토어로 데이터를 전달하는 객체다. 액션은 어떤 변화가 일어나야 하는지 설명하며, 스토어에서 이를 기반으로 상태를 변경한다. Reducers (리듀서): 리듀서는 액션에 따라 상태를 어떻게 변경할지를 정의.. 2023. 9. 25. [React] Redux 개념과 동작원리 Redux Redux는 리액트 없이도 사용할 수 있는 상태관리(state management) JavaScript 라이브러리이다. 애플리케이션의 많은 부분에 필요한 "전역" 상태를 관리하는 데 도움이 된다. 왜 필요함? 상태관리가 왜필요할까? 하나의 컴포넌트가 사용하는 데이터 역할을 상태라고 본다. state 는 자주 변하고 상황에 따라 최상위 루트까지 접근을 해야하는데, 매번 props로 계속 내려주는 비효율적인 일을 생략하고, 최단거리로 사용할 수 있다. 그래서 예측이 가능하고, 예상대로 작동할 것이라는 확신을 갖도록 도와주기 때문이다. react에서는 상태와 속성(props)을 이용한 컴포넌트 단위 개발 아키텍처를 배웠다면, Redux에서는 컴포넌트와 상태를 분리하는 패턴을 배운다. Redux의 구.. 2023. 9. 25. [React] Router -2 Nested(중첩) Router 및 Param, Navigate Nested Router 태그 안에는 태그가 존재할 수 있다. 이 경우 내의 페이지 안에 하위 경로를 설정해 지정할 수 있는데, 이것을 Nested Router라고 한다. App.js 내에 를 표시하고 싶을 경우 이라는 태그를 사용해 활성화 시킬 수 있다. IndexPage.js home이나 hello 경로로 들어갔을 때 , App.js에서 분명 IndexPage 말고도 아래에 Route가 두개 더 있어서 떠야하는데 안뜬다. 이 없어서 그렇다. Outlet을 추가해야 중첩 Router를 사용할 수 있어 위와 같이 아래에 있던 도 추가 된 것을 볼 수 있다. ReactRouterHooks React Router에는 여러 hook들을 제공하는데, 그 중 3가지 useParams - URL 파라미터 정보를 가.. 2023. 9. 22. 이전 1 2 3 4 5 ··· 17 다음
