728x90 728x90 분류 전체보기153 React에서 Redux 사용하기 React에서 Redux 사용하기 리액트에서 리덕스를 사용하기 위해서 redux 패키지를 설치하는데 redux만 설치하는 건 아니다. 리덕스는 리액트에서만 쓰는 게 아니고 어떤 자바스크립트 프로젝트에서도 사용될 수 있다. 리덕스는 리액트에 관해 알지도 못하고 리액트에 관심도 없다. 리덕스와 리액트 앱의 작업을 쉽게 하기 위해서 react-redux 패키지를 추가로 설치한다. npm install redux react-redux 먼저 store 폴더를 만들고 store를 정의한다. import { createStore } from 'redux'; const counterReducer = (state = { counter: 0 }, action) => { if (action.type === 'incremen.. 2023. 2. 14. Redux 작동방식 Redux 작동방식 리덕스는 애플리케이션에 있는 하나의 중앙 데이터(상태) 저장소이다. 2개 이상의 저장소를 가지지 않고 오직 한 개의 저장소를 가진다. 그 저장소에 인증 상태, 테마, 입력 상태 등 무엇이든 저장할 것이다. 그러면 관리가 어려울 것 같은데 그 저장소 전체를 항상 직접 관리할필요가 없다. 궁극적으로는 그 저장소에 데이터를 저장해서 우리는 컴포넌트 안에서 그걸 사용할 수 있다. 저장소에 있는 상태가 변경되면 우리의 컴포넌트에서 그걸 인지해서 그에 맞춰 대응하고 UI를 업데이트하기 위해서 중앙 저장소에 대한 구독을 설정한다. 컴포넌트가 저장소를 구독하고 데이터가 변경될 때마다 저장소가 컴포넌트에 알려주게 된다. 또한 그 데이터를 변경할 방법이 필요한데 컴포넌트는 저장소에 있는 그 데이터를 직.. 2023. 2. 13. Redux의 개념과 사용하는 이유 리덕스의 개념과 사용하는 이유 리덕스란? 리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템이다. 리덕스는 다수의 컴포넌트나 심지어는 앱 전체에서 state를 관리하도록 도와준다. 우리는 상태를 세 가지로 구분할 수 있는데 로컬 상태, 크로스 컴포넌트 상태,앱 와이드 상태이다. 로컬 상태 (Local State) 로컬 상태는 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태이다. 예를 들면 사용자 입력을 받고 useState를 사용해서 그 입력을 state 변수에 저장하고 토글 버튼을 클릭하면 세부 정보가 표시되고 다시 클릭하면 감춰지게 되는 경우이다. 보통은 useState를 사용해서 컴포넌트 안에서 로컬 상태를 관리하고 약간 복잡하다면 useReducer를 사.. 2023. 2. 12. 원티드 프리온보딩 인턴십 (2월) 지원 에세이 원티드 프리온보딩 인턴십 (2월) 지원 에세이 (1) 지원하고 싶은 참가기업은 어디인지 개발자로 취업할 때 어떤 기술 스택을 사용하는지도 물론 중요하지만, 도메인도 중요하다고 생각한다. 일단 관심 있는 분야를 개발하게 된다면 더 애정을 가지고, 더 재미있게 개발할 수 있을 것이다. 나는 언젠가는 교육자의 길도 걷고 싶고 교육 분야에 관심이 있는 편이다. 참가기업에 에이블런은 비전문가를 위한 데이터 활용 교육, 앤드스페이스를 서비스한다고 하는데 내가 예전에 생각해본 창업 아이디어들이라서 흥미가 생겼다. 개발뿐만 아니라 교육 관련 프로세스도 경험하고 싶다. (2) 프리온보딩 인턴십에서 본인이 얻고 싶은 것 이번 과정을 통해서 얻고 싶은 것은 2가지이다. 첫 번째 리액트에 대한 기본기와 프론트엔드 개발자로서의.. 2023. 2. 10. 이전 1 ··· 28 29 30 31 32 33 34 ··· 39 다음 728x90 728x90
